Computer Graphics & Visualization @ufrj.br
Published
Edited
Feb 8, 2021
1 fork
4 stars
path = d3.geoPath(projection)
countriesSvg = {
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("overflow", "hide");
const mainGroup = svg.append("g").attr("class", "mainGroup");
mainGroup
.append("path")
.attr("class", "graticule")
.attr("d", path(graticule))
.attr("stroke", "#ccc")
.attr("fill", "none");
mainGroup
.selectAll(".region")
.data(countries.features)
.enter()
.append("path")
.attr("class", "region")
.attr("d", path)
.attr("fill", "#eee")
.attr("stroke", "#aaa")
.on("mousedown", function(d) {
setSearch(d.id);
})
.append("title")
.text(d => d.properties.name);
return svg;
}
selectedIds = new Set(countryTable.map(country => country["country-code"]))
selectedBbox = countries.features
.filter(d => selectedIds.has(d.id))
.map(d => d.bbox)
.reduce(bboxUnion)
selectCountries = {
let [x0, y0] = projection(selectedBbox.slice(0, 2));
let [x1, y1] = projection(selectedBbox.slice(2, 4));
let dx = x1 - x0,
dy = y0 - y1,
x = (x0 + x1) / 2,
y = (y0 + y1) / 2,
scale = Math.min(width / dx, height / dy, 10),
[tx, ty] = [width / 2 - scale * x, height / 2 - scale * y];
countriesSvg
.selectAll(".region")
.attr("fill", d => (selectedIds.has(d.id) ? "#555" : "#eee"));
countriesSvg
.select(".mainGroup")
.transition()
.duration(750)
.attr("transform", `translate(${tx},${ty}) scale(${scale})`)
.attr("stroke-width", `${1 / scale}`);
}
projections
countryData = (await d3.csv(
"https://raw.githubusercontent.com/lukes/ISO-3166-Countries-with-Regional-Codes/master/all/all.csv"
)).map(obj => {
let newobj = {};
for (let prop of [
"name",
"country-code",
"region",
"sub-region",
"intermediate-region"
])
newobj[prop] = obj[prop];
return newobj;
})
import {
Button,
Checkbox,
Toggle,
Radio,
Range,
Select,
Text,
Search,
Table
} from "@observablehq/inputs"
topojson = require("topojson-client@3")
world = d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json")
import { projections } from "@d3/projection-comparison"
d3 = require("d3@5")
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.
