Here is a public team for a 2022 data viz class at TMU conducted by @sugi2000 @sugi2000lab
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)
.attr("viewBox", [0, 0, width, height]);
// 背景
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");
const barPadding = 1;
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")
.on("mouseenter", function (event) {
d3.select(this).attr("fill", "yellow");
})
.on("mouseleave", function (event) {
d3.select(this).attr("fill", "#800");
});
return svg.node();
}
{
const dataset = d3.shuffle(d3.range(40, 200, 10)); // [40, 50, .... 190]のシャッフル
const width = 400;
const height = 200;
const svg = d3.create("svg").attr("width", width).attr("height", height);
const barPadding = 1; // barの間隔を指定
const margin = { top: 10, right: 10, bottom: 20, left: 30 };
const xScale = d3
.scaleBand()
.domain(dataset)
.range([margin.left, width - margin.right])
.padding(0.05);
const yScale = d3
.scaleLinear()
.domain([0, d3.max(dataset)])
.range([height - margin.bottom, margin.top]);
const rects = svg.selectAll("rect").data(dataset).join("rect");
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
.selectAll("text")
.data(dataset)
.join("text")
.attr("x", (d, i) => i * (width / dataset.length) + 2)
.attr("y", (d) => height - (d / d3.max(dataset)) * height + 13)
.attr("font-family", "sans-serif")
.attr("font-size", 11)
.attr("text-anchor", "middle")
.attr(
"x",
(d, i) =>
i * (width / dataset.length) + (width / dataset.length - barPadding) / 2
)
.attr("font-weight", "bold")
.attr("fill", "white")
.text((d) => d);
//軸関数
const xAxis = d3.axisBottom().scale(xScale);
svg
.append("g")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(xAxis);
const yAxis = d3.axisLeft().scale(yScale);
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"
dataset2 = d3.tsv(url, d3.autoType)
Inputs.table(dataset2)
svg = {
const width = 200;
const height = 200;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height);
svg
.selectAll("circle")
.data(dataset2)
.join("circle")
.attr("cx", (d) => d.x)
.attr("cy", (d) => d.y)
.attr("fill", "pink")
.attr("r", 5);
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.
