Maps — and other representations of the world.
{
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("background", "lightblue");
const projection = d3
.geoAzimuthalEquidistant()
.rotate([0, 90, -30])
.scale(width * 0.6)
.translate([width * 0.5, height * 0.54]);
const path = d3.geoPath(projection);
svg
.append("path")
.datum(d3.geoGraticule10())
.attr("d", path)
.attr("fill", "none")
.attr("stroke-width", 0.25)
.attr("stroke", "white");
const tpath = DOM.uid("tpath");
svg
.append("path")
// hacky line simplification, in order to make the legend readable
.datum(pf.filter((d, i) => i % 10 === 0).map(projection))
.attr("id", tpath.id)
.attr("d", d3.line().curve(d3.curveBasisClosed))
.attr("fill", "none")
.attr("stroke-width", 2)
.attr("stroke-dasharray", [7, 3])
.attr("stroke", "white");
svg
.append("text")
.attr("fill", "#fff")
.style("font-family", "sans-serif")
.style("font-size", `${(10 * width) / 928}px`)
.style("font-weight", "bold")
.style("letter-spacing", (3 * width) / 928)
.attr("text-anchor", "middle")
.attr("dy", -8)
.append("textPath")
.attr("xlink:href", tpath.href)
.text("ANTARCTIC CONVERGENCE")
.attr("startOffset", "50.5%");
svg
.append("path")
.datum(topojson.feature(world, world.objects.land))
.attr("d", path)
.attr("fill", "white");
const nodes = Array.from(data, (d, i) => ({
...d,
x: projection(bases.get(d.sitio))[0] + i / 100,
y: projection(bases.get(d.sitio))[1] - (i * i) / 1000
}));
d3.forceSimulation(nodes)
.force(
"x",
d3.forceX((d) => d.x)
)
.force(
"y",
d3.forceY((d) => d.y)
)
.force("collide", d3.forceCollide().radius(4))
.tick(10)
.stop();
svg
.append("g")
.selectAll()
.data(nodes)
.join("circle")
.attr("r", 4)
.attr("transform", (d) => `translate(${d.x},${d.y})`)
.attr("fill", (d) => color(d.nacionalidad))
.attr("d", path)
.append("title")
.text(
(d) => `${d["nombre y appellido"]}
${d["fecha"].toLocaleString("en-GB", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
timeZone: "UTC"
})}
${d.sitio}`
);
return svg.node();
}
color = d3.scaleOrdinal(d3.schemeDark2)
import { data } from "@fil/nacimientos-en-la-antartida"
bases = new Map(coords.map(({ sitio, lon, lat }) => [sitio, [lon, lat]]))
world = d3.json("https://unpkg.com/visionscarto-world-atlas/world/50m.json")
height = width * 0.8
viewof coords = Inputs.table(
d3.csvParse(
`sitio,desc,lon,lat
Kerguelen,Kerguelen Islands,69.354463, -49.394828
Grytviken,South Georgia,-36.5117455, -54.281573
Esperanza,Trinity Peninsula,-56.997778,-63.3975
Eduardo Frei Montalva,Fildes Peninsula,-58.9054098,-62.1842356`,
d3.autoType
)
)
// source: Orsi, AH., Harris, U. (2019) Fronts of the Antarctic Circumpolar Current - GIS data, Ver. 1, Australian Antarctic Data Centre - https://data.aad.gov.au/metadata/records/antarctic_circumpolar_current_fronts, Accessed: 2021/11
pf = FileAttachment("polar-front.json")
.json()
.then((d) => d.coordinates[0])
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.
