Here is a public team for a 2022 data viz class at TMU conducted by @sugi2000 @sugi2000lab
<svg width="500" height="500">
<rect x="0" y="0" width="500" height="500"></rect>
<circle cx="250" cy="250" r="200" stroke="green" stroke-width="5"></circle>
<circle cx="250" cy="250" r="150" stroke="yellow" stroke-width="5"></circle>
<circle cx="250" cy="250" r="100" stroke="orange" stroke-width="5"></circle>
<circle cx="250" cy="250" r="50" stroke="pink" stroke-width="5"></circle>
</svg>
dataset = d3.range(10).map((d) => ({
apple: d3.randomInt(100)(),
orange: d3.randomInt(100)()
}))
q2 = {
const width = 400;
const height = 100;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
const rects = svg.selectAll("rect").data(dataset).join("rect");
rects
.attr("x", (d, i) => i * 50)
.attr("y", (d) => height - d.apple)
.attr("width", 40)
.attr("height", (d) => d.apple);
return svg.node();
}
q3 = {
const width = 400;
const height = 100;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
const rects = svg.selectAll("rect").data(dataset).join("rect");
rects.attr("x", (d, i) => i * 50).attr("width", 40);
if (fruit == "apple") {
rects
.attr("height", (d) => d.apple)
.attr("y", (d) => height - d.apple)
.attr("fill", "red");
} else if (fruit == "orange") {
rects
.attr("height", (d) => d.orange)
.attr("y", (d) => height - d.orange)
.attr("fill", "orange");
}
return svg.node();
}
// import { radio } from "@jashkenas/inputs"
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.
