Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/clementmadiot/freecodecamp_data-visualization
Formation FreeCodeCamp : Data Visualization
https://github.com/clementmadiot/freecodecamp_data-visualization
Last synced: 12 days ago
JSON representation
Formation FreeCodeCamp : Data Visualization
- Host: GitHub
- URL: https://github.com/clementmadiot/freecodecamp_data-visualization
- Owner: ClementMadiot
- Created: 2024-11-20T09:38:26.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-11-28T08:32:33.000Z (26 days ago)
- Last Synced: 2024-11-28T09:30:03.066Z (26 days ago)
- Language: JavaScript
- Homepage:
- Size: 393 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
FreeCodeCamp Data Visualization
##
📋 Summary
- ✨ [Introduction](#introduction)
- 🌐 [Projects](#projects)
- 📚 [Courses](#courses)
Data is all around us, but it doesn't mean much without shape or context.
In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.
You'll also learn about JSON (JavaScript Object Notation), and how to work with data online using an API (Application Programming Interface).
##
Projects 🎓
- [x] [Visualize Data with a Bar Chart](./1_Bar-chart/)
- [x] [Visualize Data with a Scatterplot Graph](./2_Scatterplot-graph/)
- [x] [Visualize Data with a Heat Map](./3_Heat-map/)
- [ ] [Visualize Data with a Choropleth Map](./4_Choropleth-map/)
- [ ] [Visualize Data with a Treemap Diagram](./5_Treemap-diagram/)
##
📚 Courses
- [x] [Data Visualization with D3](Data-Visualization)
- [x] [JSON APIs and AJAX](JSON-APIs)
###
Data Visualization with D3
> 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.
> In the Data Visualization with D3 courses, I learn how to work with data to create different charts, graphs, hover elements, and other ingredients to create dynamic and attractive data visualizations.
```
1. Add Document Elements with D3
2. Select a Group of Elements with D3
3. Work with Data in D3
4. Work with Dynamic Data in D3
5. Add Inline Styling to Elements
6. Change Styles Based on Data
7. Add Classes with D3
8. Update the Height of an Element Dynamically
9. Change the Presentation of a Bar Chart
10. Learn About SVG in D3
11. Display Shapes with SVG
12. Create a Bar for Each Data Point in the Set
13. Dynamically Set the Coordinates for Each Bar
14. Dynamically Change the Height of Each Bar
15. Invert SVG Elements
16. Change the Color of an SVG Element
17. Add Labels to D3 Elements
18. Style D3 Labels
19. Add a Hover Effect to a D3 Element
20. Add a Tooltip to a D3 Element
21. Create a Scatterplot with SVG Circles
22. Add Attributes to the Circle Elements
23. Add Labels to Scatter Plot Circles
24. Create a Linear Scale with D3
25. Set a Domain and a Range on a Scale
26. Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset
27. Use Dynamic Scales
28. Use a Pre-Defined Scale to Place Elements
29. Add Axes to a Visualization
```
> Similar to how UIs help people use programs, APIs (Application Programming Interfaces) help programs interact with other programs. APIs are tools that computers use to communicate with one another, in part to send and receive data.
> Programmers often use AJAX (Asynchronous JavaScript and XML) when working with APIs. AJAX refers to a group of technologies that make asynchronous requests to a server to transfer data, then load any returned data into the page. And the data transferred between the browser and server is often in a format called JSON (JavaScript Object Notation).
> This course teach me the basics about working with APIs and different AJAX technologies in the browser.
```
1. Handle Click Events with JavaScript using the `onclick` property
2. Change Text with click Events
3. Get JSON with the JavaScript `XMLHttpRequest` Method
4. Get JSON with the JavaScript `fetch` method
5. Access the JSON Data from an API
6. Convert JSON Data to HTML
7. Render Images from Data Sources
8. Pre-filter JSON to Get the Data You Need
9. Get Geolocation Data to Find A User's GPS Coordinates
10. Post Data with the JavaScript `XMLHttpRequest` Method
```