London based data visualiser.
projection = d3.geoGingery()
.lobes(20)
.rotate([0, -53])
.clipAngle(50- 1e-3);
locationDots = locations.features
.map(location=>{
const point = projection(location.geometry.coordinates)
return `<circle cx="${point[0]}" cy="${point[1]}" r="5" stroke-width="2" fill="#FFFFFF" stroke="#FF0000"></circle>`
}).join()
map = html`<svg viewBox="0 0 ${width} ${height}" style="display: block;">
<defs>
<path id="outline" d="${path(outline)}" />
<clipPath id="clip"><use xlink:href="${new URL("#outline", location)}" /></clipPath>
</defs>
<g clip-path="url(${new URL("#clip", location)})">
<use xlink:href="${new URL("#outline", location)}" fill="#fff" />
<!-- <path d="${path(graticule)}" stroke="#ccc" fill="none"></path> -->
<path d="${path(land)}" fill="none" stroke="#000"></path>
</g>
<use xlink:href="${new URL("#outline", location)}" fill="none" stroke="#000" />
${locationDots}
</svg>`
path = d3.geoPath(projection)
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()
land = topojson.feature(world, world.objects.land)
world = FileAttachment("land-50m.json").json()
topojson = require("topojson-client@3")
locations = ({
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-73.94210815429688,
40.69261352808567
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-2.89215087890625,
53.1953384842489
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-3.90289306640625,
52.75291861005521
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-0.12084960937499999,
51.50703296721856
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-1.61224365234375,
50.87011148875652
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-2.0345306396484375,
50.58519852927842
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
2.758769989013672,
43.20167221264034
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
5.05096435546875,
44.06390660801779
]
}
}
]
})
d3 = require("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.
