A ♥ for data visualization + interaction
d3 = require("d3@5");
exampleDocument = html`
<!DOCTYPE html>
<html>
<body>
<svg id="chart" width=500 height=100>
<circle id="myCircle" cx=60 cy=50 r=50 fill="steelblue"/>
</svg>
</body>
</html>
`
circle = d3.select("#myCircle");
// circle.attr("r", 200);
// circle.attr("fill", "blue");
// circle.attr("cx", 300);
partTwoDocument = html`
<svg width=500 height=120>
<rect class="filled" width=50 height=50 x=0 y=0 fill="steelblue" />
<rect class="filled" width=50 height=50 x=55 y=0 fill="steelblue" />
<rect class="stroked" width=50 height=50 x=0 y=55 stroke="steelblue" fill="none" />
<rect class="stroked" width=50 height=50 x=55 y=55 stroke="steelblue" fill="none" />
</svg>
`
// d3.selectAll("rect").attr("fill", "green");
/*
d3.selectAll("rect")
.attr("fill", "steelblue")
*/
/*
d3.selectAll("rect")
.attr("fill", "steelblue")
.attr("width", 15)
.attr("transform", `translate(100, 0)rotate(45)`);
*/
// d3.select("rect").attr("fill");
// d3.select("rect").attr("fill", "red");
svg`
<svg id="exercise" width="100%" height=500 style="background:white;border:1px solid black;">
<rect class="filled" width=10 height=20 x=10 y=10 fill="black" stroke="black" />
<rect class="filled" width=10 height=20 x=25 y=10 fill="black" stroke="black" />
<rect class="transparent" width=10 height=20 x=40 y=10 fill="black" stroke="black" />
<rect class="transparent" width=10 height=20 x=55 y=10 fill="black" stroke="black" />
<rect class="transparent" width=10 height=20 x=70 y=10 fill="black" stroke="black" />
</svg>
`
solution = {
const canvas = d3.select("#exercise");
// your solution goes here ...
canvas.selectAll("rect.filled")
.attr("fill", "steelblue")
.attr("width", 50)
.attr("height", 50)
.attr("x", 200)
.attr("y", (d, i) => i * 55);
canvas.selectAll("rect.transparent")
.attr("fill", "transparent")
.attr("width", 75)
.attr("height", 200)
.attr("x", 500)
.attr("y", (d, i) => i * 205);
}
svg`
<svg id="thirdCanvas" width=1000 height=100>
<rect id="animateMe" width=50 height=50 x=10 y=10 fill="steelblue" />
</svg>
`
/*
d3.select("#animateMe").transition()
.duration(2000) // 2000 milliseconds => 2 seconds
.attr("x", 700)
.attr("y", 50)
.attr("width", 100)
.attr("fill", "firebrick");
*/
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.
