2b:null 2c:["$","title",null,{"children":"Plot: bar map with vector mark | Atelier de cartographie de Sciences Po | Observable"}] 31:T518,Plot.plot({ width, inset: 10, projection: { type: "orthographic", rotate: [-longitude, -30] }, length: { domain: [0, 41e6], range: [0, 100] }, marks: [ Plot.graticule({ strokeOpacity: 0.05 }), // LAND () => insetShadow, Plot.geo(basemap[0], { fill: "#c9d8df", imageFilter: effect ? "url(#inset-shadow)" : null }), // BORDERS Plot.geo(basemap[1], { stroke: "white", strokeOpacity: 0.7 }), // BARS Plot.vector(ghs_urban_centres_2015, { // CHANNELS x: "LON", y: "LAT", r: 2, length: "P15", shape: barMap, // STYLE anchor: "start", fill: "#D80B8C", fillOpacity: 0.8, imageFilter: effect ? "drop-shadow(0.07rem 0.07rem 0.07rem white)" : null, // TOOLTIP tip: true, title: (d) => `${d.NAME} (${d.COUNTRY})\n Pop 2015: ${d.P15.toLocaleString(undefined, { maximumFractionDigits: 0, maximumSignificantDigits: 3 })}` }), Plot.sphere({ stroke: "grey", imageFilter: effect ? "blur(5px)" : null, clip: "sphere" }), legendBar([1e6, 1e7, 2e7, 4e7], { fill: "#D80B8C", fillOpacity: 0.8 }) ], caption: "Source: GHS Urban Centre Database 2015. European Commission, Joint Research Centre (JRC)" })32:[{"id":"172f93e9e56ea6c6ce884f081c0a5ddbdc3c8b2cdfe45934bcb753bfe305b7ba9a8c794a7e3ecd1af86e15f3cc574229cbcac80027ae2afc27414ce7aa296182","href":"https://static.observableusercontent.com/files/172f93e9e56ea6c6ce884f081c0a5ddbdc3c8b2cdfe45934bcb753bfe305b7ba9a8c794a7e3ecd1af86e15f3cc574229cbcac80027ae2afc27414ce7aa296182","name":"ghs_urban_centres_2015.csv","type":"text/csv","lastModified":1686400878528.774,"size":1258114}] 2f:{"id":"387aa0be6a095ee4","slug":"plot-bar-map","title":"Plot: bar map with vector mark","thumbnail":"1f9127bf600f0ae47a247993c42584bec3ea666809ead05b059317b3bdc32850","access_level":"public","create_time":"$D2023-06-09T15:53:22.455Z","update_time":"$D2023-06-12T09:28:15.168Z","view_time":null,"first_public_time":"$D2023-06-12T09:24:34.400Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"5d76df5eab7f8bb7","login":"ateliercartographie","name":"Atelier de cartographie de Sciences Po","avatar_url":"https://avatars-next.observableusercontent.com/fab2304a50866da3a682fdbbdf200ecb01ddfd5fbf74f60756d36188cfd2cf68","tier":"starter_2024"},"version":350,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b5f87f2a35829281","login":"tombor","name":"Thomas Ansart","avatar_url":"https://avatars-next.observableusercontent.com/b086dcc95470aae08b776435f7604190c606884a2187354d54b5fbae116aa241","tier":null}],"members":[{"type":"individual","id":"b5f87f2a35829281","login":"tombor","name":"Thomas Ansart","avatar_url":"https://avatars-next.observableusercontent.com/b086dcc95470aae08b776435f7604190c606884a2187354d54b5fbae116aa241","tier":null,"role":"editor"},{"type":"team","id":"5d76df5eab7f8bb7","login":"ateliercartographie","name":"Atelier de cartographie de Sciences Po","avatar_url":"https://avatars-next.observableusercontent.com/fab2304a50866da3a682fdbbdf200ecb01ddfd5fbf74f60756d36188cfd2cf68","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Plot: bar map with vector mark","cells":[{"id":0,"value":"# Plot: bar map with vector mark\n## An alternative to [spike map](https://observablehq.com/@observablehq/plot-spike)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"\n### \"Urban centres\" with more than one million inhabitants in 2015\n_Data: [Global Human Settlement Layer](https://ghsl.jrc.ec.europa.eu/download.php?ds=ucdb), European Commission._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":172,"value":"viewof longitude = Inputs.range([-180, 180], {\n label: \"Longitude\",\n step: 5,\n value: 55\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"viewof effect = Inputs.toggle({ label: \"Add subtle effects?\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"### Table of cities with more than one million inhabitants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"ghs_urban_centres_2015 = await FileAttachment(\"ghs_urban_centres_2015.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"ghs_urban_centres_2015","database":"$undefined"},{"id":278,"value":"### Custom shape (bar) for vector mark","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"barMap = ({\n draw(context, length, r) {\n context.rect(-r / 2, 0, r, -length); // (x, y, width, height)\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"### SVG filter to create an inset shadow on land layer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"// From CSS-TRICKS\n// https://css-tricks.com/adding-shadows-to-svg-icons-with-css-and-svg-filters/#aa-inset-shadows\ninsetShadow = htl.svg`\n \n \n\n \n \n\n \n \n \n \n \n \n\n \n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"### A custom legend borrow from the [spike map example](https://observablehq.com/@observablehq/plot-spike) in Plot's gallery","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"function legendBar(\n values,\n {\n frameAnchor = \"bottom-right\",\n format = \"~s\",\n stroke,\n strokeWidth,\n fill,\n fillOpacity\n } = {}\n) {\n if (!Array.isArray(values)) values = Array.from(values);\n if (typeof format !== \"function\") format = d3.format(format);\n return Plot.marks(\n values.map((v, i) => {\n const dx = (i - values.length) * 28;\n return [\n Plot.vector([v], {\n length: [v],\n shape: barMap,\n anchor: \"start\",\n dx,\n dy: -20,\n frameAnchor,\n stroke,\n strokeWidth,\n fill,\n fillOpacity\n }),\n Plot.text([v], {\n text: [format(v)],\n dx,\n dy: -10,\n frameAnchor,\n textAnchor: \"middle\"\n })\n ];\n })\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"### Basemap preparation\nDerive borders from countries polygon and convert to geojson","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"basemap = topohelper\n .from(world50m)\n .innerlines({ layer: \"countries\", name: \"borders\" })\n .toGeojson({ layer: [\"land\", \"borders\"] })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"import { world110m, world50m } from \"@visionscarto/geo\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"topohelper = import(\"https://cdn.jsdelivr.net/npm/topohelper@0.4.3/+esm\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"