Published
Edited
Jan 24, 2020
md`
# Kartogram (Choropleth, choropletová mapa)
## Obce a ORP - hustota obyvatel
`
d3 = require("d3")
topojson = require("topojson")
data = FileAttachment("orp-simple-data-topo.json").json()
step2 = {
var width = 700,
height = 200
const projection = d3.geoMercator()
const svg = d3.select(DOM.svg(width, height))
.style("width", width)
.style("height", height);
var path = d3.geoPath()
.projection(projection)
.pointRadius(2)
var subunits = topojson.feature(data, data.objects.tracts)
console.log(subunits)
svg.selectAll(".subunit")
.data(subunits.features)
.enter().append("path")
.attr("class", function(d) { return "subunit " + d.id; })
.attr("d", path)
return svg.node();
}
Step3 = {
var width = 960,
height = 640
var projection = d3.geoMercator()
.center([19, 49.1])
.rotate([0, 0])
// .parallels([47, 51])
.scale(3500)
.translate([width / 2, height / 2])
const svg = d3.select(DOM.svg(width, height))
.style("width", width)
.style("height", height);
var path = d3.geoPath()
.projection(projection)
var subunits = topojson.feature(data, data.objects.tracts)
console.log(subunits)
svg.selectAll(".subunit")
.data(subunits.features)
.enter().append("path")
.attr("class", function(d) { return "subunit " + d.id; })
.attr("d", path)
return svg.node();
}
data2 = FileAttachment("obce2-simple-data-topo.json").json()
Step5 = {
var width = 960,
height = 500
var projection = d3.geoMercator()
.center([16.5, 50])
.rotate([0, 0])
// .parallels([47, 51])
.scale(6000)
.translate([width / 2, height / 2])
const svg = d3.select(DOM.svg(width, height))
.style("width", width)
.style("height", height);
var path = d3.geoPath()
.projection(projection)
var subunits = topojson.feature(data2, data2.objects.tracts)
var color = d3.scaleThreshold()
.domain([1, 25, 50, 75, 100, 150, 250, 500, 1000, 2000, 2637])
.range(d3.schemeOrRd[9]);
var x = d3.scaleSqrt()
.domain([0, 2500])
.rangeRound([10, 950]);
var g = svg.append("g")
.attr("class", "key")
.attr("transform", "translate(0,40)");
g.selectAll("rect")
.data(color.range().map(function(d) {
d = color.invertExtent(d);
if (d[0] == null) d[0] = x.domain()[0];
if (d[1] == null) d[1] = x.domain()[1];
return d;
}))
.enter().append("rect")
.attr("height", 8)
.attr("x", function(d) { return x(d[0]); })
.attr("width", function(d) { return x(d[1]) - x(d[0]); })
.attr("fill", function(d) { return color(d[0]); });
g.append("text")
.attr("class", "caption")
.attr("x", x.range()[0])
.attr("y", -6)
.attr("fill", "#000")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text("Hustota na 1 km2");
g.call(d3.axisBottom(x)
.tickSize(13)
.tickValues(color.domain()))
.select(".domain")
.remove();
svg.selectAll(".subunit")
.data(subunits.features)
.enter().append("path")
.attr("class", function(d) { return "subunit " + d.id; })
.attr("fill", function(d) { return color(d.properties.hustota); })
.attr("d", path)
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.
