2c:null 2d:["$","title",null,{"children":"Hello Topogram | Observable Ambassadors | Observable"}] 32:T7c7,viewof ui = { const colorScheme = () => { const interpolators = d3.range(colorSchemes.length * 2).map((d) => { if (d % 2 == 0) { return { name: colorSchemes[d / 2].strColorScheme.substring(11) }; } else { return { name: colorSchemes[(d - 1) / 2].strColorScheme.substring(11) + " (I)", value: (t) => colorSchemes[(d - 1) / 2].fnColorScheme(1 - t) }; } }); return colorInterpolatorPicker({ title: "Color Scheme", value: "Spectral", interpolators: interpolators, w: 200 }); }; // colorScheme const mapType = Inputs.radio(["albers", "simplified", "cartogram"], { value: "cartogram", label: `Map Type`, format: (v) => { switch (v) { case "cartogram": return md`USA [Cartogram](https://en.wikipedia.org/wiki/Cartogram)`; case "simplified": return md`[Simplified](https://www.jasondavies.com/simplify/) USA [Choropleth](https://en.wikipedia.org/wiki/Choropleth_map)`; case "albers": return md`[Albers](https://github.com/topojson/us-atlas/#states-albers-10m.json) USA [Choropleth](https://en.wikipedia.org/wiki/Choropleth_map)`; } } }); return view`

${["mapType", mapType]}

${[ "randomize", /* Changes are synced with external state holder 'randomize' (who is the authority) */ Inputs.bind(Inputs.button("Randomize Data"), viewof randomize) ]}

${["colorScheme", colorScheme()]}

${[ "invert", Inputs.bind( Inputs.toggle({ label: "Invert", values: ["descending", "ascending"] }), viewof invert // Changes are synced with external state holder 'invert' (who is the authority) ) ]}

Zoom/Pan

`; }33:T64c,svg = { let features, pathGenerator, titleText; const height = width * 0.7; const addMap = (mapType, svg, features, pathGenerator) => { const getData = d => data.get(ui.mapType == "albers" ? d.properties.name : d.id); svg .append("g") .attr("id", mapType) .attr("visibility", "hidden") .selectAll("path") .data(features) .join("path") .attr("fill", d => color(getData(d))) .attr("d", pathGenerator) .append("title") .text( d => `${mapType == "albers" ? d.properties.name : d.id} : ${d3.format( ",.0f" )(getData(d))}` ); }; // addMap const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // https://github.com/d3/d3-geo/blob/v3.0.1/README.md#geoAlbersUsa const projection = d3 .geoAlbersUsa() .fitSize([width, height], simplifiedGeoJson); // Albers features = albersGeoJson.features; pathGenerator = d3.geoPath(projection); addMap("albers", svg, features, pathGenerator); // Simplified features = simplifiedGeoJson.features; pathGenerator = d3.geoPath(projection); addMap("simplified", svg, features, pathGenerator); // Cartogram const carto = topogram .cartogram() .projection(projection) .value(d => data.get(d.id)); const geometries = simplifiedTopology.objects.states.geometries; features = carto(simplifiedTopology, geometries).features; pathGenerator = carto.path; addMap("cartogram", svg, features, pathGenerator); svg.select(`#${ui.mapType}`).attr("visibility", "visible"); return svg.node(); }34:[{"id":"19ecf0da78a8e72518454d618d989e166135422105ee22bdc6aceb1193b85b2806de2c2a7d059ce2de3dddf927e2b1753e801cd3c86fac01b8857d7e0f53a6a0","href":"https://static.observableusercontent.com/files/19ecf0da78a8e72518454d618d989e166135422105ee22bdc6aceb1193b85b2806de2c2a7d059ce2de3dddf927e2b1753e801cd3c86fac01b8857d7e0f53a6a0","name":"mouse.png","type":"image/png","lastModified":1635779723472.141,"size":3188},{"id":"5dca726b5159eda37ec8d354bc25f7e9a85f4e3ad0815aa03fd5101ed621af06c7627b575470efc8691df8aa5ecc19dfec585a756e84ea7cbda62e77b9f7df57","href":"https://static.observableusercontent.com/files/5dca726b5159eda37ec8d354bc25f7e9a85f4e3ad0815aa03fd5101ed621af06c7627b575470efc8691df8aa5ecc19dfec585a756e84ea7cbda62e77b9f7df57","name":"ne_10m_admin_1_states_provinces_lakes.json","type":"application/json","lastModified":1633702987403.071,"size":509775}] 30:{"id":"0c9098bac37d67f4","slug":"hello-topogram","title":"Hello Topogram","thumbnail":"da2d95c0c608ae5918fe4701664ee5fb4419e7d0f326168fe6e0db1f107b5044","access_level":"public","create_time":"$D2021-09-30T01:54:39.185Z","update_time":"$D2026-04-11T23:11:45.199Z","view_time":null,"first_public_time":"$D2021-09-30T02:05:30.974Z","has_unpublished_edits":null,"fork":false,"stars":11,"starred":false,"owner":{"type":"team","id":"11bfeb572ddbe905","login":"ambassadors","name":"Observable Ambassadors","avatar_url":"https://avatars-next.observableusercontent.com/93bf798c058a2bf8d3bb90c0754f774b6278b8b16748784f520b07a8800ef772","tier":"pro_2024","bio":"The Ambassador program is made up of a group of inclusive, collaborative, and curious minds in the Observable community. "},"version":839,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null,"bio":"Designing and Engineering a Better Tomorrow"}],"members":[{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null,"role":"editor"},{"type":"team","id":"11bfeb572ddbe905","login":"ambassadors","name":"Observable Ambassadors","avatar_url":"https://avatars-next.observableusercontent.com/93bf798c058a2bf8d3bb90c0754f774b6278b8b16748784f520b07a8800ef772","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hello Topogram","cells":[{"id":0,"value":"md`# Hello [Topogram](https://github.com/shawnbot/topogram/) \nThe USA [Dougenik Cartogram](http://lambert.nico.free.fr/tp/biblio/Dougeniketal1985.pdf) is visualized with a [simplified](https://www.jasondavies.com/simplify/) [TopoJSON](https://github.com/shawnbot/topogram/tree/master/data) of the [USA Albers topology](https://github.com/topojson/us-atlas/#states-albers-10m.json).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"legend({\n width: width,\n color: d3.scaleSequential(colorDomain, ui.colorScheme),\n title: \"Value\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"dataTable = {\n // https://observablehq.com/@observablehq/input-table\n //swatches: https://observablehq.com/@zechasault/color-schemes-and-interpolators-picker\n const textColor = color => (d3.lab(color).l < 50 ? \"white\" : \"black\");\n\n const sparkbar = max => {\n return d => htl.html`

10 ? 3 : 2)}%;\n float: right;\n padding-right: 3px;\n box-sizing: border-box;\n color: ${textColor(color(d))};\">${d.toLocaleString(\"en\")}`;\n }; // sparkbar\n\n const tableData = [...data].map(d => ({ State: d[0], Value: d[1] }));\n\n return Inputs.table(tableData, {\n sort: \"Value\",\n reverse: ui.invert == \"descending\",\n format: { Value: sparkbar(d3.max(tableData, d => d.Value)) }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"md`## Related\n${previews([\n {\n path: \"@ambassadors/lets-make-a-dougenik-cartogram\",\n thumbnail:\n \"9e6debce49412e9c0d63744d7c3b1d30f8fbb467a5b4ef71ff01589751e15fbb\",\n title: \"Let's make a Dougenik Cartogram\",\n author: \"@neocarto\"\n },\n {\n path: \"@mariodelgadosr/continuous-area-vector-graphics\",\n thumbnail:\n \"426b5382b81c07e641ce13db28478002ce76c70fca105af7c920a616e6efb159\",\n title: \"Continuous Area Vector Graphics\",\n author: \"Mario Delgado\"\n }\n])} \n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"md`## Objects used in the visualizations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"showSelection = {\n const selection = d3.select(svg);\n\n selection.selectAll(\"g\").attr(\"visibility\", \"hidden\").on(\"zoom\", null);\n\n const g = selection.select(`#${ui.mapType}`);\n\n g.attr(\"opacity\", 0)\n .attr(\"visibility\", \"visible\")\n .transition()\n .duration(1500)\n .attr(\"opacity\", 1);\n\n const zoom = d3\n .zoom()\n .on(\"zoom\", ({ transform }) => g.attr(\"transform\", transform));\n\n selection.call(zoom);\n\n zoom.scaleTo(selection, ui.mapType == \"albers\" ? 1 : 0.95);\n\n return md`⬅ Click cell to see code for ***showSelection***`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"data = {\n randomize;\n\n return new Map(\n topojson\n .feature(simplifiedTopology, simplifiedTopology.objects.states)\n .features.map((d) => [d.id, d3.randomInt(1, 1000)()])\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"colorDomain = d3.sort(d3.extent([...data.values()]), d3[invert])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"color = d3.scaleSequential(ui.colorScheme).domain(colorDomain)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"// Authority state holder, the compact view UI's controls are bound to this variable\n// https://observablehq.com/@tomlarkworthy/ui-development#2-way-binding-for-synchronization\nviewof invert = Inputs.input(\"accending\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"// Authority state holder\n// https://observablehq.com/@tomlarkworthy/ui-development#2-way-binding-for-synchronization\nviewof randomize = Inputs.input(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`### [Simplified](https://www.jasondavies.com/simplify/) and [Albers](https://github.com/d3/d3-geo/blob/v3.0.1/README.md#geoAlbersUsa) Objects for Renderings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"simplifiedTopology = {\n const simplifiedTopology = await d3.json(\n \"https://cdn.jsdelivr.net/npm/topogram@1.0.1/data/us-states.topojson\"\n );\n // Clean-up Virginia arcs\n simplifiedTopology.objects.states.geometries\n .filter(d => d.id == \"Virginia\")[0]\n .arcs.pop();\n return simplifiedTopology;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"albersTopology = FileAttachment(\n \"ne_10m_admin_1_states_provinces_lakes.json\"\n).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"simplifiedGeoJson = topojson.feature(\n simplifiedTopology,\n simplifiedTopology.objects.states\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"albersGeoJson = topojson.feature(\n albersTopology,\n albersTopology.objects.ne_10m_admin_1_states_provinces_lakes\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"// d3 and topojson via: https://observablehq.com/@observablehq/recommended-libraries?collection=@observablehq/libraries\nmd`## Imports (d3 and topojson via [Observable open-source libraries](https://observablehq.com/@observablehq/recommended-libraries))`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"// https://github.com/shawnbot/topogram/\n// https://www.jsdelivr.com/package/npm/topogram\ntopogram = require(\"topogram\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"import { colorInterpolatorPicker } from \"@mariodelgadosr/color-schemes-and-interpolators-picker\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"import { colorSchemes } from \"@mariodelgadosr/programmatic-collection-of-interpolated-d3-color-schemes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"import { view } from '@tomlarkworthy/view'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"import { previews } from \"@d3/gallery\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"