The avatar for @emfielduva
Eric Field
Building and Using Tools to See. UVA Architecture + Data Science. IT Director. Instructor.
Public
d3 layout and lib examples
Edited
Apr 10, 2024
3 forks
d3 layout and lib examples
dvlib_layout Overview
Line graphs
Area graphsSparklineDonut or PiePixel MatrixTreemapPack CirclesSunburstDendogramClustersWord CloudClusters - dynamic movementPack Circles - dynamic movementTreemap - dynamic movementNetwork Graph - nodes and edgesCombining Layouts - Donuts on GridMapRadarRings - circle with hole maskBeeswarm - Force DiagramHeatmapPack Circles with Donuts insideUS map with Powerplant Pack CirclesRing plot on Map - Trust Gap?Force Directed clustering along a pathFixed location Network GraphRadial bar / lineFitness ringsCurves / distance color gradientSVG distance along path / curveFilled Arc Polygon BandsConnecting multiple visuals in one spaceSankey / Alluvial / Parallel Sets
Insert cell
Insert cell
<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>
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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.
Insert cell
Insert cell
scaleX = d3.scaleLinear().domain([1960,2012]).range([10,420])
Insert cell
scaleY = d3.scaleLinear().domain([-20,20]).range([200,0])
Insert cell
Insert cell
Insert cell
graph1Elem = d3.select(svgContainer).select("#layer1") // this goes in <g id="layer1"></g>
Insert cell
myline1 = lineGraph(graph1Elem,sortedData,"Year","USA",scaleX,scaleY)
Insert cell
Insert cell
graph1Elem.append("g").attr("transform","translate(10 200)").call(xAxis).style("color","#ccc");
Insert cell
graph1Elem.append("g").call(yAxis).style("color","#ccc");
Insert cell
Insert cell
Insert cell
graph2Elem = d3.select(svgContainer).select("#layer2") // this goes in <g id="layer2"></g>
Insert cell
fieldsToGraph = ["USA","CHN","BRA"]; // a list array to draw multiple lines
Insert cell
colors = d3.schemeTableau10; // or use one of the built-in color sets. This one mimicks Tableau.
Insert cell
options = {colorSet: colors}
Insert cell
myLine2 = multiLineGraph(graph2Elem,sortedData,"Year",fieldsToGraph,scaleX,scaleY,options);
Insert cell
Insert cell
graph2Elem.append("g").attr("transform","translate(10 200)").call(xAxis).style("color","#ccc");
Insert cell
graph2Elem.append("g").call(yAxis).style("color","#ccc");
Insert cell
Insert cell
Insert cell
xAxis = d3.axisBottom().scale(scaleX).tickFormat(d3.format("d"))
Insert cell
yAxis = d3.axisLeft().scale(scaleY)
Insert cell

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.
Learn more