The avatar for @sugi2000
SUGIMOTO Tatsuo
Designer, Artist, Researcher, Educator @sugi2000lab . co-translator for Japanese edition of “Generative Design” and “Code as Creative Medium”.
Published
Edited
Feb 24, 2020
Fork of Japan Atlas TopoJSON
2 stars
ばぶでもわかるおぶざばぶる
Flu Map in Japan
Also listed in…
Map of Japan
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
japan.objects.prefectures.geometries
Insert cell
topojson.feature(japan, japan.objects.prefectures).features
Insert cell
Insert cell
color = id => {
const d = data.find(d => d.id === id);

if (d.warningRate > 0) {
return warningColor(d.warningRate);
} else if (d.watchRate > 0) {
return watchColor(d.watchRate);
} else {
return "#eee";
}
}
Insert cell
warningColor = d3
.scaleLinear()
.domain([0, 1])
.range(["hsl(0, 100%, 90%)", "hsl(0, 100%, 40%)"])
Insert cell
watchColor = d3
.scaleLinear()
.domain([0, 1])
.range(["hsl(30, 100%, 90%)", "hsl(30, 100%, 50%)"])
Insert cell
Insert cell
data = d3.csvParse(rawData, d3.autoType).map((d, i) => ({
warningRate: d['警報数'] / d['保健所数'],
watchRate: d['注意報数'] / d['保健所数'],
id: d3.format("02")(i + 1),
...d
}))
Insert cell
Insert cell
japan = d3.json("https://unpkg.com/jpn-atlas@1/japan/japan.json")
Insert cell
import { legend } from "@d3/color-legend"
Insert cell
topojson = require("topojson-client@3")
Insert cell
d3 = require("d3@5")
Insert cell

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.
Learn more