2e:null 2f:["$","title",null,{"children":"Second Exercise on Observable: Classification and Colors | falakjalali | 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":"d9655c2e025f1066fca8256a21619f695f49ae6ee9b7df095731029d6dcf35bec3c45d3b26295cc69e10e89c1cef7232b66c41a71b2063f088aacb78bcb56f34","href":"https://static.observableusercontent.com/files/d9655c2e025f1066fca8256a21619f695f49ae6ee9b7df095731029d6dcf35bec3c45d3b26295cc69e10e89c1cef7232b66c41a71b2063f088aacb78bcb56f34","name":"Education_Himachal_Pradesh.json","type":"application/json","lastModified":1614534450363.148,"size":143399},{"id":"3f06573117677f2b3d2a8d01f4acfa02ada972a1120cd5ba37f73724cd6c52938f45a392424cd4635f5c5b7632ad9f07cd8f27c412685fa87b54b9765ef4f2ee","href":"https://static.observableusercontent.com/files/3f06573117677f2b3d2a8d01f4acfa02ada972a1120cd5ba37f73724cd6c52938f45a392424cd4635f5c5b7632ad9f07cd8f27c412685fa87b54b9765ef4f2ee","name":"Education_Himachal_Pradesh-2-2.csv","type":"text/csv","lastModified":1614633716898.04,"size":3315}] 32:{"id":"3587e7f83a548356","slug":"second-exercise-on-observable-classification-and-colors","title":"Second Exercise on Observable: Classification and Colors","thumbnail":"4c50d000bbd7440a0a9e51017508a204430424f6faf6a632790a164112c5ddf2","access_level":"public","create_time":"$D2021-02-28T08:05:26.124Z","update_time":"$D2021-03-06T04:40:21.651Z","view_time":null,"first_public_time":"$D2021-02-28T19:52:57.244Z","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":"7bc7ae4529df01f8","login":"falakjalali","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3221eabe1fe7e7ff516b7ce0c6577ea7fa5e9cff937768055dbf29289dc6f8be","tier":"starter_2024"},"version":557,"publish_version":557,"role":null,"authored":false,"authors":[{"type":"individual","id":"df8327bdad75018c","login":"falakjalali","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3221eabe1fe7e7ff516b7ce0c6577ea7fa5e9cff937768055dbf29289dc6f8be","tier":null}],"members":[{"type":"individual","id":"df8327bdad75018c","login":"falakjalali","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3221eabe1fe7e7ff516b7ce0c6577ea7fa5e9cff937768055dbf29289dc6f8be","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":"districts = FileAttachment(\"Education_Himachal_Pradesh.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"districts_features = topojson.feature(districts, districts.objects.Education_Himachal_Pradesh)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"csv_data = d3.csvParse(await FileAttachment(\"Education_Himachal_Pradesh-2-2.csv\").text(),({objectid, district_n, female_n, male_n, population}) => [+objectid,[+female_n,+female_n/population]])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"femalepct = 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":"mydata = Object.assign(new Map(csv_data), {title: [\"Female population density in each district\"]})","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":434,"value":"d3.min(femalepct)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"d3.max(femalepct)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"chart(femalepct)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"//Uses raw data. Takes the minimum value and maximum value. Define a colour to each min and max value the rest value,in between, will be interpolated and a color will be assogned to them in a sequestration manner. The classification is named \"unclassed\" and \"d3.scaleLinear()\" will create the unclassed map. The domain is entered which is the input value here \"d3.extent(femalepct)\" takes the min and max value in the data set. The range defines the no. of classes which is depicted by the no. of visual variables which is color in this case. The visual variable is given to the min and max value and the rest of the values are interpolated by itself.//","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"unclassed = d3.scaleLinear()\n .domain(d3.extent(femalepct))\n .range([\"#e0ecf4\", \"#8856a7\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"chart(numericSort(femalepct), unclassed)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"//Colours are chosen through colorbrewer.org. The selection depends on the type of data you want to map. Is it ordinal, binary, sequential or divergent. Here the range is the no. of classes which is determined by the no. of colours input. If same colors are to be input for each classification. You can create a name for the list of colors. So instead of repeating each colour you can enter the name and that will have the list of colors embedded in it//","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"bupu=[\"#e0ecf4\", \"#9ebcda\", \"#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":529,"value":"//Quantile data is rank-ordered and puts equal number of observation in each bin. Name the classification and use \"d3.scaleQuantile() to create a quantile map the domain the add the femalepct array. Define the range. It will chart the femalepct in quantile function//","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"quantile = d3.scaleQuantile()\n .domain(femalepct)\n .range(bupu)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"chart(numericSort(femalepct), 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":551,"value":"//Natural breaks is to minimise the difference within classes and maximize the the difference between classes. In this the commande gives you the natural breaks depending on the length/class you define. First naturalbreaks are identified. Here \"ckmeans\" clustering of the input data and the class - here defined as the colour length, which is another way of deterining no. of classes in observable. Then the classification is name \"jenks\" and in the domain the input value is naturalbreaks and the range is defined in this case \"bupu\" because the list was already created//","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"naturalbreaks = simple.ckmeans(femalepct,bupu.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(bupu)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"chart(numericSort(femalepct), 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":486,"value":"d3.extent(femalepct)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"quantize = d3.scaleQuantize()\n .domain(d3.extent(femalepct))\n .range(bupu)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"chart(numericSort(femalepct), 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":522,"value":"////Equal internal is the width that each class occupies along the number line or the each class occupies the same steps along the no. line. Steps are decided by dividing the range of the data by the number of class. The upper limit is detemined by adding the class interval to the lowest value in the data. Here the range of my data is .47 and divide that by the no. of class = 3, which gives me = .15. I add .15 to the lowest value which is .05 = .2, which is now the upper limit for class/bin 1. add .15 to .2 = .35, which is the upper limit for my class 2. Add .15 to .32 = .50 which should be the upper limit for class 3 but since I have values till .52 my upper limit for my last class ends at .53.//","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"// On observale you name the classification method in this case 'threshold' which is manual equal interval.\"d3.scale.Threshold()\" will create the threshold map - this is the code, which will take the input of value and the colour and map them over each other. Domain is the values of your class, in this case the upper limit of your bins/classes. The square brackets makes it a list of values. No. of classes are defined by the no. of visual variables meantioned in the range. If you need three classes then mention three colors/visual variables and so on.// ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"threshold = d3.scaleThreshold()\n .domain([0.20, 0.35, 0.53])\n .range(bupu)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"chart(numericSort(femalepct), threshold)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"//No. of classes are determined by understandin the goodness of absolute deviatoion (GADF). How different is the value of that observation from the median of that class and from the difference of the other class and the entire data set as well. GADF = 1 - (The sum of absolute deviation of the class median)'(sum of absolute deviation from the entire data set). Comparing how different the observation is from the median of the entire data set. Divide the class median to the deviation of the entire data set. FOr each class you get a percentage which is the goodness of absolute deviation fit. The sum of absolute deviation from the class median should be minimum. Which ever class break has the mimimum that is how the No. of classes are determined.//","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"showScaleGrouping(femalepct, {\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"