45:["$","title",null,{"children":"Non-Contiguous Cartogram | Victor Burnett | Observable"}] 4d:T4d2,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, 975, 610]) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); // create grey state outlines svg.append("path") .datum(topojson.mesh(us, us.objects.states)) .attr("fill", "none") .attr("stroke", "#ccc") .attr("d", path); // create dark states outlines, shrink, and fill in const state = svg.append("g") .attr("stroke", "#000") .selectAll("path") .data(topojson.feature(us, us.objects.states).features.filter(d => data.has(d.id))) .join("path") .attr("vector-effect", "non-scaling-stroke") .attr("d", path) .attr("fill", d => color(data.get(d.id)[0])) .attr("transform", d => transform(d, 0)); state.append("title") .text(d => `${d.properties.name} ${format(data.get(d.id)[0])} in 2014 ${format(data.get(d.id)[1])} in 2018 ${format(data.get(d.id)[2])} in 2022`); return Object.assign(svg.node(), { update(year) { state.transition() .duration(750) .attr("fill", d => color(data.get(d.id)[year])) .attr("transform", d => transform(d, year)); } }); }4e:[{"id":"88b9008596551b6edf0f1c32fb3f5ac826226a79067042519e4e921daec93db658d555b979de9c2d6ba451a4a7944ae081cb8524d5f69ca68ecbda46484bde1b","href":"https://static.observableusercontent.com/files/88b9008596551b6edf0f1c32fb3f5ac826226a79067042519e4e921daec93db658d555b979de9c2d6ba451a4a7944ae081cb8524d5f69ca68ecbda46484bde1b","name":"states-albers-10m@1.json","type":"application/json","lastModified":1664554626549.355,"size":82024},{"id":"f97be7781f258eece804cc3c8780c58df00bef7df04c6910caf699c5fcfc5cf9fe01c2baea44256fefe944f44f1f4d7a88dd0b65a35153d25b7838fa4e20d273","href":"https://static.observableusercontent.com/files/f97be7781f258eece804cc3c8780c58df00bef7df04c6910caf699c5fcfc5cf9fe01c2baea44256fefe944f44f1f4d7a88dd0b65a35153d25b7838fa4e20d273","name":"streamingpop.csv","type":"text/csv","lastModified":1664552354171.671,"size":1472}] 49:{"id":"3c53b27fac055e23","slug":"non-contiguous-cartogram","title":"Non-Contiguous Cartogram","thumbnail":"52345bdff615761af79fa39d50ca80e4b505879f0179e2ce0a1068e694fab641","access_level":"public","create_time":"$D2022-09-30T15:34:57.582Z","update_time":"$D2022-09-30T23:59:36.231Z","view_time":null,"first_public_time":"$D2022-09-30T16:48:37.553Z","has_unpublished_edits":null,"fork":{"id":"9273aa0adbfd9ae3","slug":"non-contiguous-cartogram","title":"Non-contiguous cartogram","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"starred":false,"owner":{"type":"team","id":"a3208fc06ba3b2c5","login":"thevictorian","name":"Victor Burnett","avatar_url":"https://avatars-next.observableusercontent.com/bea75bb4ed534ddf501c71f6523abce0a5d0842048eccdb68561ad5198c9f189","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":428,"publish_version":428,"role":null,"authored":false,"authors":[{"type":"individual","id":"e2b03365b9c73355","login":"thevictorian","name":"Victor Burnett","avatar_url":"https://avatars-next.observableusercontent.com/bea75bb4ed534ddf501c71f6523abce0a5d0842048eccdb68561ad5198c9f189","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"e2b03365b9c73355","login":"thevictorian","name":"Victor Burnett","avatar_url":"https://avatars-next.observableusercontent.com/bea75bb4ed534ddf501c71f6523abce0a5d0842048eccdb68561ad5198c9f189","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"2fa41b2f7a2e1761","slug":"portfolio","title":"Portfolio","owner":{"id":"a3208fc06ba3b2c5","login":"thevictorian","name":"Victor Burnett"}},"type":"notebook","body":{"titling":"auto","title":"Non-Contiguous Cartogram","cells":[{"id":0,"value":"md`# Non-Contiguous Cartogram\n\nThe shaded area of each state represents the proportion of the state’s 20-35 year old population subscribed to music streaming services.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"viewof year = {\n const form = html``;\n form.onchange = () => {\n form.value = form.radio.value;\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.value = form.radio.value;\n setTimeout(() => (form.radio.value = \"1\", form.onchange()), 2000);\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"legend({color, title: \"% 20-35 year olds subscribed to a music streaming service\", tickFormat: \"%\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"chart.update(year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"function transform(d, year) {\n const [x, y] = path.centroid(d);\n return `\n translate(${x},${y})\n scale(${Math.sqrt(data.get(d.id)[year])})\n translate(${-x},${-y})\n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"color = d3.scaleSequential(d3.extent(Array.from(data.values()).flat()), d3.interpolateGreens).nice()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"data = new Map(d3.csvParse(await FileAttachment(\"streamingpop.csv\").text(), ({id, subscribed2014, subscribed2018, subscribed2022}) => [id, [+subscribed2014, +subscribed2018, +subscribed2022]]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"path = d3.geoPath()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"format = d3.format(\".1%\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"us = FileAttachment(\"states-albers-10m@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 44:null