In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
map.params(
vl.param('zoom')
.value(500)
.bind(vl.slider(500,30000,1)),
vl.param('leftRight')
.value(-117)
.bind(vl.slider(-300,300,0.25)),
vl.param('upDown')
.value(47.5)
.bind(vl.slider(0,200,0.5))
)
.project(
vl.projection('mercator').scale(140).translate(0, 360)
)
.render({ renderer: 'svg' })
map = vl.layer( // via https://observablehq.com/@vega/vega-lite-cartographic-projections
// use the sphere of the Earth as the base layer
vl.markGeoshape({fill: '#e6f3ff'})
.data(vl.sphere()),
// add a graticule for geographic reference lines
vl.markGeoshape({stroke: '#ffffff', strokeWidth: 1})
.data(vl.graticule()),
// and then the countries of the world
vl.markGeoshape({fill: '#2a1d0c', stroke: '#706545', strokeWidth: 0.5})
.data(vl.topojson(world).feature('countries'))
)
.width(900).height(500)
.config({view: {stroke: null}})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
{
// ZOOM: attempt at zoom with mouse
// MAP DRAWING
vl.markGeoshape({fill: '#f2f2f2', stroke: '#fff', strokeWidth: 2})
.data(
vl.topojson(world.countries)
.feature('states')
)
// adding parameters from the zoom to this map element
// .params(panzoom)
// the projection
// .project(
// vl.projection('mercator')
// //.scale(vl.expr('zoom'))
// // .center(vl.expr('[leftRight, upDown]'))
// // .center(-117,47.5) // first number left-right, second number up-down
// )
// .render({renderer: 'svg'})
return vl.layer(world)
.project(vl.projection('mercator').scale(2900).translate(500, 3905))
.height(1000)
.width(900)
.view({'stroke': 'transparent'}) // removes chart border
.render({renderer: 'svg'});
}
// range inputs can be used for paning and zooming, the snipped below can be added to add sliders
// .params(
// vl.param('zoom')
// .value(500)
// .bind(vl.slider(500,30000,1)),
// vl.param('leftRight')
// .value(-117)
// .bind(vl.slider(-300,300,0.25)),
// vl.param('upDown')
// .value(47.5)
// .bind(vl.slider(0,200,0.5))
// )
world = d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json")
vl.markCircle()
.data(randomData)
.params(
vl.selectInterval()
.bind('scales')
)
.encode(
vl.x().fieldQ('Active Jobs'),
vl.y().fieldQ('Sponsored')
)
.render()
viewof view = plot ({
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "An interactive world map supporting pan and zoom.",
"width": 900,
"height": 500,
"autosize": "none",
"signals": [
{ "name": "tx", "update": "width / 2" },
{ "name": "ty", "update": "height / 2" },
{
"name": "scale",
"value": 150,
"on": [{
"events": {"type": "wheel", "consume": true},
"update": "clamp(scale * pow(1.0005, -event.deltaY * pow(16, event.deltaMode)), 150, 3000)"
}]
},
{
"name": "angles",
"value": [0, 0],
"on": [{
"events": "mousedown",
"update": "[rotateX, centerY]"
}]
},
{
"name": "cloned",
"value": null,
"on": [{
"events": "mousedown",
"update": "copy('projection')"
}]
},
{
"name": "start",
"value": null,
"on": [{
"events": "mousedown",
"update": "invert(cloned, xy())"
}]
},
{
"name": "drag", "value": null,
"on": [{
"events": "[mousedown, window:mouseup] > window:mousemove",
"update": "invert(cloned, xy())"
}]
},
{
"name": "delta", "value": null,
"on": [{
"events": {"signal": "drag"},
"update": "[drag[0] - start[0], start[1] - drag[1]]"
}]
},
{
"name": "rotateX", "value": 0,
"on": [{
"events": {"signal": "delta"},
"update": "angles[0] + delta[0]"
}]
},
{
"name": "centerY", "value": 0,
"on": [{
"events": {"signal": "delta"},
"update": "clamp(angles[1] + delta[1], -60, 60)"
}]
}
],
"projections": [
{
"name": "projection",
"type": "mercator",
"scale": {"signal": "scale"},
"rotate": [{"signal": "rotateX"}, 0, 0],
"center": [0, {"signal": "centerY"}],
"translate": [{"signal": "tx"}, {"signal": "ty"}]
}
],
"data": [
{
"name": "world",
"url": "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json",
"format": {
"type": "topojson",
"feature": "countries"
}
},
{
"name": "graticule",
"transform": [
{ "type": "graticule", "step": [15, 15] }
]
}
],
"marks": [
{
"type": "shape",
"from": {"data": "graticule"},
"encode": {
"enter": {
"strokeWidth": {"value": 1},
"stroke": {"value": "#ddd"},
"fill": {"value": null}
}
},
"transform": [
{ "type": "geoshape", "projection": "projection" }
]
},
{
"type": "shape",
"from": {"data": "world"},
"encode": {
"enter": {
"strokeWidth": {"value": 0.5},
"stroke": {"value": "#bbb"},
"fill": {"value": "#e5e8d3"}
}
},
"transform": [
{ "type": "geoshape", "projection": "projection" }
]
}
]
})
import {plot} from "@vega/vega-plot" // thanks too https://observablehq.com/@vega/vega-world-map-with-coordinate-labels
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.
