chart = {
const height=600;
const svg = d3.select(DOM.svg(width, height))
var path = d3.geoPath()
.projection(projection);
// Draw each province as a path
svg.append('g')
.selectAll('path')
.data(chinaGeoJson.features)
.enter()
.append('path')
.attr('d', path)
.style('fill', 'white')
.style('stroke', '#999')
svg
.selectAll("circle")
.data(cityData)
.enter()
.append("circle")
.attr("cx", d => projection([d.long, d.lat])[0])
.attr("cy", d => projection([d.long, d.lat])[1])
.attr("r", d => Math.sqrt(d.count)*5 )
.style("fill", "69b3a2")
.attr("stroke", "#69b3a2")
.attr("stroke-width", 1)
.attr("fill-opacity", .4)
// svg.selectAll("myPath")
// .data(links)
// .enter()
// .append("path")
// .attr("d", function(d){ return path(d)})
// .style("fill", "none")
// .style("stroke", "#69b3a2")
// .style("stroke-width", 1)
//.style("stroke-opacity", .5)
/* svg.append('g')
.selectAll('text')
.data(cityData)
.enter()
.append("text")
.attr("transform", d=>`translate(${projection([d.long, d.lat])[0]},${projection([d.long, d.lat])[1]})`)
.attr("fill", "#777")
.attr("font-size", "10px")
.attr("font-family","sans-serif")
.attr("font-weight", "300")
.attr("text-anchor", "middle")
.text(d=>`${d.city}`)
*/
// svg.selectAll("circle")
// .data(galicia.features)
// .enter().append("circle")
// .attr("fill", "red")
// .attr("fill-opacity", 0.5)
// .attr("stroke", "#fff")
// .attr("stroke-width", 0.5)
// .attr("transform", d => `translate(${path.centroid(d)})`)
// .attr("r", d => radiusFn(d.properties.population));
return svg.node()
}
projection = d3.geoAzimuthalEqualArea()
.rotate([-110, -40])
.scale(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.
