counties = {
let data = await d3.json('https://gist.githubusercontent.com/matijapiskorec/974367d26e8f4572bf84b0c0878a1c07/raw/e7a9281fd6fc41fa6397d81626d22d1923400c11/croatia_counties_coastline_topojson.json')
// Concatenate two layers in retrieved topojson (one with Polygons, another with LineStrings)
return {type: "FeatureCollection",
features: topojson.feature(data, data.objects.layer1).features
.concat(topojson.feature(data, data.objects.layer2).features)}
}
county = counties.features.filter(county => county.properties.name == "Karlovačka županija")[0]
projection = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], county)
pathGenerator = d3.geoPath().projection(projection)
countyMap = {
// create SVG element
let svg = d3.select(DOM.svg(width, height))
// construct the element
svg.append('path')
.datum(county)
.attr('d', pathGenerator)
.attr('fill', 'none')
.attr('stroke', '#999999')
.attr('stroke-width', '2')
// pass to Observable to draw this block
return svg.node()
}
d3.geoBounds(counties)
countiesProjection = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], counties)
countiesPathGenerator = d3.geoPath().projection(countiesProjection)
countiesMap = {
let svg = d3.select(DOM.svg(width, height))
// construct the path elements using the D3 data join
svg.selectAll('path')
// data() expects an Array, so make sure to pass the features entry of our FeatureCollection
.data(counties.features)
// select all data items that are not represented on the map yet, and add them
.enter()
.append('path')
// assign attributes to those new elements
.attr('d', countiesPathGenerator)
.attr('fill', 'none')
.attr('stroke', '#999999')
.attr('stroke-width', '0.5')
// pass to Observable to draw this block
return svg.node()
}
countiesPopulation = {
let data = await d3.json('https://gist.githubusercontent.com/matijapiskorec/41159ea7438aa8fbe98db7ca15ffd5d4/raw/cdd8f7302303068bcd825b707299e89dabbe791c/croatia_counties_population.json');
return data;
}
countiesPopulationDict = {
// Extract county names and associated id's
let temp = Object.entries(countiesPopulation.dataset.dimension['Prostorna jedinica'].category.label).map( (x) => x );
// Create a dictionary with county names as keys and county population as values
return temp.reduce(function (dictionary,x) {
dictionary[x[1]] = countiesPopulation.dataset.value[x[0]];
return dictionary;
}, {});
}
colorScalePopulation = d3.scaleLinear()
.domain([0, 1000000])
.range(["white", "red"])
countiesMapColored = {
let svg = d3.select(DOM.svg(width, height))
svg.selectAll('path')
.data(counties.features)
.enter()
.append('path')
.attr('d', countiesPathGenerator)
// use a callback function to calculate color of county based on population
.attr('fill', (d) => colorScalePopulation(countiesPopulationDict[d.properties.name]||0))
.attr('stroke', '#999999')
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.
