index.html
README.md
index.js
bundle.js
prepareData.js
styles.css
drawMap.js
new fileforkset heightexportdelete
Exploring survey data interactively - y-axis
Choerd

Interactive bar chart example

In this visualization, the data that's rendered in the view changes because of user interaction

Steps

  • Find good example of update loop
  • Write a concept that uses interaction (changing scales?)
  • Set up basic chart
  • Set up interacion
  • Make x-axis interactive so remove and enter are also needed

Concept

A chart showing distribution or relation between to variables. The vriables can be chosen through a dropdown menu resulting in a rerendering of datapoints and axis.

  • Group students by subject interest on x axis.
  • Get data from different vars on y axis

Notes

  • Note that d3 has a new way of handling enter, update and exit explicitly as explained in this article.
  • The options in the form are generated from the data using a data join
  • The scales, the data and the selected opton are global. I found that to be nicer than to keep passing them everywhere
  • If you want to add a new option to this interactive graph, all you have to do is add a new computed variable in the prepareData module and everything else will happen automatic 🌈

Inspiration

All code in VizHub is released under the MIT License.