🎉 Welcome to my Data Visualization adventure! This repository documents my journey through the Data Visualization Certification course, where I learned how to transform raw data into compelling visual storytelling 🎈.
- D3, or D3.js, stands for Data Driven Documents. It's a JavaScript library for creating dynamic and interactive data visualizations in the browser.
- D3 is built to work with common web standards – namely HTML, CSS, and Scalable Vector Graphics (SVG).
- D3 supports many different kinds of input data formats. Then, using its powerful built-in methods, you can transform those data into different charts, graphs, and maps.
- APIs (Application Programming Interfaces) are like UIs for programs, enabling them to interact with each other by sending and receiving data.
- APIs facilitate communication between computers, serving as tools for data exchange.
- AJAX (Asynchronous JavaScript and XML) is commonly used by programmers to work with APIs.
- AJAX involves making asynchronous requests to a server to transfer data, then displaying the received data on the page.
- JSON (JavaScript Object Notation) is a typical format for data transferred between the browser and server in this context.
Put your newfound skills to the test with these challenging projects:
- Bar Chart 📊: Sip of Data Link
- Scatterplot Graph 📈: Connect the Dots Link
- Heat Map 🌡️: Data Inferno Link
- Choropleth Map 🗺️: Cartography Magic Link
- Treemap Diagram 📊: Descend into Hierarchy Link
- Add Document Elements with D3
- Select a Group of Elements with D3
- Work with Data in D3
- Work with Dynamic Data in D3
- Add Inline Styling to Elements
- Change Styles Based on Data
- Add Classes with D3
- Update the Height of an Element Dynamically
- Change the Presentation of a Bar Chart
- Learn About SVG in D3
- Display Shapes with SVG
- Create a Bar for Each Data Point in the Set
- Dynamically Set the Coordinates for Each Bar
- Dynamically Change the Height of Each Bar
- Invert SVG Elements
- Change the Color of an SVG Element
- Add Labels to D3 Elements
- Style D3 Labels
- Add a Hover Effect to a D3 Element
- Add a Tooltip to a D3 Element
- Create a Scatterplot with SVG Circles
- Add Attributes to the Circle Elements
- Add Labels to Scatter Plot Circles
- Create a Linear Scale with D3
- Set a Domain and a Range on a Scale
- Use the d3.max and d3.min Functions to Find
- Minimum and Maximum Values in a Dataset
- Use Dynamic Scales
- Use a Pre-Defined Scale to Place Elements
- Add Axes to a Visualization
- Handle Click Events with JavaScript using the onclick property
- Change Text with click Events
- Get JSON with the JavaScript XMLHttpRequest Method
- Get JSON with the JavaScript fetch method
- Access the JSON Data from an API
- Convert JSON Data to HTML
- Render Images from Data Sources
- Pre filter JSON to Get the Data You Need
- Get Geolocation Data to Find A User's GPS Coordinates
- Post Data with the JavaScript XMLHttpRequest Method
Explore the magic of data visualization with me! Feel free to reach out, collaborate, and embark on new adventures in the realm of data.