I'm a dataviz passionate that have been working in the field since 2009. I co-founded OneTandem (www.onetandem.com), where I help turning complex data into engaging visual narratives. PhD in Computer Science and Digital Communication
Published
Edited
May 7, 2020
2 forks
3 stars
{
const svg = d3.create("svg")
.attr("viewBox", `0 0 ${width} ${height}`)
svg.append("path")
.datum(graticule)
.attr("d", path)
.attr("stroke", "#ccc")
.attr("fill", "none")
const countriesPath = svg.append("g")
.attr("id", "countries")
.selectAll("path")
.data(countries.features)
.enter()
.append("path")
.attr("d", path)
.attr("stroke", "#ccc")
.attr("fill", "steelblue")
.on("mouseover", function(d) { d3.select(this).attr("fill", "red")})
.on("mouseout", function() { d3.select(this).attr("fill", "steelblue")})
svg.append("path")
.datum(outline)
.attr("d", path)
.attr("fill", "none")
.attr("stroke", "#222")
return svg.node();
}
d3.select("#countries").selectAll("path").on("mouseover", function(d) {console.log(d)})
path = d3.geoPath(projection.rotate([80, 0]))
height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);
const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
return dy;
}
outline = ({type: "Sphere"})
graticule = d3.geoGraticule10()
countries = fetch(
"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m_countries.geojson"
).then(d => d.json())
d3 = require("d3@5", "d3-geo@1", "d3-geo-projection@2")
import {projectionInput} from "@d3/projection-comparison"
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.
