30:T43d,// https://github.com/d3/d3-scale-chromatic // We need to wrap it in return so that other notebook can import it; otherwise, it will show not declared // https://observablehq.com/@observablehq/import // Used in other notebook as import interpolateSequentialOptions = { return [ "interpolateBrBG", "interpolatePRGn", "interpolatePiYG", "interpolatePuOr", "interpolateRdBu", "interpolateRdGy", "interpolateRdYlBu", "interpolateRdYlGn", "interpolateSpectral", "interpolateBlues", "interpolateGreens", "interpolateGreys", "interpolateOranges", "interpolatePurples", "interpolateReds", "interpolateTurbo", "interpolateViridis", "interpolateInferno", "interpolateMagma", "interpolatePlasma", "interpolateCividis", "interpolateWarm", "interpolateCool", "interpolateCubehelixDefault", "interpolateBuGn", "interpolateBuPu", "interpolateGnBu", "interpolateOrRd", "interpolatePuBuGn", "interpolatePuBu", "interpolatePuRd", "interpolateRdPu", "interpolateYlGnBu", "interpolateYlGn", "interpolateYlOrBr", "interpolateYlOrRd", "interpolateRainbow", "interpolateSinebow" ] }31:[{"id":"321ca5ed58d2cdc77d5e89a9faed844e15d248a421694da394c5e20eb19241e035ed985c769f212bd531072e89282741bd940c702890c112e86d785d17aa0350","href":"https://static.observableusercontent.com/files/321ca5ed58d2cdc77d5e89a9faed844e15d248a421694da394c5e20eb19241e035ed985c769f212bd531072e89282741bd940c702890c112e86d785d17aa0350","name":"barley.csv","type":"text/csv","lastModified":1691114803429.912,"size":3831}] 2e:{"title":"D3 Functions","cells":[{"id":0,"value":"# D3 Functions","pinned":false,"hidden":false,"mode":"md"},{"id":178,"value":"## d3-array\n\nhttps://github.com/d3/d3-array","pinned":false,"hidden":false,"mode":"md"},{"id":224,"value":"### Get array last element","pinned":false,"hidden":false,"mode":"md"},{"id":226,"value":"// https://stackoverflow.com/questions/3216013/get-the-last-item-in-an-array\nfunction d3_last(array) {\n return array[array.length-1];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"### union()","pinned":false,"hidden":false,"mode":"md"},{"id":181,"value":"d3.union([2, 1, 4], [3, 5, 1, 2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"### index()","pinned":false,"hidden":false,"mode":"md"},{"id":193,"value":"sampleData = [\n {name: \"jim\", amount: \"34.0\", date: \"11/12/2015\"},\n {name: \"carl\", amount: \"120.11\", date: \"11/12/2015\"},\n {name: \"stacy\", amount: \"12.01\", date: \"01/04/2016\"},\n {name: \"stacy\", amount: \"34.05\", date: \"02/04/2016\"}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"d3.index(sampleData, d => d.amount)","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"// d3.index(sampleData, d => d.name) // Error: duplicate key\nd3.index(sampleData, d => d.name, d => d.date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"## leastIndex() least()\nhttps://observablehq.com/@d3/d3-least","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"d3.leastIndex([2, 4, 1, 5, 6])","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3.least([2, 4, 1, 5, 6])","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"## zip()","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"d3.zip([1, 2, 3], [4, 5, 6])","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"## group(), rollup(), index()\nhttps://observablehq.com/@d3/d3-group","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"athletes = [\n {name: \"Floyd Mayweather\", sport: \"Boxing\", nation: \"United States\", earnings: 285},\n {name: \"Lionel Messi\", sport: \"Soccer\", nation: \"Argentina\", earnings: 111},\n {name: \"Cristiano Ronaldo\", sport: \"Soccer\", nation: \"Portugal\", earnings: 108},\n {name: \"Conor McGregor\", sport: \"MMA\", nation: \"Ireland\", earnings: 99},\n {name: \"Neymar\", sport: \"Soccer\", nation: \"Brazil\", earnings: 90},\n {name: \"LeBron James\", sport: \"Basketball\", nation: \"United States\", earnings: 85.5},\n {name: \"Roger Federer\", sport: \"Tennis\", nation: \"Switzerland\", earnings: 77.2},\n {name: \"Stephen Curry\", sport: \"Basketball\", nation: \"United States\", earnings: 76.9},\n {name: \"Matt Ryan\", sport: \"Football\", nation: \"United States\", earnings: 67.3},\n {name: \"Matthew Stafford\", sport: \"Football\", nation: \"United States\", earnings: 59.5}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"### group()","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"atheletesBySport = d3.group(athletes, d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"\n \n \n \n ${Array.from(atheletesBySport, ([key, values]) => html`\n \n \n \n `)}\n \n

Sport	Athletes
${key}	${values.map(d => d.name).join(\", \")}

","pinned":false,"hidden":false,"mode":"html"},{"id":56,"value":"d3.group(athletes, d => d.nation, d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"### groups()\nReturn a array instead of a map","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"d3.groups(athletes, d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"d3.groups(athletes, d => d.nation, d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"### flatGroup()","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"d3.flatGroup(athletes, d => d.nation, d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"### rollup()","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"d3.rollup(athletes, v => v.length, d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"d3.rollups(athletes, v => v.length, d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"d3.rollup(athletes, v => d3.sum(v, d => d.earnings), d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"d3.flatRollup(athletes, v => v.length, d => d.nation ,d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"d3.rollup(athletes, v => v.length, d => d.nation, d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"d3.greatest(d3.rollup(athletes, v => d3.sum(v, d => d.earnings), d => d.sport), ([sport, total]) => total) // sport can be removed","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"d3.least(d3.rollup(athletes, v => d3.sum(v, d => d.earnings), d => d.sport), ([, total]) => -total)","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"d3.group(athletes, d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"d3.greatest(d3.group(athletes, d => d.sport), ([, v]) => d3.sum(v, d => d.earnings))","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"## groupSort()\nhttps://observablehq.com/@d3/d3-groupsort","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"barley = FileAttachment(\"barley.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"d3.groups(barley, d => d.variety)","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"d3.rollups(barley, group => d3.median(group, d => d.yield), d => d.variety)","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"d3.rollups(barley, group => d3.median(group, d => d.yield), d => d.variety)\n .sort(([, a], [, b]) => d3.ascending(a, b))","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"d3.rollups(barley, group => d3.median(group, d => d.yield), d => d.variety)\n .sort(([, a], [, b]) => d3.ascending(a, b))\n .map(([key]) => key)","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"d3.groupSort(barley, group => d3.median(group, d => d.yield), d => d.variety)","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"d3.groupSort(barley, (group1, group2) => d3.ascending(d3.median(group1, d => d.yield), d3.median(group2, d => d.yield)), d => d.variety)","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"## bisect()\nhttps://observablehq.com/@d3/d3-bisect","pinned":false,"hidden":false,"mode":"md"},{"id":126,"value":"cents = d3.ticks(0, 10, 1000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"index = d3.bisect(cents, Math.PI)","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"[cents[index-1], cents[index]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"## Transform\n### d3-merge\nhttps://d3js.org/d3-array/transform#merge","pinned":false,"hidden":false,"mode":"md"},{"id":230,"value":"array1 = [{name: 'John', income: 100}, {name: 'Alex', income: 200}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"array2 = [{name: 'Sophie', income: 150}, {name: 'Mary', income: 250}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"d3.merge([array1, array2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"## Color","pinned":false,"hidden":false,"mode":"md"},{"id":159,"value":"### Categorical","pinned":false,"hidden":false,"mode":"md"},{"id":164,"value":"Object.keys(d3).filter(d => d.startsWith(\"scheme\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"// https://d3js.org/d3-scale-chromatic/categorical\n// Used in other notebook as import\n// Note that if you have catergorical variables number larger than the number of colors provided, then it will repeat.\ninterpolateCategoricalOptions = [\n \"schemeCategory10\", \"schemeAccent\", \"schemeDark2\", \"schemePaired\", \n \"schemePastel1\", \"schemePastel2\",\n \"schemeSet1\", \"schemeSet2\", \"schemeSet3\",\n \"schemeTableau10\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"### Sequential","pinned":false,"hidden":false,"mode":"md"},{"id":149,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"## Format","pinned":false,"hidden":false,"mode":"md"},{"id":172,"value":"// Used in other notebooks as imports\nformatDecimal = d3.format(\",.3f\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"// Used in other notebooks as imports\nformatDate = d3.timeFormat(\"%Y-%m-%d\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"## Collection","pinned":false,"hidden":false,"mode":"md"},{"id":202,"value":"// Used in other notebooks as imports\n// https://stackoverflow.com/questions/28572015/how-to-select-unique-values-in-d3-js-from-data\nfunction d3_unique(collection, accessor) {\n return [...new Set(d3.map(collection, accessor))];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":207,"value":"d3_unique([{a: 2, b:1}, {a: 3, b: 2}, {a: 2, b: 4}, {a: 3, b: 1}], d => d.a)","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"## d3-geo","pinned":false,"hidden":false,"mode":"md"},{"id":214,"value":"// Used in other notebooks as imports\n\n// See: https://observablehq.com/@d3/world-map-svg\n// https://www.npmjs.com/package/d3-geo\n// https://www.npmjs.com/package/d3-geo-projection\n\n// Renaming to avoid collapsing original namespace\nd3geo = require(\"d3-geo@2\", \"d3-geo-projection@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"// Used in other notebooks as imports\n// Exclude those without fitSize function\nprojectionOptions = Object.keys(d3geo).filter(function(d) {\n if (!d.startsWith('geo')) return false;\n try {\n new d3geo[d]();\n d3geo[d]()['fitSize'];\n if (typeof d3geo[d]()['fitSize'] !== 'function') return false;\n } catch (err) {\n return false;\n }\n return true;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"// Used in other notebooks as imports\n// https://gist.github.com/cpbotha/5200394\nfunction appendDropShadow(svg) {\n var defs = svg.append(\"defs\");\n\n var filter = defs.append(\"filter\")\n .attr(\"id\", \"drop-shadow\")\n .attr(\"height\", \"150%\");\n\n filter.append(\"feGaussianBlur\")\n .attr(\"in\", \"SourceAlpha\")\n .attr(\"stdDeviation\", 2)\n .attr(\"result\", \"blur\");\n\n filter.append(\"feOffset\")\n .attr(\"in\", \"blur\")\n .attr(\"dx\", 1)\n .attr(\"dy\", 1)\n .attr(\"result\", \"offsetBlur\");\n\n var feMerge = filter.append(\"feMerge\");\n\n feMerge.append(\"feMergeNode\")\n .attr(\"in\", \"offsetBlur\")\n feMerge.append(\"feMergeNode\")\n .attr(\"in\", \"SourceGraphic\");\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"## Observable specific","pinned":false,"hidden":false,"mode":"md"},{"id":134,"value":"### Log","pinned":false,"hidden":false,"mode":"md"},{"id":136,"value":"import {log, consoleHook} from '@sorig/console-log-without-leaving-your-notebook'","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"{\n consoleHook;\n console.log(1);\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}