Fullstack Data Visualization with D3 Build Beautiful Data Visualizations and Dashboards with D3

Description

Table of Contents Book Revision Bug Reports Be notified of updates via Twitter We'd love to hear from you! Making Your First Chart Getting started Loading the weather dataset Getting a server running Looking at our data Setting up our line chart Drawing our chart Creating our workspace Adding an SVG element Creating our bounding box Creating our scales Drawing the line Drawing the axes Making a Scatterplot Intro Deciding the chart type Steps in drawing any chart Access data Create chart dimensions Draw canvas Create scales The concept behind scales Finding the extents Draw data Data joins Data join exercise .join() Draw peripherals Initialize interactions Looking at our chart Extra credit: adding a color scale Making a Bar Chart Deciding the chart type Histogram Chart checklist Access data Create dimensions Draw canvas Create scales Creating Bins Creating the y scale Draw data Adding Labels Extra credit Draw peripherals Set up interactions Looking at our chart Extra credit Accessibility Animations and Transitions SVG CSS transitions Using CSS transition with a chart d3.transition Lines Interactions d3 events Don't use fat arrow functions Destroying d3 event listeners Bar chart Scatter plot Voronoi Changing the hovered dot's color Line chart d3.scan() Making a map Digging in What is GeoJSON? Access data Our dataset Create chart dimensions What is a projection? Which projection should I use? Finishing creating our chart dimensions Draw canvas Create scales Draw data Draw peripherals Drawing a legend Marking my location Set up interactions Wrapping up Data Visualization Basics Types of data Qualitative Data Quantitative Data Ways to visualize a metric Size Position Color Putting it together Chart design Simplify, simplify, simplify Annotate in-place Add enhancements, but not too many Example redesign Colors Color scales 1. Representing a category Custom color scales Creating our own colors keywords rgb hsl hcl d3-color Color tips Wrapping up Common charts Chart types Timeline Heatmap Radar Scatter Pie charts & Donut charts Histogram Box plot Conclusion Dashboard Design What is a dashboard? Showing a simple metric Dealing with dynamic data Data states Dancing numbers Designing tables Designing a dashboard layout Have a main focus Keep the number of visible metrics small Let the user dig in Deciding questions How familiar are users with the data? How much time do users have to spend? Complex Data Visualizations Marginal Histogram Chart bounds background Equal domains Color those dots Mini histograms Static polish Adding a tooltip Histogram hover effects Adding a legend Highlight dots when we hover the legend Mini hover histograms Radar Weather Chart Getting set up Accessing the data Creating our scales Adding gridlines Draw month grid lines Draw month labels Adding temperature grid lines Adding freezing Adding the temperature area Adding the UV index marks Adding the cloud cover bubbles Adding the precipitation bubbles Adding annotations Adding the tooltip Wrapping up Animated Sankey Diagram Getting set up Accessing our data Accessing sex variables Accessing education variables Accessing socioeconomic status variables Stacking probabilities Generating a person Drawing the paths X scale Y scales Drawing the paths Labeling the paths Start labels End labels Drawing the ending markers Drawing people Positioning our people Updating our peoples' y-positions Adding jitter Hiding people off-screen Adding color Creating a color scale Adding a color key Coloring our markers Adding a filter to our markers Giving our people ids Showing ending numbers Updating the ending values Label our ending bars Additional steps Wrapping up Using D3 With React React.js Digging in Access data Create dimensions Draw canvas Create scales Draw data Draw peripherals Axes, take two Set up interactions Finishing up Using D3 With Angular Angular Digging in Access data Create dimensions Updating dimensions on window resize Draw canvas Using our chart component Create scales When to update our scales? Draw data Using our line component Draw peripherals Axes, take two Re-creating our axis component Set up interactions Finishing up D3.js What did we cover? What did we not cover? Going forward How was your experience? Appendix A. Generating our own weather data Chrome's Color Contrast Tool B. Chart-drawing checklist C. SVG elements cheat sheet Changelog Revision 15 04-01-2020 Revision 14 03-11-2020 Revision 13 01-08-2020 Revision 12 12-09-2019 Revision 11 10-11-2019 Revision 10 09-29-2019 Revision 9 08-28-2019 Revision 8 07-04-2019 Revision 7 06-14-2019 Revision 6 06-06-2019 Revision 5 06-03-2019 Revision 4 05-24-2019 Revision 3 05-17-2019