Hacking a Vega-lite map: label positioning, custom fonts, stripes / hatching, blur / Olivia Vane

Olivia Vane

Data visualisation design + code. Interactive data journalist @TheEconomist

Workspace

Published

Edited

Nov 2, 2020

40 stars

{

// Use browser DevTools to identify the SVG g classes for the relevant layers

d3.selectAll('g.mark-text.role-mark')

.selectAll('text')

.style('font-family', 'Source Sans Pro')

.style('font-size', '12px')

.datum({ x: 0, y: 0 })

.call(drag);

d3.select('.layer_5_marks')

.selectAll('text')

.style('font-family', 'Work Sans')

.style('font-size', '10px')

.style('font-weight', '700')

.style('text-transform', 'uppercase')

.style('letter-spacing', '3px');

d3.select('.layer_0_marks')

.selectAll('path')

.style('filter', 'url(#blur)');

}

layered_map = {

const places_circles = vl.markCircle({size: 20}).data(places_selection.features).encode(

vl.longitude().fieldQ('geometry.coordinates[0]'),

vl.latitude().fieldQ('geometry.coordinates[1]')

);

const places_text = vl.markText({dy:-10}).data(places_selection.features).encode(

vl.longitude().fieldQ('geometry.coordinates[0]'),

vl.latitude().fieldQ('geometry.coordinates[1]'),

vl.text().fieldN('properties.name')

);

const counties = vl.markGeoshape({fill: color2, stroke: 'white'})

.data([counties_selection]);

const country_boundaries_national = vl.markGeoshape({stroke: 'lightgray', strokeDash: [2,2], fill: null})

.data([britain_country_boundaries]);

const regions = vl.markGeoshape({fill: 'url(#pattern_QWGSkB)', stroke:color, strokeWidth: 0.5})

.data([regions_selection]);

const countries_labels = vl.markText({fill:color})

.data(britain_countries.features).encode(

vl.text().fieldN('properties.name')

);

const boundaries = vl.markGeoshape({fill: 'white'})

.data(britain_countries.features);

const boundaries_blur = vl.markGeoshape({stroke: 'black', strokeWidth:2, fill: null})

.data(britain_countries.features);

return vl.layer(boundaries_blur, boundaries, country_boundaries_national, counties, regions, countries_labels, places_circles, places_text)

.project(vl.projection('mercator').scale(2900).translate(500, 3905))

.height(1000)

.width(900)

.view({'stroke': 'transparent'}) // removes chart border

.render({renderer: 'svg'});

}

{

// show the different geographic datasets

const map1 = vl

.markGeoshape({ fill: "lightgrey", stroke: "black" })

.data([britain_countries]);

const boundaries = vl

.markGeoshape({ fill: "none", stroke: "black" })

.data([britain_country_boundaries]);

const map2 = vl

.markGeoshape({ fill: "lightgrey", stroke: "black" })

.data([turf.rewind(regions_simplified, { reverse: true })]) // need to reverse the winding order of the geojson - see https://observablehq.com/@chrispahm/vega-lite-api-displaying-bounding-box-instead-of-geojson-fe for more details

.height(160)

.width(160);

const map3 = vl

.markGeoshape({ fill: "lightgrey", stroke: "black" })

.data([counties_simplified]);

const map4 = vl

.markText()

.data(cities_and_towns.features)

.encode(

vl.longitude().fieldQ('geometry.coordinates[0]'),

vl.latitude().fieldQ('geometry.coordinates[1]'),

vl.text().fieldN('properties.name')

)

.height(160)

.width(160);

return vl.hconcat(map1, boundaries, map2, map3, map4).render();

}

// define stripes

html `

<defs>

</pattern>

</defs>

</svg>

// define blur

html `

<defs>

</filter>

</defs>

</svg>

// Include links to custom Google fonts

html `

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