Published
Edited
Oct 31, 2019
// In this class, we use D3 with version 3
d3 = require('d3@v3')
margin = ({top: 20, right: 20, bottom: 20, left: 40})
width = 1180 - margin.right -margin.left
height = 600 - margin.top - margin.bottom
xScale = d3.scale.log().domain([300, 1.3e5]).range([0, width])
xAxis = d3.svg.axis().orient("bottom").scale(xScale).ticks(12, d3.format(", d"))
yScale = d3.scale.linear().domain([10, 85]).range([height, 0])
yAxis = d3.svg.axis().orient("left").scale(yScale)
colorScale = d3.scale.category10().domain(["Africa","Asia", "Australia", "Central America","Europe", "North America", "Oceania", "South America"]).range(['#00d5e9', '#ff5872', '#000080' , '#8A2BE2', '#FFC700', '#7feb00', '#ff00ff', '#8c510a'])
radiusScale = d3.scale.sqrt().domain([0, 5e8]).range([0, 40])
regionScale = d3.scale.ordinal().domain(["Africa","Asia", "Australia", "Central America","Europe", "North America", "Oceania", "South America"]).range(["A1","A2", "A3", "C1","E1", "N1", "O1", "S1"])
function interpolateData(nations, year){
// filter data in that year
}
function position(dot){
// change the position of bubbles and their radius, labels
}
// Defines a sort order so that the smallest dots are drawn on top.
function order(a, b) {
return b.Population - a.Population;
}
function key(d) { return d.Country; }
chart = {
const SVGCx = d3.select(DOM.svg(1180, 600)).attr("id", "main");
var svg = SVGCx.append("g").attr("id", "svg")
.attr("transform", "translate(" + margin.left + "," + margin.top +")");
// Add x-axis
// Add y-axis
// Add x-text
// Add y-text
// Add Year Label
// draw legend
// drawLegend(svg);
d3.csv(url, function(nations){
// draw bubbles
//Start a transition that interpolates the data based on year
function tweenYear(){
var year = d3.interpolateNumber(1900,2015);
return function(t) { update(year(t)); };
}
// update views based on year
function update(year){
var rounded_year = Math.round(year);
// update year label
// update label texts
// update bubbles
}
});
return SVGCx.node();
}
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.
