Geographic visualization / antonbardera

Assistant professor in the Universitat de Girona. In Fundació Visualització per a la Transparència (ViT). In Master’s Degree in Visual Tools to Empower Citizens.

Workspace

Published

2020-21 MVTEC Dataviz programming course

Edited

Dec 3, 2020

3 forks

2 stars

2020-21 MVTEC Dataviz programming course

world = FileAttachment("world-110m.geo.json").json()

worldTopojson = FileAttachment("land-50m.json").json()

projection = d3.geoNaturalEarth1()

//projection = d3.geoMercator()

//projection = d3.geoAzimuthalEqualArea()

//projection = d3.geoConicEqualArea()

//projection = d3.geoOrthographic()

.center([parameters.centerX,parameters.centerY])

.rotate([parameters.angleX, parameters.angleY])

.scale(parameters.scale);//(width / (2 * Math.PI));

path = d3.geoPath(projection)

graticule = d3.geoGraticule10();

outline = ({type: "Sphere"})

worldmap = {

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height);

svg.selectAll("path")

.data(world.features)

.join("path")

.attr("fill","#555")

.attr("d", path)

.attr("class", "countries");

svg.append("path")

.attr("d", path(graticule))

.attr("stroke", "#ddd")

.attr("stroke-width",0.5)

.attr("fill", "none");

svg.append("path")

.attr("id", "outline")

.attr("d", path(outline))

.attr("stroke", "#000")

.attr("stroke-width",0.5)

.attr("fill", "none");

return svg.node();

}

coordinates = [

{name: "Girona", coords:[2.8313468690796206, 41.96389664365718]},

{name: "Barcelona", coords:[2.1774322, 41.3828939]},

{name: "Cornellà de Llobregat", coords:[2.066376209259033,41.35615921020508]},

{name: "Sant Cugat del Vallès", coords:[2.0817809,41.4728432]},

{name: "Cassà de la Selva", coords:[2.8742461,41.8874685]},

{name: "West Chester", coords:[-75.6059638,39.9597213]},

{name: "Turku", coords:[22.2670522,60.4517531]},

{name: "Longueuil", coords:[-73.4467466,45.5172382]},

{name: "Singapore", coords:[103.8520359,1.2904753]}

]

projection(coordinates[0].coords)

worldmapwithpoints = {

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height);

svg.selectAll("path")

.data(world.features)

.join("path")

.attr("fill","#555")

.attr("d", path)

.attr("class", "countries");

svg.append("path")

.attr("d", path(graticule))

.attr("stroke", "#ddd")

.attr("stroke-width",0.5)

.attr("fill", "none");

svg.append("path")

.attr("id", "outline")

.attr("d", path(outline))

.attr("stroke", "#000")

.attr("stroke-width",0.5)

.attr("fill", "none");

svg.selectAll("circle")

.data(coordinates)

.join("circle")

.attr("stroke","red")

.attr("stroke-width",0.5)

.attr("fill","red")

.attr("fill-opacity",0.6)

.attr("r", 5)

.attr("cx", d => projection(d.coords)[0])

.attr("cy", d => projection(d.coords)[1])

.append("title")

.text(d => d.name);

return svg.node();

}

OWiDdata= d3.json("https://covid.ourworldindata.org/data/owid-covid-data.json")

choropleth = {

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height);

svg.selectAll("path")

.data(world.features)

.join("path")

//In case OWiDdata[d.id] exists (i.e., the acronym is a property on OWiDdata), we paint with the corresponding color (related to the Human Development Index). In case it isn't defined, we use gray.

.attr("fill", d => OWiDdata[d.id] ? countrycolor(OWiDdata[d.id].human_development_index) : "#555")

.attr("d", path)

.attr("class", "countries");

svg.append("path")

.attr("id", "outline")

.attr("d", path(outline))

.attr("stroke", "#000")

.attr("stroke-width",0.5)

.attr("fill", "none");

return svg.node();

}

countrycolor = d3.scaleSequential(d3.interpolateYlGnBu)

.domain(d3.extent(Object.entries(OWiDdata).map(d=>d[1].human_development_index)))

.unknown("#ccc")

d3.extent( Object.entries(OWiDdata).map(d=>d[1].human_development_index))

Object.entries(OWiDdata).map(d=>d[1].human_development_index)

Object.entries(OWiDdata);

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.

Learn more