31:T426,plot = Plot.plot({ style: {fontFamily: "Open Sans, san-serif", fontSize: "14px"}, width: 1000, height: 350, marginTop: 20, marginBottom: 60, marginLeft: 40, marginRight: 140, insetLeft: 20, x: {label: null, tickPadding: 15, tickSize: 0}, y: {domain: [0,350], grid: true, label: null, tickSize: 0}, marks: [ Plot.ruleY([0]), Plot.lineY(data.filter(d => selection.includes(d.area_name)), {x: "year", y: "n", z: "area_name", stroke: "area_name", strokeWidth: 3, marker: "circle"}), Plot.text(data.filter(d => selection.includes(d.area_name)), Plot.selectLast({ x: "year", y: "n", text: "area_name", fill: "area_name", textAnchor: "start", dx: 8, lineWidth: 10})), ], caption: html`

Sources: Office for National Statistics and House of Commons Library

`, tooltip: {fill: "#FFFFFF", opacity: 1, stroke: "#27A0CC"} })32:[{"id":"3e8a5f132a84eefc4b412df0ff3c19305955ebd5ba1e2a724282e2c2c94a271a63555b525511f1c6d4b9dfce7899ccd4435e4112527c3be15cd4c31bb612f46d","href":"https://static.observableusercontent.com/files/3e8a5f132a84eefc4b412df0ff3c19305955ebd5ba1e2a724282e2c2c94a271a63555b525511f1c6d4b9dfce7899ccd4435e4112527c3be15cd4c31bb612f46d","name":"live_births.csv","type":"text/csv","lastModified":1656422266090.996,"size":17919},{"id":"d9099c03ec108ac97dd7df915f5aa6254b150f5e6cb4db1346152676834339cb78429fef81ae149cab0ec35d3f0768b74722b53f95374e128e14a45c9b83d2e1","href":"https://static.observableusercontent.com/files/d9099c03ec108ac97dd7df915f5aa6254b150f5e6cb4db1346152676834339cb78429fef81ae149cab0ec35d3f0768b74722b53f95374e128e14a45c9b83d2e1","name":"msoa.geojson","type":"application/geo+json","lastModified":1656426883885.569,"size":214465}] 2f:{"title":"Live births in Manchester","cells":[{"id":0,"value":"# Live births in Manchester","pinned":false,"hidden":false,"mode":"md"},{"id":142,"value":"

Select one or multiple Middle-Layer Super Output Areas to reveal the number of live births per year.

","pinned":false,"hidden":false,"mode":"html"},{"id":161,"value":"\n\n\n

\n ${viewof selection}\n

\n ${map}\n

\n ${plot}\n

\n","pinned":false,"hidden":false,"mode":"html"},{"id":4,"value":"---\n### Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":107,"value":"L = require('leaflet@1.7.1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":7,"value":"data = (await FileAttachment(\"live_births.csv\").csv()).map(d => ({\n year: new Date(d.year),\n area_code: d.area_code,\n area_name: d.area_name,\n n: +d.n\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"geojson = FileAttachment(\"msoa.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"viewof selection = Inputs.select(data.map(d => d.area_name), {unique: true, sort: true, label: \"Select an area\", multiple: true, value: [\"Levenshulme North\", \"University North & Whitworth Street\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"map = {\n const selected = geojson.features.filter(d => selection.includes(d.properties.area_name))\n const mapContainer = DOM.element('div', { style: `width:${600}px;height:${width/4}px` });\n yield mapContainer;\n const map = L.map(mapContainer);\n \n const osmLayer = L.tileLayer(\n 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {\n attribution: '© OpenStreetMap contributors © CARTO',\n detectRetina: false,\n maxZoom: 16,\n minZoom: 8,\n noWrap: false,\n subdomains: 'abc'\n }).addTo(map);\n \n const mapStyle = {\"color\": \"#212121\", \"weight\": 2, \"opacity\": 0.5};\n const area = L.geoJSON(selected, {style: mapStyle}).addTo(map);\n const zoom = map.fitBounds(area.getBounds());\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}