Published
Edited
Mar 19, 2018
colorScale = d3.scaleLinear().domain([.3, 0, -.3]).range(['blue', 'grey', 'orange'])
// try using different colors or changing the domain values
//colorScale = d3.scaleLinear().domain([20000, 60000, 100000]).range(['yellow', 'grey', 'green'])
setColor = d => colorScale((d.male - d.female)/d.female)
//setColor = d => colorScale(d.male + d.female)
addShape = function(elem){
var points = elem.append('g')
.attr("transform", d => "translate( " + xScale(d.female) + "," + yScale(d.male) + ")")
// add a circle for each point
points.append("circle")
.attr("r", 5)
.attr("fill", setColor)
.attr("stroke", "grey")
// add text label for each point, and position the test
points.append("text")
.text(function(d) { return d.age; })
.attr("font-size", "8px")
.attr("dx", d => {if(d.male > d.female){return -30}; return +8})
.attr("dy", d => {if(d.male > d.female){return -8}; return +4});
elem.append("line")
.attr('x1', d => xScale(d.female))
.attr('x2', d => xScale((d.female + d.male)/2))
.attr('y1', d => yScale(d.male))
.attr('y2', d => yScale((d.female + d.male)/2))
.attr("stroke", setColor)
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
