Published unlisted
Edited
Oct 17, 2018
{
const svg = d3.select(DOM.svg(width, height))
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var labels = svg.append('g').attr('class', 'labels');
labels.selectAll('.label')
.data(geojson.features)
.enter()
.append('text')
.attr("class", "label")
.attr('transform', function(d) {
return "translate(" + path.centroid(d) + ")";
})
.attr("id", (d => d.properties.nom))
.style('text-anchor', 'middle')
.style('font-size', 10)
.style('fill', 'steelblue')
.style('font-family', 'sans-serif')
.text(d => d.properties.nom);
svg.selectAll("path")
.data(geojson.features)
.enter().append("path")
.attr("d", path)
.attr('fill', 'white')
.attr('stroke', '#333')
.on("mouseover", handleMouseOver)
.on("mouseout", handleMouseOut);
function handleMouseOver(d, i){
//changes color on mouseOver
d3.select(this)
.style('fill', 'black');
d3.select('#'+d.properties.nom)
.style('font-weight', 'bold')
.style('font-size', 10);
}
function handleMouseOut(d,i){
//changes color back
d3.select(this)
.style('fill', 'white');
d3.select('#'+d.properties.nom)
.style('font-weight', 'normal')
.style('font-size', 8)
}
svg.selectAll('g').raise();
return svg.node();
}
path = d3.geoPath()
.projection(projection)
projection = d3.geoConicConformal()
.center([2.454071, 46.279229]) // Center on France
.scale(3500)
.fitSize([width, height], geojson)
//.center()
//.angle([0,0,0])
//.rotate([180, 0])
//.translate([0,0])
geojson = d3.json("https://gist.githubusercontent.com/lenaMK/01df788c424999002b5ad734e59d95b8/raw/18ae2ea4e8f7fb3733bc5df069dfaf0b6596d2b5/communes-version-simplifiee.geojson")
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.
