Export Code
Connected
index.js
import { select } from 'd3'
import { prepareData, transformData } from './prepareData';

const endpoint = 'https://gist.githubusercontent.com/Razpudding/f871bd3fb42008de991cfc8cf689dcbf/raw/35c7867c24d60bd59fc12ab79176305f4eb8480b/surveyDataByInterest.json'
const svg = select('svg')
const margin = {top: 48, right: 72, bottom: 120, left: 72}
const height = parseInt(svg.style('height'), 10) - margin.top - margin.bottom
const width = parseInt(svg.style('width'), 10) - margin.left - margin.right
/* Conventional margins: https://bl.ocks.org/mbostock/3019563. */
const group = svg
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

// Scales
const x = d3.scaleBand().padding(0.2)
const y = d3.scaleLinear()
// Store the raw unnested data globally so we don't have to pass it to every function
let unNestedData
// Store the nested data
let nestedData
//The initial variable the y axis is set on
let yVar = "biggestExpenseAvg"//"biggestExpenseAvg" // "sistersAvg" //"heightAvg"
let xVar = "preference"

makeVisualization()
// Our main function which runs other function to make a visualization
async function makeVisualization(){
//Use the prepareData function to get our data
unNestedData = await prepareData(endpoint)
//Set up the initial data transformation
nestedData = transformData(unNestedData, xVar)
const xFields = Object.keys(unNestedData[0]);
const yFields = Object.keys(nestedData[0].value);
setupInput(yFields, xFields)
setupScales()

Exploring survey data interactively - both axes

Laurens

Last edited Nov 10, 2020
Created on Nov 20, 2019

Dynamic axes using the update pattern example

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

Steps

  • Make the nesting dynamic
  • Nest on health, stress dynamically
  • 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 a variable on the 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
  • Observe how prepareData module now exports 2 functions separately which we can use to have greater control over the transformation of data from our index.js file.

Inspiration

MIT Licensed