Data Manipulations

When using D3—and doing data visualization in general—you tend to do a lot of array manipulation. You could use array methods built-in to JavaScript, look for D3 Array utilities or go for Underscore.js or Lo-Dash for JavaScript utility libraries.

But, for basics, mostly if you're only looking to filter the data.

Say plot countries.csv where gold > 100.

// data => countries.csv
data = data.filter(function (d) {return (d.gold > 100) })
console.log(data) // returns India and UK

// Previous scatterplot function comes below

Use d3.filter

// apply filter after appending circles
svg.selectAll("circle")
   .data(data).enter()
   .append("circle")
   .filter(function(d) { return d.gold > 100 })
   // attr(..., ...)

array.filter() vs d3.filter()

Notice the visual differences in two approaches?

• Check DOM
• Check Scales
• And, labels