Published
Edited
Sep 29, 2020
1 star
md`# Data Storytelling - Fall 2020 - Notebook 1`
{
const svg = d3.create("svg")
.attr("height", 250)
.attr("width", 250)
.style("border", "solid black 1px");
svg.append("circle")
.attr("cx", 50)
.attr("cy", 50)
.attr("r", 20)
.attr("fill", "steelblue");
svg.append("line")
.attr("x1", 50)
.attr("y1", 50)
.attr("x2", 200)
.attr("y2", 250)
.attr("stroke", "black");
return svg.node();
}
{
const svg = d3.create("svg")
.attr("height", 400)
.attr("width", 400)
.style("border", "solid black 1px");
for (var i = 0; i < inputData.length; i++) {
var d = inputData[i];
svg.append("rect")
.attr("x", 10)
.attr("y", 10 + 30 * i)
.attr("width", d)
.attr("height", 20)
.attr("fill", "steelblue");
}
return svg.node();
}
{
const svg = d3.create("svg")
.attr("height", 400)
.attr("width", 400)
.style("border", "solid black 1px");
svg.selectAll("rect")
.data(inputData)
.enter()
.append("rect")
.attr("x", 10)
.attr("height", 20)
.attr("y", (d, i) => i * 30 + 10)
.attr("width", (d, i) => d)
.attr("fill", "steelblue");
return svg.node();
}
{
const svg = d3.create("svg")
.attr("height", 400)
.attr("width", 400)
.style("border", "solid black 1px");
yield svg.node();
svg.selectAll("rect")
.data(inputDataComplex)
.enter()
.append("rect")
.attr("x", 10)
.attr("height", 20)
.attr("y", (d, i) => i * 30 + 10)
.attr("width", (d, i) => d["before"])
.attr("fill", "steelblue");
await Promises.delay(5000);
svg.selectAll("rect")
.data(inputDataComplex)
.transition()
.duration(2500)
.attr("width", (d, i) => d["after"]);
yield svg.node();
}
{
const svg = d3.create("svg")
.attr("height", 400)
.attr("width", 640)
.style("border", "solid black 1px");
var xScale = d3.scaleLinear().domain([0, 200]).range([10, 620]);
yield svg.node();
svg.selectAll("rect")
.data(inputDataComplex)
.enter()
.append("rect")
.attr("x", xScale(0))
.attr("height", 20)
.attr("y", (d, i) => i * 30 + 10)
.attr("width", (d, i) => xScale(d["before"]))
.attr("fill", "steelblue");
await Promises.delay(5000);
svg.selectAll("rect")
.data(inputDataComplex)
.transition()
.duration(2500)
.attr("width", (d, i) => xScale(d["after"]));
yield svg.node();
}
inputData = [40, 80, 100, 200, 10, 30];
inputDataComplex = [
{"before": 40, "after": 80},
{"before": 80, "after": 90},
{"before": 100, "after": 120},
{"before": 200, "after": 120},
{"before": 10, "after": 50},
{"before": 30, "after": 150}
]
d3 = require("d3@6");
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.
