2d:null 2e:["$","title",null,{"children":"jsgeoda Binning Classification Visualizer | Dylan | Observable"}] 33:T867,chart = { // based on https://observablehq.com/@d3/histogram const color = "steelblue" const height = 500 const margin = ({top: 20, right: 20, bottom: 30, left: 40}) const bins = d3.bin().thresholds(100)(data) const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const x = d3.scaleLinear() .domain([bins[0].x0, bins[bins.length - 1].x1]) .range([margin.left, width - margin.right]) const y = d3.scaleLinear() .domain([0, d3.max(bins, d => d.length)]).nice() .range([height - margin.bottom, margin.top]) const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(width / 80 ).tickSizeOuter(0)) .call(g => g.append("text") .attr("x", width - margin.right) .attr("y", -4) .attr("fill", "currentColor") .attr("font-weight", "bold") .attr("text-anchor", "end") .text(data.x)) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(height / 40)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 4) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y)) svg.append("g") .selectAll("rect") .data(bins) .join("rect") .attr("fill", d => breaks.length > 0 ? colorScale((d.x0+d.x1)/2) : color) .attr("x", d => x(d.x0) + 1) .attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1)) .attr("y", d => y(d.length)) .attr("height", d => y(0) - y(d.length)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); if (breaks.length > 0){ breaks.forEach((binBreak) => { svg.append("line") .attr("x1", x(binBreak)) //<<== change your code here .attr("y1", 0) .attr("x2", x(binBreak)) //<<== and here .attr("y2", height - margin.top - margin.bottom) .style("stroke-width", 1.5) .style("stroke", "darkgray") .style("fill", "none"); }) } return svg.node(); }34:[] 31:{"id":"0f97b031c186b01f","slug":"jsgeoda-binning-playground","title":"jsgeoda Binning Classification Visualizer","thumbnail":"077d5bbe45a00808c6b5bfee03d8be8680ee83fe05c4d7cf06b1d15caa429993","access_level":"public","create_time":"$D2021-06-07T18:16:14.396Z","update_time":"$D2022-08-17T21:31:28.603Z","view_time":null,"first_public_time":"$D2021-06-07T19:11:49.364Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"02a75d28143bf487","login":"nofurtherinformation","name":"Dylan","avatar_url":"https://avatars-next.observableusercontent.com/a494170e1e25c8f92f54468c30fecf4bcf81095a7268e37af8e633e7fd8d22ba","tier":"starter_2024"},"version":395,"publish_version":395,"role":null,"authored":false,"authors":[{"type":"individual","id":"54c23d6cacd69e20","login":"nofurtherinformation","name":"Dylan","avatar_url":"https://avatars-next.observableusercontent.com/a494170e1e25c8f92f54468c30fecf4bcf81095a7268e37af8e633e7fd8d22ba","tier":null}],"members":[{"type":"individual","id":"54c23d6cacd69e20","login":"nofurtherinformation","name":"Dylan","avatar_url":"https://avatars-next.observableusercontent.com/a494170e1e25c8f92f54468c30fecf4bcf81095a7268e37af8e633e7fd8d22ba","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"jsgeoda Binning Classification Visualizer","cells":[{"id":0,"value":"# jsgeoda Binning Classification Visualizer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"md`This notebook is an exploration of the different binning strategies available in jsgeoda, using a random normal distribution of data, or you can load in a CSV below the histogram. \n\nFor more on jsgeoda, visit [https://xunli.gitbook.io/jsgeoda/](https://xunli.gitbook.io/jsgeoda/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`## Select a bin mode:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"viewof binType = Inputs.select([\"naturalBreaks\", \"quantileBreaks\", \"percentileBreaks\", \"stddev_breaks\", \"hinge15Breaks\", \"hinge30Breaks\"], {value: 'naturalBreaks'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"md`${binType === 'eg. Quantile' ? '' : \n '\"'+descriptions[binType]+'\"'+ ' --Xun Li'+'

More at [jsgeoda docs](https://xunli.gitbook.io/jsgeoda/choropleth_map/1.-hello-jsgeoda)'\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"md`Select number of breaks:
\n(quantile and natural breaks only) \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"viewof k = binType === 'naturalBreaks' || binType === 'quantileBreaks' ? Inputs.range([5, 20], {step: 1, value: 5}) : Inputs.range([5, 20], {step: 1, value: 5, disabled: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"html`\n

\n ${\n colorBins.map(bin => `

`)\n }\n

\n ${\n breaks.map(bin => `

${Math.round(bin*10)/10}

`)\n }\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"md`### ${iterations.toLocaleString()} random generated data points. Or upload your own CSV!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"viewof customData = fileInput({\n initialUrl: '...'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"md`#### Select a CSV Column:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"viewof columnSelect = Inputs.select(['Choose a column', ...Object.keys(customCsv[0])], {value: 'Choose a column'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"md`#### Data Matters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"iterations = 1e4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"data = {\n let returnArray = []\n \n if (customCsv.length && columnSelect !== 'Choose a column') {\n for (let i=0; i