Published
Edited
Nov 21, 2020
2 stars
Welsh-speaking schools in WalesHello, eurostat-map2020 National Park routesLinesRidgeline plot maps with annotationsWisconsin Breweries with Mapbox GL tooltipPopulation à la BertinU.S. Geographic DataAll Kwik Trip brand stores2020 presidential campaign events30DayMapChallenge - Day 11 : 3DRejected absentee ballots in Wisconsin's Spring Primary - City of Milwaukee30 Day Map Challenge 2020 - HexagonsCoding With Fire: NYPD CCRB30DayMapChallenge - Day 15 : ConnectionsThe 2016 French Nuit DeboutDistance topologique aux borduresNUTS regions (The Nomenclature of territorial units for statistics): Perspective30DayMapChallenge - Day 24 : Elevation30DayMapChallenge - Day 22 : Movement30DayMapChallenge - Day 29 : GlobeThe world according to FishInterrupted Homolosine OceansCOVID-19 mapped over timeLivecoding Election Night Visualizations
😷 Air Quality by Population 😷
Also listed in…
World Population Cartogram
chart = {
const xmin = d3.min(cells, d => d.X);
const xmax = d3.max(cells, d => d.X) + 1;
const ymin = d3.min(cells, d => d.Y);
const ymax = d3.max(cells, d => d.Y) + 1;
const height = (width / (xmax - xmin)) * (ymax - ymin);
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("background", "#ffffff");
var x = d3
.scaleLinear()
.domain([xmin, xmax])
.range([0, width]);
var y = d3
.scaleLinear()
.domain([ymin, ymax])
.range([height, 0]);
var color = d3
.scaleThreshold()
.domain([2.5, 3.3, 5, 10, 20, 30, 40, 50])
.range([
'#01665e',
'#35978f',
'#80cdc1',
'#c7eae5',
'#f6e8c3',
'#dfc27d',
'#bf812d',
'#8c510a',
'#543005'
]);
const g = svg.append("g");
const cell = g
.selectAll("rect")
.data(cells)
.enter()
.append("rect")
//.attr("x", d => x(d.X))
//.attr("y", d => y(d.Y + 1))
.attr("x", d => x(d.aqgroup * 3))
.attr("y", d => y(d.aqhisty / 2 - 1))
.style("stroke-width", 1)
.attr("vector-effect", "non-scaling-stroke")
.style("stroke", d => color(d.AQ))
.style("fill", d => color(d.AQ))
.attr("height", y(0) - y(1))
.attr("width", x(1) - x(0))
.transition()
.duration(500)
.delay(d => 3000 + d.AQ * 100)
.attr("x", d => x(d.X))
.attr("y", d => y(d.Y + 1));
/*
svg.call(
d3.zoom().on("zoom", ({ transform }) => g.attr("transform", transform))
);
*/
return svg.node();
}
d3 = require("d3@6")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.