Data Visualization Specialist | Previously
@WashingtonPost @WallStreetJournal @MITSenseableCity
Public
Edited
Jul 31, 2024
1 fork
3 stars
spiral heatmap | historical precipitation in South Korea
Also listed in…
D3.js basic tutorial
{
const svg = d3.create("svg").attr("width", width).attr("height", height);
const container = svg
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
// Tooltip
const tooltip = d3.select("body").append("div").attr("class", "tooltip");
const max = d3.max(data, (d) => d["precipitation(mm)"]);
console.log("max", max);
const arc = d3
.arc()
.innerRadius((d) => radiusAxisScale(d.newYear)) // 안쪽 반지름
.outerRadius(
(d) => radiusAxisScale(d.newYear) + radiusAxisScale.bandwidth()
) // 바깥쪽 반지름
.startAngle((d) => angleScaleArc(d.dayOfYear)) // 시작 각도 (라디안) (vertical start)s
.endAngle((d) => angleScaleArc(d.dayOfYear + 1)); // 종료 각도 (라디안)
container
.selectAll("arcs")
.data(data)
.enter()
.append("path")
.attr("d", arc)
// .attr("fill", (d) => colorScale(d["precipitation(mm)"] / max))
.attr("fill", (d) => getColors(d["precipitation(mm)"]))
.attr("stroke", "black")
.attr("stroke-width", 0);
if (axisShown) {
// axisLine
container
.selectAll("lines")
.data(axisData)
.enter()
.append("line")
.attr(
"x1",
(d) => radiusRange[0] * 1 * Math.cos(angleScaleAxis(d.dayOfYear))
)
.attr(
"y1",
(d) => radiusRange[0] * 1 * Math.sin(angleScaleAxis(d.dayOfYear + 0))
)
.attr(
"x2",
(d) => radiusRange[1] * 1.0 * Math.cos(angleScaleAxis(d.dayOfYear + 0))
)
.attr(
"y2",
(d) => radiusRange[1] * 1.0 * Math.sin(angleScaleAxis(d.dayOfYear + 0))
)
.attr("stroke", "#222")
.attr("stroke-width", 1)
// .attr("stroke-dasharray", "3, 2");
.attr("stroke-dasharray", "2, 2");
// axisText
const timeFormat = d3.timeFormat("%b");
container
.selectAll("text")
.data(axisData)
.enter()
.append("text")
.attr(
"x",
(d) =>
radiusRange[1] * 1.05 * Math.cos(angleScaleAxis(d.dayOfYear + 15))
)
.attr(
"y",
(d) =>
radiusRange[1] * 1.05 * Math.sin(angleScaleAxis(d.dayOfYear + 15))
)
.text((d) => timeFormat(d.newDate));
container
.selectAll("text2")
.data([2000, 2010, 2020])
.enter()
.append("text")
.attr("class", "years")
.attr("x", 3)
.attr("y", (d) => -radiusAxisScale(d))
.text((d) => d);
}
container
.append("text")
.attr("x", 0)
.attr("y", 5)
.text(selected)
.attr("class", "city");
return svg.node();
}
colors = d3.schemeGnBu[9]
// colors = d3.schemeYlGnBu[8]
// colors = d3.schemeBlues[6]
// colorScale = chroma.scale(["#ffffff", "#1b82c4"]).gamma(0.6)
// colorScale = chroma.scale(["#f9fcff", "#1b82c4", "#051862"]).gamma(1)
// colorScale = chroma.scale(["#fafafa", "#0080c5", "#051862"]).gamma(1)
// colorScale = d3.scaleSequential(d3.interpolateBlues)
// colorScale = d3.scaleSequential(d3.interpolateYlGn)
// colorScale = d3.scaleSequential(d3.interpolateGnBu)
// colorScale = d3.scaleSequential(d3.interpolateYlGnBu)
colorScale = d3.scaleQuantize().range(colors)
getColors = (amount) => {
if (amount <= 0.1) {
// return colors[0];
// return "#fff";
return "#fafafa";
} else if (amount > 0.1 && amount <= 10) {
// return colors[0];
return "#e5f5d1";
// return colors[1];
} else if (amount > 10 && amount <= 50) {
return colors[3];
} else if (amount > 50 && amount <= 100) {
// return colors[5];
// return "#2f9ece";
return chroma("#2f9ece").saturate(1.1).hex();
} else if (amount > 100) {
// return colors[8];
// return "#062b57";
return chroma("#062b57").darken().saturate(2).hex();
}
}
radiusAxisScale = d3.scaleBand().domain(years).range(radiusRange).padding(0.2) // 0.1
angleScaleAxis = d3
.scaleLinear()
.domain([1, 365])
.range([-Math.PI / 2, 2 * Math.PI - Math.PI / 2])
angleScaleArc = d3
.scaleLinear()
.domain([1, 365])
.range([0, Math.PI * 2])
radiusRange = [(shortLen * 0.22) / 2, (shortLen * 0.88) / 2] //min, max radius axis range
shortLen = (width > height ? height : width) < 620
? 620
: width > height
? height
: width
margin = ({ top: 40, right: 30, bottom: 40, left: 30 })
height = 880
axisData = data.filter((d) => d.newYear == 2000 && d.newDate.getDate() == 1)
years = [...new Set(data.map((d) => d.newYear))]
timeParse = d3.timeParse("%Y/%m/%d")
// chroma = require("chroma-js")
chroma = require("chroma-js@2.1.0")
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.
