Published
Edited
May 12, 2020
renderMap = {
let currentDate = parseDate("2020-04")
let currentDate2 = parseDate("2020-03")
var svg = d3.select(DOM.svg(width, height))
.style("width", width)
.style("height", height)
var color = d3.scaleSequential(d3.interpolateOrRd)
.domain([0, 0.075])
svg.selectAll(".subunit")
.data(subunits.features)
.enter().append("path")
.attr("class", function(d) { return "subunit " + d.properties.SPR_OB_KOD; })
.attr("d", path)
.attr("fill", "#eee")
.attr("stroke-width", "2px")
.attr("stroke", "#fff")
svg.selectAll(".subunit-centers")
.data(subunits.features)
.enter().append("circle")
.attr("cx", function(d) {
let center = path.centroid(d)
return center[0]
})
.attr("cy", function(d) {
let center = path.centroid(d)
return center[1]
})
.attr("r", 1)
// svg.selectAll(".subunit-y")
// .data(subunits.features)
// .enter().append("line")
// .attr("x1", function(d) {
// let center = path.centroid(d)
// return center[0]
// })
// .attr("x2", function(d) {
// let center = path.centroid(d)
// return center[0]
// })
// .attr("y1", function(d) {
// let center = path.centroid(d)
// return center[1]
// })
// .attr("y2", function(d) {
// let center = path.centroid(d)
// return center[1] + yScaleSpark(0.1)
// })
// .attr("stroke", "#bbb")
// svg.selectAll(".subunit-x")
// .data(subunits.features)
// .enter().append("line")
// .attr("x1", function(d) {
// let center = path.centroid(d)
// return center[0] - 20
// })
// .attr("x2", function(d) {
// let center = path.centroid(d)
// return center[0] + 20
// })
// .attr("y1", function(d) {
// let center = path.centroid(d)
// return center[1] + yScaleSpark(0.1)
// })
// .attr("y2", function(d) {
// let center = path.centroid(d)
// return center[1] + yScaleSpark(0.1)
// })
// .attr("stroke", "#bbb")
// svg.selectAll(".subunit-x0")
// .data(subunits.features)
// .enter().append("line")
// .attr("x1", function(d) {
// let center = path.centroid(d)
// return center[0] - 20
// })
// .attr("x2", function(d) {
// let center = path.centroid(d)
// return center[0] + 20
// })
// .attr("y1", function(d) {
// let center = path.centroid(d)
// return center[1] + yScaleSpark(0)
// })
// .attr("y2", function(d) {
// let center = path.centroid(d)
// return center[1] + yScaleSpark(0)
// })
// .attr("stroke", "#bbb")
svg.selectAll(".sparks")
.data(subunits.features)
.enter().append("path")
.attr("fill", "none")
.attr("stroke", function(d) {
var filtered = data[d.properties.SPR_OB_KOD]['values'].filter(x => (x.date == d3.timeFormat("%Y-%m")(currentDate2)))
return color(filtered[0]['available_job_seekers'] / filtered[0]['population_15_64'])
})
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", function(d) { return rWidth(data[d.properties.SPR_OB_KOD]['values'][0]['population_15_64']) })
.attr("transform", function(d) {
return("translate(" + path.centroid(d) + ")")
})
.attr("d", function(d) {
var filtered = data[d.properties.SPR_OB_KOD]['values'].filter(x => (x.date <= d3.timeFormat("%Y-%m")(currentDate)))
return sparkline(filtered)
})
return svg.node()
}
rWidth = d3.scaleSqrt()
.domain([10000, 900000])
.range([1, 10])
sparkline = d3.line()
.x(function(d) {
return xScaleSpark(parseDate(d.date)) - 20
})
.y(function(d) {
return yScaleSpark(d.available_job_seekers / d.population_15_64)
})
height = 420
width = 800
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.
