2e:null 2f:["$","title",null,{"children":"Second Exercise on Observable: Classification and Colors | Caglar Koylu | 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":"58cd3f851324a51f962266b4a292da5d056f8a2b7526f03a6fcb3fd0edae02e8d778bd4033202bd58d01b9094a5cb329becca036d04f2ba433a6985960fb79e2","href":"https://static.observableusercontent.com/files/58cd3f851324a51f962266b4a292da5d056f8a2b7526f03a6fcb3fd0edae02e8d778bd4033202bd58d01b9094a5cb329becca036d04f2ba433a6985960fb79e2","name":"cb_2018_us_ua10_500k.csv","type":"text/csv","lastModified":1614979015016.741,"size":226178},{"id":"3bacc0401878bd8a0c92b90bb6d26c0bb8e21378025f35641a675e9f8d49f56ffd114eae6d15b5c5c12026ec7e094c3172b8f16ae048d2ee950a154928ca8f09","href":"https://static.observableusercontent.com/files/3bacc0401878bd8a0c92b90bb6d26c0bb8e21378025f35641a675e9f8d49f56ffd114eae6d15b5c5c12026ec7e094c3172b8f16ae048d2ee950a154928ca8f09","name":"us_counties.json","type":"application/json","lastModified":1614979015016.741,"size":1174202}] 32:{"id":"259505b674eac984","slug":"second-exercise-on-observable-classification-and-colors","title":"Second Exercise on Observable: Classification and Colors","thumbnail":"4c865228d10e3c9d1899f3c35552fa45b36c2c58ad0152bb3a98b22d071c1374","access_level":"public","create_time":"$D2021-03-05T21:16:55.016Z","update_time":"$D2021-03-05T21:29:52.620Z","view_time":null,"first_public_time":"$D2021-03-05T21:30:35.552Z","has_unpublished_edits":null,"fork":{"id":"174d5785321c46ef","slug":"second-exercise-on-observable-classification-and-colors","title":"Second Exercise on Observable: Classification and Colors","owner":{"id":"59fc5950a5fd30d7","login":"igarza02","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"1522f7962f5f1185","login":"caglarkoylu","name":"Caglar Koylu","avatar_url":"https://avatars-next.observableusercontent.com/94b0c40bf8a6b04057088ea171864451b3e3b27b7346d866d2a7be21d077be76","tier":"starter_2024"},"version":480,"publish_version":480,"role":null,"authored":false,"authors":[{"type":"individual","id":"60e9af384dfce94c","login":"caglarkoylu","name":"Caglar Koylu","avatar_url":"https://avatars-next.observableusercontent.com/94b0c40bf8a6b04057088ea171864451b3e3b27b7346d866d2a7be21d077be76","tier":null}],"members":[{"type":"individual","id":"60e9af384dfce94c","login":"caglarkoylu","name":"Caglar Koylu","avatar_url":"https://avatars-next.observableusercontent.com/94b0c40bf8a6b04057088ea171864451b3e3b27b7346d866d2a7be21d077be76","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"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":"US_counties = FileAttachment(\"us_counties.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"county_features = topojson.feature(US_counties, US_counties.objects.us_counties)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"csv_data = d3.csvParse(await FileAttachment(\"cb_2018_us_ua10_500k.csv\").text(),({ GEOID10, AWATER10, ALAND10}) => [GEOID10, +AWATER10/((+AWATER10)+(+ALAND10))])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"urbanarea = Array.from(csv_data.values(), d => d[1]).filter(d => d != Infinity) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"perurban = Object.assign(new Map(csv_data), {title: [\"County\", \"Area of Land and Water in US Counties\"]})","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()\n .domain([d3.min(urbanarea),d3.max(urbanarea)])\n .range([\"#e0ecf4\", \"#8856a7\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"chart(numericSort(urbanarea), linear)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"mycolors = [\"#e0ecf4\", \"#99d594\", \"#8856a7\"]","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()\n .domain(urbanarea)\n .range(mycolors)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"chart(numericSort(urbanarea), 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(urbanarea, mycolors.length).map(v => v.pop())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"jenks = d3\n .scaleThreshold()\n .domain(naturalbreaks)\n .range(mycolors)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"chart(numericSort(urbanarea), 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()\n .domain([d3.min(urbanarea),d3.max(urbanarea)])\n .range(mycolors)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"chart(numericSort(urbanarea), quantize)","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.05, 0.1, 0.2, ,d3.max(urbanarea)])\n .range(mycolors)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"chart(numericSort(urbanarea), threshold)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"showScaleGrouping(urbanarea, {\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"