This repository provides a simple script to generate TopoJSON files from a mirror of the Barcelona City Council's vector data.
In a browser (using d3-geo and SVG):
<!DOCTYPE html>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/topojson.v3.min.js"></script>
<script>
const svg = d3.select("svg");
const path = d3.geoPath();
d3.json("https://unpkg.com/[email protected]/barcelona/census_tracts.json")
.then(barcelona => {
svg
.append('path')
.attr('d', path(topojson.mesh(barcelona)))
.attr('fill', 'none')
.attr('stroke', 'black');
})
.catch(err => console.warn(err));
</script>
In Node (using d3-geo and node-canvas):
var fs = require("fs"),
d3 = require("d3-geo"),
topojson = require("topojson-client"),
Canvas = require("canvas"),
barcelona = require("./node_modules/barcelona-atlas/barcelona/census_tracts.json");
var canvas = new Canvas(960, 500),
context = canvas.getContext("2d"),
path = d3.geoPath().context(context);
context.beginPath();
path(topojson.mesh(barcelona));
context.stroke();
canvas.pngStream().pipe(fs.createWriteStream("preview.png"));
Clone or download the repo, start a terminal and run npm install
in the folder. This command will run the script and move the generated files to the barcelona
folder.
If you need to make further adjustments (simplification, quantization) you can change the prepublish
script and run npm install
again.
# barcelona/census_tracts.json (Download TopoJSON)
A preprojected TopoJSON (EPSG:3043) which contains six objects: census tracts, basic statistic areas, neighborhoods, big neighborhoods, districts and city. Every tract, neighborhood and district has its corresponding identifier, so it's easy to get started. See reference metadata.
# barcelona.objects.census_tracts
# barcelona.objects.aeb
# barcelona.objects.neighborhoods
# barcelona.objects.big_neighborhoods
# barcelona.objects.districts
# barcelona.objects.city
Ajuntament de Barcelona / CartoBCN (CC-BY).
Last data update: 11/03/2020.
The original idea and implementation comes from Mike Bostock’s us-atlas and world-atlas.
Check out es-atlas and madrid-atlas, which provide other Spanish administrative divisions with the same format.