Here is a public team for a 2022 data viz class at TMU conducted by @sugi2000 @sugi2000lab
<svg width="200" height="100"></svg>
<svg xmlns="http://www.w3.org/2000/svg"></svg>
{
const svg = d3
.create("svg")
.attr("width", 50)
.attr("height", 50)
.attr("viewBox", [0, 0, 50, 50]);
svg
.append("circle")
.attr("cx", 25)
.attr("cy", 25)
.attr("r", 20)
.attr("fill", "yellow")
.attr("stroke", "orange")
.attr("stroke-width", 2);
return svg.node();
}
dataset = [5, 25, 45, 65, 85]
chart = {
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", 0)
.attr("width", 40)
.attr("height", (d) => d);
return svg.node();
}
chart2 = {
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)
.attr("width", 40)
.attr("height", (d) => d);
return svg.node();
}
{
const width = 400;
const height = 100;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
// 背景
const backrect = svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "#004"); // 背景の色を濃い青に
const rects = svg
.selectAll("rect.bar")
.data(dataset)
.join("rect")
.attr("class", "bar");
rects
.attr("x", (d, i) => i * 50)
.attr("y", (d) => height - d)
.attr("width", 40)
.attr("height", (d) => d)
.attr("fill", "#8cc"); // 棒の色を水色に
return svg.node();
}
{
const dataset = d3.shuffle(d3.range(40, 200, 2));
const barPadding = 1; // barの間隔を指定
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.bar")
.data(dataset)
.join("rect")
.attr("class", "bar");
rects
.attr("x", (d, i) => i * (width / dataset.length))
.attr("y", (d) => height - (d / d3.max(dataset)) * height)
.attr("width", width / dataset.length - barPadding)
.attr("height", (d) => (d / d3.max(dataset)) * height)
.attr("fill", "#800");
return svg.node();
}
barChart = (dataset) => {
const width = 400;
const height = 100;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
const barPadding = 1; // barの間隔を指定
const rects = svg.selectAll("rect").data(dataset).join("rect");
rects
.attr("x", (d, i) => i * (width / dataset.length))
.attr("y", (d) => height - d)
.attr("width", width / dataset.length - barPadding)
.attr("height", (d) => d)
.attr("fill", "#800")
.on("mouseenter", function (event) {
d3.select(this).attr("fill", "yellow");
})
.on("mouseleave", function (event) {
d3.select(this).attr("fill", "#800");
});
return svg.node();
}
Plot.plot({
width: 400,
height: 100,
marks: [
Plot.barY(dataset, {
x: (d, i) => i,
y: (d) => d
}),
Plot.ruleY([0])
]
})
barChart([50, 100, 75])
{
const dataset = d3.shuffle(d3.range(40, 200, 10));
const width = 400;
const height = 100;
const svg = d3.create("svg").attr("width", width).attr("height", height);
const barPadding = 1; // barの間隔を指定
const rects = svg.selectAll("rect").data(dataset).join("rect");
const yScale = d3.scaleLinear([0, d3.max(dataset)], [height, 0]);
const xScale = d3.scaleBand(dataset, [0, width]).padding(0.05);
rects
.attr("x", xScale)
.attr("y", yScale)
.attr("width", xScale.bandwidth())
.attr("height", (d) => yScale(0) - yScale(d))
.attr("fill", (d) => `hsl(220, 50%, ${60 - (d / d3.max(dataset)) * 40}%)`);
return svg.node();
}
{
const dataset = d3.shuffle(d3.range(40, 200, 10));
const width = 400;
const height = 200;
const margin = { top: 20, right: 10, bottom: 20, left: 30 };
const svg = d3.create("svg").attr("width", width).attr("height", height);
const barPadding = 1; // barの間隔を指定
const rects = svg.selectAll("rect").data(dataset).join("rect");
const yScale = d3.scaleLinear(
[0, d3.max(dataset) + 10],
[height - margin.bottom, margin.top]
);
const xScale = d3
.scaleBand(dataset, [margin.left, width - margin.right])
.padding(0.05);
rects
.attr("x", xScale)
.attr("y", yScale)
.attr("width", xScale.bandwidth())
.attr("height", (d) => yScale(0) - yScale(d))
.attr("fill", (d) => `hsl(220, 50%, ${60 - (d / d3.max(dataset)) * 40}%)`);
svg
.append("g")
.selectAll("text")
.data(dataset)
.join("text")
.attr("text-anchor", "middle")
.attr("x", (d) => xScale(d) + xScale.bandwidth() / 2)
.attr("y", (d) => yScale(d) + 13)
.attr("font-family", "sans-serif")
.attr("font-weight", "bold")
.attr("font-size", 11)
.attr("fill", "white")
.text((d) => d);
const xAxis = d3.axisBottom().scale(xScale);
const yAxis = d3.axisLeft().scale(yScale).ticks(5);
svg
.append("g")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom().scale(xScale));
svg.append("g").attr("transform", `translate(${margin.left}, 0)`).call(yAxis);
return svg.node();
}
url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRgABhzZkXwZihskMCzNWKcL5lqRwyHRF-bygd7uxZ1rq7DbgcZXpSLClyh9FPJlw_JroNhDK73QUq-/pub?gid=0&single=true&output=tsv"
tsvdata = d3.tsv(url, d3.autoType)
svg = {
const width = 200;
const height = 200;
const margin = { top: 10, right: 10, bottom: 20, left: 30 };
const svg = d3.create("svg").attr("width", width).attr("height", height);
const xScale = d3.scaleLinear(
[0, d3.max(tsvdata, (d) => d.x) + 10],
[margin.left, width - margin.right]
);
const yScale = d3.scaleLinear(
[0, d3.max(tsvdata, (d) => d.y) + 10],
[height - margin.bottom, margin.top]
);
const zScale = d3.scaleLinear([0, d3.max(tsvdata, (d) => d.z)], [1, 7]);
const points = svg.selectAll("circle").data(tsvdata).join("circle");
points
.attr("cx", (d) => xScale(d.x))
.attr("cy", (d) => yScale(d.y))
.attr("r", (d) => zScale(d.z));
const xAxis = d3.axisBottom().scale(xScale);
const yAxis = d3.axisLeft().scale(yScale);
svg
.append("g")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom().scale(xScale));
svg.append("g").attr("transform", `translate(${margin.left}, 0)`).call(yAxis);
return svg.node();
}
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.
