Episode 10: Dynamic Charts

Get it Right in Black & White
#1

Slides

Exercise: Fork the Animated Reusable D3 Scatter Plot and add axis labels.

Hints: You’ll probably need to…

  • add new accessors xLabel and yLabel,
  • use the general update pattern with .data([null]), and
  • disambiguate between the text labels using classes.
Get it Right in Black & White Index
#2

Here’s an attempt

Having trouble figuring out how to dynamically update the text value based on the updated column value.

#3

Added axis labels and animation to the x-axis title. Also, tried to dynamically select only the “numeric” columns from the data and iterate over those. Will need to check this feature on a new dataset to see if this is working correctly :sweat_smile:

#4

Another exercise submission. This time using a new dataset which was really fun. Also, the reusable nature of the template made it really simple to update for new data.

1 Like
#5

This is my exercise with dynamic and animated labels

The rationale is mimicking the example that we saw in the d3 docs during the last lesson. The animation highlights the dynamics behind the general update pattern. So, in the x-axis label we have:

  • green letters => enter
  • black letters => update
  • brown letters => exit

To do the trick, a custom key function, passed to data(), maps each letter to its compound key: <letter>_<index>:

1 Like
#6

thanks to @kaustavSen code I could get the y-Axis label to change

  • 2 second delay to start

to do

  • clear data between drawing of plot
  • add vaccination coverage in gray scale to plot
2 Likes
#7

Thanks to @floatingpurr for some extra inspiration. Here’s some flying data! Currently working on transitions with the axis. It would be cool if I could display the Models and Make of the cars on the X axis. Or perhaps a legend? Or marks with icons for each manufacturer?

1 Like
#8

Added label to the plot https://vizhub.com/bvpelt/7e776c235b3e432fbbe64ce1c2057cad?edit=files&file=scatterPlot.js

1 Like
#9

EPISODE 10 was chalk-full of goodies. I also learned a ton from Andrea Mignone´s D3 Scatter Plot Matrix

1 Like
#10

Wow that’s amazing! Very nice work! I love the styling of the color legend.

#11

hi,
I am learning through 2020 data visualization freeCodingCamp course. I am unable to run the index.html and index.js pair locally. I know you use use a rollup.js system which produces a bundle.js which you include in a script tag. is there some place i can know how to do that locally on my machine. i am on fedora+vscode+npm+node system.

#12

The VizHub export contains a package.json with a basic script that creates bundle.js when run locally as npm run build.

See also

For more detail on how you might approach local development, check out this video too on Vite:

Good luck!