2e:null 2f:["$","title",null,{"children":"Second Exercise on Observable: Classification and Colors | Dan Burleson | Observable"}] 34: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; }35:[{"id":"c9b0febd26f45222c71b07ded94407857a475f83465352f22e92d883752255380df0227bb60d8a92fbad7a006a3d1ff827eed0f0815de65ea241de2822d6bc31","href":"https://static.observableusercontent.com/files/c9b0febd26f45222c71b07ded94407857a475f83465352f22e92d883752255380df0227bb60d8a92fbad7a006a3d1ff827eed0f0815de65ea241de2822d6bc31","name":"census_2010_county_DP1.csv","type":"text/csv","lastModified":1614182604220.646,"size":7286},{"id":"3ecd1e1bee6d637612988f3d6415ac374007d7fc6d3b25b11f206d38ad092ca03e8ea8d5d3fe4d172f06abce9b72704f81818ebe882294d4303165ece4e4e567","href":"https://static.observableusercontent.com/files/3ecd1e1bee6d637612988f3d6415ac374007d7fc6d3b25b11f206d38ad092ca03e8ea8d5d3fe4d172f06abce9b72704f81818ebe882294d4303165ece4e4e567","name":"census_2010_county_DP1.json","type":"application/json","lastModified":1614182604622.565,"size":615147}] 32:{"id":"ab55b54df15ce9c8","slug":"second-exercise-on-observable-classification-and-colors","title":"Second Exercise on Observable: Classification and Colors","thumbnail":"990bc8bd94b77c95393fd3708c11a30981418c3e5788af168182d8b4eeba4f9d","access_level":"public","create_time":"$D2021-02-24T16:01:06.469Z","update_time":"$D2021-03-04T00:46:30.616Z","view_time":null,"first_public_time":"$D2021-02-26T19:50:41.830Z","has_unpublished_edits":null,"fork":{"id":"c68fb87dffeeb9bc","slug":"second-exercise-on-observable","title":"Second Exercise on Observable: Classification and Colors","owner":{"id":"22130e106df70095","login":"geoviz","name":"Geographic Visualization (GEOG 3540) - University of Iowa"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c6381656e677bb94","login":"dburleson98","name":"Dan Burleson","avatar_url":"https://avatars-next.observableusercontent.com/6aa5712f587a55b08797605fb361f3f59b63034d6c2506747c852cd64a062788","tier":"starter_2024"},"version":457,"publish_version":457,"role":null,"authored":false,"authors":[{"type":"individual","id":"fe5a0b6a7ba5a89d","login":"dburleson98","name":"Dan Burleson","avatar_url":"https://avatars-next.observableusercontent.com/6aa5712f587a55b08797605fb361f3f59b63034d6c2506747c852cd64a062788","tier":null}],"members":[{"type":"individual","id":"fe5a0b6a7ba5a89d","login":"dburleson98","name":"Dan Burleson","avatar_url":"https://avatars-next.observableusercontent.com/6aa5712f587a55b08797605fb361f3f59b63034d6c2506747c852cd64a062788","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Second Exercise on Observable: Classification and Colors","cells":[{"id":0,"value":"md`# Second Exercise on Observable: Classification and Colors`","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":"ia_counties = FileAttachment(\"census_2010_county_DP1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"ia_counties_features = topojson.feature(ia_counties, ia_counties.objects.census_2010_county_DP1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"csv_data = d3.csvParse(await FileAttachment(\"census_2010_county_DP1.csv\").text(),({GEOID10, NAMELSAD10, ALAND10, AWATER10, DP0010001}) => [GEOID10, NAMELSAD10, ALAND10, AWATER10, DP0010001, ALAND10 / DP0010001])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"land2pop = Array.from(csv_data.values(), d => d[5])","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: [\"Land Area within County to Population\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"md`# Linear Scale (Unclassed)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"linear = d3.scaleLinear() // define classification method\n .domain([d3.min(land2pop),d3.max(land2pop)]) // define top and bottom numerical values\n .range([\"white\", \"teal\"]) // define bottom level and top level colors to smooth across our values","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"chart(numericSort(land2pop), linear) // apply linear unclassed classifier just created on our land2pop array","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"md`# Quantile Classification`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"quantile = d3.scaleQuantile() // define classification mathod\n .domain(land2pop) // define what data (array) you will use\n .range([\"white\", \"#f7fcb9\", \"#addd8e\", \"#31a354\"]) // define colors (# of classes) used in your classes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"chart(numericSort(land2pop), quantile)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"md`# Jenks Natural Breaks Classification` ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"naturalbreaks = simple.ckmeans(land2pop, 3).map(v => v.pop()) // set number of breaks with the \"4\" argument","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"jenks = d3.scaleThreshold() // define classification method\n .domain(naturalbreaks) // define the data array you wish to use that includes the natural break points\n .range([\"#ffffb2\", \"#fecc5c\", \"#fd8d3c\", \"#e31a1c\"]) // define colors to be used for the classes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"chart(numericSort(land2pop), jenks)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"md`# Equal Interval Classification (Quantize)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"quantize = d3.scaleQuantize() // define classification method\n .domain([d3.min(land2pop),d3.max(land2pop)]) // define lower and upper limits to data\n .range([\"#feebe2\", \"#fbb4b9\", \"#f768a1\", \"#ae017e\"]) // define colors (# of classes) to be used for categories ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"chart(numericSort(land2pop), quantize)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"md`# --End of Assignment 2--`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"md`# Threshold`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"threshold = d3.scaleThreshold()\n .domain([0.06444582814445828, 0.09325355890241387, 0.12106180453143853])\n .range([\"white\", \"#99d594\", \"green\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"chart(numericSort(land2pop), threshold)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"showScaleGrouping(land2pop, {\n scaleQuantile: quantile,\n scaleThreshold: threshold,\n scaleJenks: jenks,\n scaleQuantize: quantize,\n scaleQuantizeNice: quantize.copy().nice()\n})","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":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"