Designer, Artist, Researcher, Educator @sugi2000lab .
co-translator for Japanese edition of “Generative Design” and “Code as Creative Medium”.
Published
Edited
May 30, 2021
chart = {
const height = width;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("font-family", "sans-serif")
.attr("font-size", 24)
.attr("font-weight", "bold");
const margin = {
top: height / 10,
right: width * 0.3,
bottom: height / 10,
left: width * 0.3
};
const years = [2019, 2020];
const terms = ["前年同期", "直近決算期"];
const vlineX = d3
.scaleLinear()
.domain(years)
.range([margin.left, width - margin.right]);
const y = d3
.scaleLinear()
// .domain([
// Math.min(
// d3.min(data, (d) => d["2019"]),
// d3.min(data, (d) => d["2020"])
// ),
// Math.max(
// d3.max(data, (d) => d["2019"]),
// d3.max(data, (d) => d["2020"])
// )
// ])
.domain([1200, 200])
.range([margin.top, height - margin.bottom]);
svg
.selectAll(".vline")
.data(years)
.join("line")
.classed("vline", true)
.attr("x1", vlineX)
.attr("y1", margin.top)
.attr("x2", vlineX)
.attr("y2", height - margin.bottom)
.attr("stroke", "#000")
.attr("opacity", 0.2);
svg
.selectAll(".slope")
.data(data)
.join("line")
.classed("slope", true)
.attr("x1", vlineX(2019))
.attr("y1", (d) => y(d["2019"]))
.attr("x2", vlineX(2020))
.attr("y2", (d) => y(d["2020"]))
.attr("stroke", "#000")
.attr("stroke-width", 2.5);
svg
.selectAll(".term")
.data(terms)
.join("text")
.classed("term", true)
.attr("x", (d, i) => vlineX(years[i]))
.attr("y", margin.top)
.attr("dy", `-.5em`)
.attr("text-anchor", `middle`)
.text((d) => d);
svg
.selectAll(".prev")
.data(data)
.join("text")
.classed("prev", true)
.attr("font-size", 20)
.attr("x", vlineX(2019))
.attr("y", (d) => y(d["2019"]))
.attr("dx", `-.5em`)
.attr("dy", `.5em`)
.attr("text-anchor", `end`)
.text((d) => `${d.name} ${d3.format(",d")(d["2019"])}`);
svg
.selectAll(".latest")
.data(data)
.join("text")
.classed("latest", true)
.attr("font-size", 20)
.attr("x", vlineX(2020))
.attr("y", (d) => y(d["2020"]))
.attr("dx", `.5em`)
.attr("dy", `.5em`)
.text(
(d) =>
`${d3.format(",d")(d["2020"])} ${d.name}（${d3.format("+d")(
d["2020"] - d["2019"]
)}）`
);
return svg.node();
}
data = d3.csvParse(csvString, d3.autoType)
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.
