Geoviz JavaScript library

geoviz is a JavaScript library for designing thematic maps. The library provides a set of d3 compatible functions that you can mix with the usual d3 syntax. The library is designed to be intuitive and concise. It allow to manage different geographic layers (points, lines, polygons) and marks (circles, labels, scale bar, title, north arrow, etc.) to design pretty maps. Its use is particularly well suited to Observable notebooks. Maps deigned with geoviz are:

Installation

In the browser

<script src="https://cdn.jsdelivr.net/npm/geoviz" charset="utf-8"></script>

In Observable

geoviz = require("geoviz")

Documentation

Usage

1 - Simple map

let geojson =   "./world.json"
d3.json(geojson).then(data => {
let svg = geoviz.create({projection: d3.geoEqualEarth()})
svg.outline({fill: "#267A8A"})
svg.graticule({stroke: "white", strokeWidth: 0.4})
svg.path({data: data, fill: "#F8D993", stroke: "#ada9a6", strokeWidth:0.5, tip:d => d.properties.NAMEen})
svg.header({fontSize: 30, text: "A Simple World Map", fill: "#267A8A", fontWeight: "bold", fontFamily: "Tangerine"})
document.body.appendChild(svg.render())
})

Demo: simple.html

2 - Circles

let geojson =   "./world.json"
d3.json(geojson).then(data => {
let svg = geoviz.create({projection: d3.geoEqualEarth()})
svg.path({datum: data, fill: "white", fillOpacity:0.4})
svg.circle({data: data, r: "pop", fill: "#f07d75"})
document.body.appendChild(svg.render())
})

Demo: bubble.html & dorling.html

3 - Choropleth

let geojson =   "./world.json"
d3.json(geojson).then(data => {
let svg = geoviz.create({projection: d3.geoEqualEarth()})
let choro = geoviz.tool.choro(data.features.map((d) => d.properties.gdppc), {method: "quantile", colors: "Matter"})
svg.path({data: data, fill: d =>  choro.colorize(d.properties.gdppc), stroke: "white", strokeWidth:0.5})
document.body.appendChild(svg.render())
})

Demo: choropleth.html

4 - Typology

let geojson =   "./world.json"

d3.json(geojson).then(data => {
let svg = geoviz.create({projection: d3.geoEqualEarth()})
let typo = geoviz.tool.typo(data.features.map((d) => d.properties.region), {colors: "Set3"});
svg.path({data: data, fill: (d) => typo.colorize(d.properties.region), stroke: "white", strokeWidth:0.5})
document.body.appendChild(svg.render())
})

Demo: typo.html

5 - Zoomable tiles

let geojson =   "./world.json"
d3.json(geojson).then(data => {
let svg = geoviz.create({projection:"mercator", zoomable:true})
svg.tile({url: (x, y, z) =>
        `https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/${z}/${y}/${x}.png`
    })
document.body.appendChild(svg.render())
})

Demo: tiles.html