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 `

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more