Published
Edited
Dec 3, 2021
1 fork
task_4_solution = {
// Inside of these brackets you may write your solution code for task 4.
// Determine the width and the height of the map display
const width = 800;
const height = 600;
// Create the projection function. This can be one of many: https://github.com/d3/d3-geo-projection
const projection = d3.geoMercator()
.translate([width/2, height/2]) // Move map to center of the display
.scale(100); // Adjust the scale: https://stackoverflow.com/questions/21565511/what-does-it-mean-to-scale-a-projection-in-d3
// Create svg element to draw on
const svg = d3.select(DOM.svg(width, height));
// Append the path elements for the different countries
svg.selectAll("path")
.data(mapData.features)
.enter().append("path")
.attr("fill", 'rgb(230, 230, 230)')
.attr("stroke", 'rgb(200, 200, 200)')
.attr("d", d3.geoPath(projection));
//originally longitude/lattitude are 360/180, but the map here is 4/3, thus we need to scale the points
const fLongitudePixelLen = (76/100)*(width/2)/180;
const fLatitudePixelLen = (59/100)*(height/2)/90;
const fCenterX=width/2;
const fCenterY=height/2;
svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('cx', d => fCenterX+ (d.longitude*fLongitudePixelLen))
.attr('cy', d => fCenterY - (d.latitude*fLatitudePixelLen))
.attr('r', d=> d.percentage_green_area * (width/5000))
.attr('fill', '#a7d4b6');
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.
