2d:null 2e:["$","title",null,{"children":"Third Exercise on Observable | njmitchell20 | Observable"}] 33:T5a4,function showScaleGrouping(data, scales) { const margins = { left: 130 }; const x = d3 .scaleLinear() .domain(d3.extent(data)) .range([margins.left, width - 5]); const r = 3; const rectHeight = 10; const chart = svg` `; return chart; }34:[{"id":"296b1aab64bf34dbd73fbd952694a06f969fb267c0cee6f1698e8fae6ea5eb727c1be29e06155b02fcc53447873a5530655cb814a471e15810066fcaecfcd7cd","href":"https://static.observableusercontent.com/files/296b1aab64bf34dbd73fbd952694a06f969fb267c0cee6f1698e8fae6ea5eb727c1be29e06155b02fcc53447873a5530655cb814a471e15810066fcaecfcd7cd","name":"Alabama.csv","type":"text/csv","lastModified":1615231719263.706,"size":20721},{"id":"463c78510cad363e18463b15b1ff45ee34bcb63376a96993d91414c4979d6c4ad25cb47742426da6b85db579a9001d67eddd5f16e19a2c832a3e1b315627e4de","href":"https://static.observableusercontent.com/files/463c78510cad363e18463b15b1ff45ee34bcb63376a96993d91414c4979d6c4ad25cb47742426da6b85db579a9001d67eddd5f16e19a2c832a3e1b315627e4de","name":"Alabama.json","type":"application/json","lastModified":1615231719263.706,"size":82783}] 31:{"id":"ff316981c56fd985","slug":"third-exercise-on-observable","title":"Third Exercise on Observable","thumbnail":"44babe2c3ed7c11a30433535cd5953b94c752dc891d81e60ad50f376ee9c299e","access_level":"public","create_time":"$D2021-03-08T19:28:39.263Z","update_time":"$D2021-03-09T23:48:14.074Z","view_time":null,"first_public_time":"$D2021-03-09T17:57:19.518Z","has_unpublished_edits":null,"fork":{"id":"d02fa9d1e3327a05","slug":"third-exercise-on-observable-work-in-progress","title":"Second Exercise on Observable: Classification and Colors","owner":{"id":"2ad9e304bac66265","login":"njmitchell20","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"2ad9e304bac66265","login":"njmitchell20","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2f0c0a6d69894b50fce4c7abd5a27544615b49850a4369bc0b10e3e7985d8111","tier":"starter_2024"},"version":562,"publish_version":562,"role":null,"authored":false,"authors":[{"type":"individual","id":"c5f45b7c889ebd5d","login":"njmitchell20","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2f0c0a6d69894b50fce4c7abd5a27544615b49850a4369bc0b10e3e7985d8111","tier":null}],"members":[{"type":"individual","id":"c5f45b7c889ebd5d","login":"njmitchell20","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2f0c0a6d69894b50fce4c7abd5a27544615b49850a4369bc0b10e3e7985d8111","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Third Exercise on Observable","cells":[{"id":0,"value":"md`# Third Exercise on Observable`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"Alabama = FileAttachment(\"Alabama.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"county_features = topojson.feature(Alabama, Alabama.objects.Alabama1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"csv_data = d3.csvParse(await FileAttachment(\"Alabama.csv\").text(),({FIPS, AGE_5_9, POP2010}) => [FIPS, [+AGE_5_9, +AGE_5_9/+POP2010]])\n//This is the normalized variable I will be mapping. It was created by diving the population between 5-9 by the total population for each county in Alabama.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"childpct = Array.from(csv_data.values(), d => d[1][1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"data = Object.assign(new Map(csv_data), {title: [\"Percent Population of Alabama: between 5 & 9\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"md`# Classification: Natural Breaks`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"naturalbreaks = simple.ckmeans(childpct, YlOrBr.length).map(v => v.pop())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"md`# Color Scheme`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"YlOrBr = [d3.color(\"#fee391\"), d3.color(\"#fec44f\"), d3.color(\"#fe9929\"), d3.color(\"#d95f0e\"),d3.color(\"#993404\")]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"color = d3.scaleThreshold()\n .domain(naturalbreaks)\n .range(YlOrBr)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"md`# Creating a Canvas`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"width = 900","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"md`# Projecting a Map`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"projection = d3.geoTransverseMercator()\n .rotate([154, 0])\n .center([0, 62])\n .fitExtent([[80, 80], [width, height]], county_features);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"margin = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"path = d3.geoPath().projection(projection);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"md`# Creating a Choropleth Map`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"choropleth = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 15, width, height]);\n \n svg.append(\"g\")\n .attr(\"transform\", \"translate(360,20)\")\n .append(() => \n legend({\n color: color,\n title: data.title,\n width: 350,\n tickFormat: \".2f\"\n })\n );\n \n svg.append(\"g\")\n .selectAll(\"path\")\n .data(county_features.features)\n .join(\"path\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 0.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"fill\", d => color(data.get(+d.properties.FIPS)[1]))\n .attr(\"d\", path)\n .append(\"title\")\n .text(d => format(data.get(+d.properties.FIPS)[1] + \"%\"));\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"format = d => `${d}%`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`# Annex`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"function numericSort(x) {\n return (\n x\n // ensure the array is not changed in-place\n .slice()\n // comparator function that treats input as numeric\n .sort((a, b) => a - b)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"function chart(data, scale) {\n const w = 30,\n cols = Math.floor(Math.min(600, width) / w),\n lines = Math.ceil(100 / cols);\n const chart = d3\n .create(\"svg\")\n .attr(\"width\", cols * w)\n .attr(\"height\", lines * w);\n\n chart\n .append(\"g\")\n .attr(\"transform\", \"translate(2,2)\")\n .attr(\"style\", \"stroke:black; fill:white;\")\n .selectAll(\"rect\")\n .data(data)\n .join(\"rect\")\n .attr(\"width\", w - 3)\n .attr(\"height\", w - 3)\n .attr(\"x\", (_, i) => w * (i % cols))\n .attr(\"y\", (_, i) => w * ((i / cols) | 0))\n .style(\"fill\", d => (scale ? scale(d) : \"#ddd\"));\n return chart.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"simple = require(\"simple-statistics@7.0.7/dist/simple-statistics.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"