Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
<div id="container">
<h3>RMG Exports from Bangledash, as a percentage of total exports</h3>
<svg id="exports" width="3000" height="300">
<style>
.totalExp {fill: #555;}
.RMG {fill: #FF0;}
.year {font-size: 15px; fill: #999;}
.percentage {font-size: 18px; font-weight: bold;}
#container {width: 100%; overflow-x:scroll;}
</style>
</svg>
</div>
data = FileAttachment("exports.csv").csv()
viewof table = Inputs.table(data, {})
viz = d3.select(rmgexports).select("#exports")
baseline = 200
start = 25
spacing = 100
rFromArea = (area) => Math.sqrt(area/Math.PI)
g = viz.selectAll("g")
.data(data)
group = g.join("g")
group.append("circle")
.attr("r", d => rFromArea(d["EXPORT OF RMG"]))
.attr("cx", (d,i) => start + i * spacing)
.attr("cy", d => baseline - rFromArea(d["EXPORT OF RMG"]))
.classed("RMG", true);
group.append("circle")
.attr("r", d => rFromArea(d["TOTAL EXPORT"]))
.attr("cx", (d,i) => start + i * spacing)
.attr("cy", d => baseline - rFromArea(d["TOTAL EXPORT"]))
.classed("totalExp", true);
group.append("text")
.text(d => d["YEAR"])
.attr("x", (d,i) => start + i * spacing)
.attr("y", () => baseline - 120)
.attr("text-anchor", "middle")
.classed("year", true);
group.append("text")
.text(d => Math.round(+d["% OF RMG'S TO"]) + "%")
.attr("x", (d,i) => start + i * spacing)
.attr("y", () => baseline + 38)
.attr("text-anchor", "middle")
.classed("percentage", true)
.style("font-size", d => Math.round(+d["% OF RMG'S TO"])/2);
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.
