D3.js

Question 1

What’s the basic approach to add a bunch of divs based on an array of data?

Answer 1

d3.select(‘body’).selectAll(‘div’).data(someData).enter().append(‘div’)

Question 2

If you’re adding elements to a selection with append or insert, how can you add a class?

Answer 2

.attr(‘class’, ‘my-class’) or else .attr(‘class’, d => d.className) // if data has className as a property.

Question 3

If you append an ‘svg’ and then append a ‘rect’, how can you now append a bunch of circles to ‘svg’ so they aren’t placed inside of ‘rect’?

Answer 3

Create a new selection. d3.select(‘svg’).selectAll(‘circle’).data(…

Question 4

How does d3.scaleLinear() work?

Answer 4

var xScale = d3.scaleLinear().domain( [ dataLow,dataHigh ] ).range( [ renderLow, renderHigh ] )

Question 5

How could you fill up the horizontal space in a bar chart (assuming vertical space mapped to the data)?

Answer 5

Use d3.scaleBand() along with domain, range, and optional padding.

Question 6

What ordinal scales does d3 provide?

Answer 6

scaleOrdinal, scaleBand, scalePoint, and category scales (that work with scaleOrdinal for colors)