DataViz, Dashboard, Observable Ambassador and Notion Certified
carte = {
const svg = d3
.select(DOM.svg(1200, 800))
.attr('id', 'carte')
.style("width", "100%")
.style("height", "auto");
const path = d3
.geoPath() // Projection et centrage automatique des données dans la carte
.projection(
d3.geoMercator().fitExtent([[20, 20], [1200 - 20, 800 - 20]], data)
);
svg
// Affichage des contours de chaque commune
.selectAll('path')
.data(data.features)
.enter()
.append('path')
.attr('d', path)
// Bleu, Rouge selon la longeur du nom de la commune
.style('fill', d =>
d.properties.commune.length % 2 === 0 ? 'blue' : 'red'
)
.style('stroke', 'white')
.append("title")
// Affiche le nom de la commune si curseur immobile
.text(d => d.properties.commune);
return svg.node();
}
data = d3.json(
"https://raw.githubusercontent.com/ToulouseDataViz/Hackaviz2019/master/par_commune.geojson"
)
carte2020 = {
const svg = d3
.select(DOM.svg(1200, 800))
.attr('id', 'carte')
.style("width", "100%")
.style("height", "auto");
const path = d3
.geoPath() // Projection et centrage automatique des données dans la carte
.projection(
d3.geoMercator().fitExtent([[20, 20], [1200 - 20, 800 - 20]], data)
);
svg
// Affichage des contours de chaque commune
.selectAll('path')
.data(data2020.features)
.enter()
.append('path')
.attr('d', path)
// Bleu, Rouge selon la longeur du nom de la commune
.style('fill', d =>
d.properties.nom_dpt.length % 2 === 0 ? 'blue' : 'red'
)
.style('stroke', 'white')
.append("title")
// Affiche le nom de la commune si curseur immobile
.text(d => d.properties.nom_dpt);
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.
