A data visualization project using D3.js. I created this project to learn more about D3.js. I'm continuously adding to it; right now it contains a horizontal bar graph, a bubble chart, a donut chart, a pie chart, and a scatter plot, with responsive code included for mobile. If you're having trouble creating any of these graphs, perhaps looking through this project can help! Data is from the Centers for Disease Control and Prevention, United States Census Bureau, United States Department of Labor, and YouGov, which are all linked to in the project.
- Horizontal Bar Chart
- Bubble Chart
- Donut Chart (that can transition between different data sets)
- Pie Chart (that can transition between different data sets)
- Scatter Plot
Each graph has it's own .js file named with what type of graph it is. The data for each graph is included in its file. The html has divs with ID's matching the type of graph.
Example: pieChart.js includes code for the pie chart and the data it uses. In the html, it appears in a div with the ID #pie.
I've written a few tutorials to help you implement these on your own.
- Creating a donut chart that switches between datasets
- Show data on Mouse-Over (Donut chart)
- Creating a Simple Scatter Plot
- Hover Effects for Your Scatter Plot
- Quick fix to make your d3.js graph responsive
See a live preview here.