2e:null 2f:["$","title",null,{"children":"Hacking a Vega-lite map: label positioning, custom fonts, stripes / hatching, blur | Olivia Vane | Observable"}] 34:T667,md `This approach requires you to render the Vega-lite viz as an [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) (this is simple, just use \`\`.render({renderer: 'svg'})\`\`. You can then use [D3](https://observablehq.com/@d3) to access the SVG nodes and programmatically apply different styles to them, for example: different typefaces (I've used a couple in this notebook linked from [Google fonts](https://fonts.google.com/)), font styling, SVG filters etc. You can also manually re-position text labels by using D3 to attach a \`\`drag\`\` function to the SVG text nodes. You can then drag the labels around with your cursor - as you would with image editing software. (You could even use your browser's DevTools to manually add a slight rotate to a text node so it displays at an angle). This is useful for if you want to adjust the placement of map labels before saving a copy of the viz image. Since the adjusted label positions are not saved anywhere, if the Vega-lite viz cell is re-run (or the notebook refreshed), the adjustments are not maintained. (NB. A [label layout algorithm](https://github.com/vega/vega/tree/master/packages/vega-label) looks to [coming soon](https://github.com/altair-viz/altair/issues/1731) to Vega-lite). **To style and allow label dragging, after the Vega-lite map has rendered run the D3 code cell below under the heading 'D3 hacks'**. **NOTE:** if you want to use the colour pickers and stripes sliders below to adjust the viz design, make sure you do it before running the D3 code as using these cancels the D3 adjustments (any manual label positioning you've done will be reversed).`35:T60d,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'}); }36:T434,{ // 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(); }37:[{"id":"146b5e720f50b6361cb31dbfab63ac0b0a9ad5fbce793c87b757a24b61c04a82ea68845dfd84ad53c480b6ba6758e3c60b4cd414abc2acae39ed45d05d8c33dd","href":"https://static.observableusercontent.com/files/146b5e720f50b6361cb31dbfab63ac0b0a9ad5fbce793c87b757a24b61c04a82ea68845dfd84ad53c480b6ba6758e3c60b4cd414abc2acae39ed45d05d8c33dd","name":"uk_regions_map.json","type":"application/json","lastModified":1593794363585.945,"size":1373657},{"id":"18715baa5df542da0161662baef905f1413f32a8c0eab7f5fe519f6f2804c4bead5bb6aacb9ccd5304f03353fcb2dc80756b69675d4861c2ca1c4b49d67123c8","href":"https://static.observableusercontent.com/files/18715baa5df542da0161662baef905f1413f32a8c0eab7f5fe519f6f2804c4bead5bb6aacb9ccd5304f03353fcb2dc80756b69675d4861c2ca1c4b49d67123c8","name":"map_750.gif","type":"image/gif","lastModified":1595521279062.287,"size":447635}] 32:{"id":"9eae5176c5f68d00","slug":"hacking-a-vega-lite-map-label-positioning-custom-fonts-stri","title":"Hacking a Vega-lite map: label positioning, custom fonts, stripes / hatching, blur","thumbnail":"8eaa02d8224fa62dd8c194c969841535338c3c507e610cf435fbf8dc53bd810f","access_level":"public","create_time":"$D2020-06-30T15:34:02.949Z","update_time":"$D2021-10-30T17:52:55.368Z","view_time":null,"first_public_time":"$D2020-07-23T16:37:14.865Z","has_unpublished_edits":null,"fork":false,"stars":40,"starred":false,"owner":{"type":"team","id":"51a17a9a0cd3fee1","login":"oliviafvane","name":"Olivia Vane","avatar_url":"https://avatars-next.observableusercontent.com/1d95b23cf0db36d6edeb5a6e81b4f13e828c958c60e5999766ea1953e592b907","tier":"starter_2024"},"version":671,"publish_version":671,"role":null,"authored":false,"authors":[{"type":"individual","id":"ac5315ae69e3a5e3","login":"oliviafvane","name":"Olivia Vane","avatar_url":"https://avatars-next.observableusercontent.com/1d95b23cf0db36d6edeb5a6e81b4f13e828c958c60e5999766ea1953e592b907","tier":null}],"members":[{"type":"individual","id":"ac5315ae69e3a5e3","login":"oliviafvane","name":"Olivia Vane","avatar_url":"https://avatars-next.observableusercontent.com/1d95b23cf0db36d6edeb5a6e81b4f13e828c958c60e5999766ea1953e592b907","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Hacking a Vega-lite map: label positioning, custom fonts, stripes / hatching, blur","cells":[{"id":0,"value":"md`# Hacking a Vega-lite map: label positioning, custom fonts, stripes / hatching, blur`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"md `[Vega-lite](https://observablehq.com/collection/@uwdata/visualization-curriculum) is great for creating visualisations quickly. But if you want a little more visual customisation, these are a few tricks.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"FileAttachment('map_750.gif').image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"viewof color = colorPicker(\"#95c6ed\", 'hex')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"viewof color2 = colorPicker(\"#d7747c\", 'hex')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"html ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"viewof spacing = slider({\n min: 0, \n max: 10, \n step: 1, \n value: 2, \n title: \"Frequency of lines\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"viewof thickness = slider({\n min: 0, \n max: 10, \n step: 1, \n value: 1, \n title: \"Thickness of lines\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"viewof rotation = slider({\n min: 0, \n max: 180, \n step: 5, \n value: 45, \n title: \"Rotation\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"layered_map.cloneNode(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"md `## D3 hacks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"md`👇 Run the cell below to apply the adjustments. After you've run it, you can drag the map labels around:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"{\n // Use browser DevTools to identify the SVG g classes for the relevant layers\n\n d3.selectAll('g.mark-text.role-mark')\n .selectAll('text')\n .style('font-family', 'Source Sans Pro')\n .style('font-size', '12px')\n .datum({ x: 0, y: 0 })\n .call(drag);\n\n d3.select('.layer_5_marks')\n .selectAll('text')\n .style('font-family', 'Work Sans')\n .style('font-size', '10px')\n .style('font-weight', '700')\n .style('text-transform', 'uppercase')\n .style('letter-spacing', '3px');\n\n d3.select('.layer_0_marks')\n .selectAll('path')\n .style('filter', 'url(#blur)');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"drag = {\n\n function dragstarted(d) {\n d3.select(this);\n }\n\n function dragged(d) {\n d3.select(this).attr(\"x\", d.x = d3.event.x).attr(\"y\", d.y = d3.event.y);\n }\n\n function dragended(d) {\n d3.select(this);\n }\n\n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"md `## Vega-lite map code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"md `## SVG defs and fonts link`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"// define stripes\nhtml `\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"// define blur\nhtml `\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"// Include links to custom Google fonts\nhtml `\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"md `## Dummy data selections`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"counties_selection = ({ 'type': 'FeatureCollection', 'features': counties_simplified.features.slice(0,20) })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"regions_selection = { \n \n let indices = [1,2,5,6,9];\n \n let regions_selection = { 'type': 'FeatureCollection', 'features': []};\n \n indices.forEach(function(d,i){\n regions_selection.features.push(regions_simplified.features[d]);\n });\n \n return regions_selection;\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"places_selection = ({ 'type': 'FeatureCollection', 'features': cities_and_towns.features.slice(15,35) })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"md `## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"md `#### Counties`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"counties_simplified = topojson_to_simplified_geojson(counties_filtered, 'GBR_adm2', 0.5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"counties_filtered = { \n // remove Northern Ireland\n const removeList = [\"Northern Ireland\"];\n let countiesSubset = counties.objects.GBR_adm2.geometries.filter(d => !removeList.includes(d.properties.NAME_1));\n counties.objects.GBR_adm2.geometries = countiesSubset;\n let counties_filtered = prune(counties) // remove unused arcs\n return counties_filtered; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"// from 'TopoJSON Collection' https://github.com/deldersveld/topojson\ncounties = d3.json('https://raw.githubusercontent.com/deldersveld/topojson/master/countries/united-kingdom/uk-counties.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"md `#### Regions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"regions_simplified = topojson_to_simplified_geojson(regions, 'uk_regions_map', 0.04)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"regions = { \n // remove Northern Ireland\n const removeList = [\"Northern Ireland\"];\n let regionsSubset = regions_read.objects.uk_regions_map.geometries.filter(d => !removeList.includes(d.properties.name));\n regions_read.objects.uk_regions_map.geometries = regionsSubset;\n let regions = prune(regions_read) // remove unused arcs\n return regions; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"// from https://emilyshackleton1.carto.com/tables/uk_regions_map/public\nregions_read = FileAttachment('uk_regions_map.json').json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"md `#### Place names`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"cities_and_towns = topojson.feature(cities_and_towns_filtered, \"places\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"cities_and_towns_filtered = { \n // remove Northern Ireland places\n const removeList = ['Londonderry', 'Lisburn', 'Belfast'];\n let placesSubset = uk_read.objects.places.geometries.filter(d => !removeList.includes(d.properties.name));\n uk_read.objects.places.geometries = placesSubset;\n let cities_and_towns_filtered = prune(uk_read) // remove unused arcs\n return cities_and_towns_filtered; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"md `#### Country boundaries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"britain_countries = {\n // Filter geojson to England, Scotland, Wales \n let britain_countries_geojson = topojson.feature(uk_read, \"subunits\");\n let filtered_countries = britain_countries_geojson.features.filter(d => (d.id == \"ENG\" || d.id == \"SCT\" || d.id == \"WLS\"));\n britain_countries_geojson.features = filtered_countries;\n return britain_countries_geojson;\n\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"britain_country_boundaries = topojson.mesh(uk_read, uk_read.objects.subunits, function(a, b) { return a !== b && a.id !== \"IRL\"; })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"uk_read = d3.json(\"https://bost.ocks.org/mike/map/uk.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"md `## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"function topojson_to_simplified_geojson(geojson, objects, simplified_metric){\n let geojson_simplified = topojson.presimplify(geojson)\n let min_weight = topojson.quantile(geojson_simplified, simplified_metric)\n geojson_simplified = topojson.simplify(geojson_simplified, min_weight);\n geojson_simplified = topojson.feature(geojson_simplified, objects)\n return geojson_simplified;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"// from prune @lemonnish/minify-topojson-in-the-browser\n\n// dynamic imports don't work in all browsers:\n// pruneModule = import('https://unpkg.com/topojson-simplify@3.0.2/src/prune.js?module')\n// prune = topology => pruneModule.default(topology)\nprune = require('https://bundle.run/topojson-simplify@3.0.2/src/prune.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md `## Libraries and imports` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"topojson = require('topojson-client@3', 'topojson-simplify@3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"import {colorPicker} from \"@shaunlebron/color-picker\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"pageAnalytics = {\n const id = 'G-9LJJBT1LX4';\n await require(`https://www.googletagmanager.com/gtag/js?id=${id}`).catch(\n () => {}\n );\n const dataLayer = (window.dataLayer = window.dataLayer || []);\n const location = html``;\n gtag('js', new Date());\n gtag('config', id, {\n page_path: location.pathname,\n page_location: location.href\n });\n return md`^{[Google Analytics](https://www.google.com/analytics/terms/).}`;\n function gtag() {\n dataLayer.push(arguments);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"