Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
<svg id="base" width="500" height="550">
<style>
.line {fill:none; stroke: #000000}
</style>
<g id="layer1" transform="translate(50 10)"></g>
<g id="layer2" transform="translate(50 300)"></g>
</svg>
sortedData = world_gdp_growth_pivot.sort((a,b)=>d3.ascending(toNum(a["Year"]),toNum(b["Year"])));
// sort the data so it's ordered left to right by year. The data may already be, but let's make sure.
scaleX = d3.scaleLinear().domain([1960,2012]).range([10,420])
scaleY = d3.scaleLinear().domain([-20,20]).range([200,0])
graph1Elem = d3.select(svgContainer).select("#layer1") // this goes in <g id="layer1"></g>
myline1 = lineGraph(graph1Elem,sortedData,"Year","USA",scaleX,scaleY)
graph1Elem.append("g").attr("transform","translate(10 200)").call(xAxis).style("color","#ccc");
graph1Elem.append("g").call(yAxis).style("color","#ccc");
graph2Elem = d3.select(svgContainer).select("#layer2") // this goes in <g id="layer2"></g>
fieldsToGraph = ["USA","CHN","BRA"]; // a list array to draw multiple lines
colors = d3.schemeTableau10; // or use one of the built-in color sets. This one mimicks Tableau.
options = {colorSet: colors}
myLine2 = multiLineGraph(graph2Elem,sortedData,"Year",fieldsToGraph,scaleX,scaleY,options);
graph2Elem.append("g").attr("transform","translate(10 200)").call(xAxis).style("color","#ccc");
graph2Elem.append("g").call(yAxis).style("color","#ccc");
xAxis = d3.axisBottom().scale(scaleX).tickFormat(d3.format("d"))
yAxis = d3.axisLeft().scale(scaleY)
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.
