2d:null 2e:["$","title",null,{"children":"From Points to Histogram | Khris Griffis | Observable"}] 33:T850,containers = () => { const svg = d3.select(DOM.svg(width,height)).style("overflow", "visible"); //SVG filter for the gooey effect //Code taken from http://tympanus.net/codrops/2015/03/10/creative-gooey-effects/ const defs = svg.append("defs"); var filter = defs.append('filter').attr('id','gooey'); filter.append('feGaussianBlur') .attr('in','SourceGraphic') .attr('stdDeviation', config.radius * 2) .attr('result','blur'); filter.append('feColorMatrix') .attr("class", "blurValues") .attr('in','blur') .attr('mode','matrix') .attr('values', '1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 ' + config.radius +' -6') .attr('result','gooey'); filter.append("feComposite") .attr("class", "blender") .attr("in", "SourceGraphic") .attr("in2", "gooey") .attr("operator", "arithmetic") .attr("k1","0") .attr("k2","1") .attr("k3","0") .attr("k4","0"); // histogram canvas const histgroup = svg.node() .appendChild( DOM.element( "svg:foreignObject", { x:0, y:hist.dims.yp, width:width, height:hist.dims.h } ) ); const ctx = DOM.context2d( width, hist.dims.h ); const cv = ctx.canvas; //margin [t,r,b,l] d3.select(cv) .style("margin", `0px ${margin.right}px 0px ${margin.left}px` ) .attr("class", "canvas-container"); histgroup.appendChild(cv); const h = d3.select(histgroup); // Axes const ax1 = svg.append("g") .attr("class", "xaxis") .attr("transform", `translate(${margin.left-1},${height-margin.bottom})`) .call(d3.axisBottom(x)); // Bin Lines const binlines = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`) .attr("class", "lines") .style("isolation", "isolate"); // Points const circles = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`) .attr("class", "shapes") .style("isolation", "isolate") .style("filter", "url(#gooey)"); return {x:ax1,s:circles,b:binlines,h:h,cx:ctx,cv:cv,svg:svg} }34:T4c9,hist = { const dims = { yp: (height-margin.bottom+margin.top)/2, xp: margin.left, w: width-margin.right-margin.left, h:height-margin.bottom - (height-margin.bottom+margin.top)/2 }; // get the X data const vals = data.map( d => d.x ); const thrs = d3.axisBottom(x).scale().ticks(); const nBins = thrs.length-1; const membership = d3.range(nBins).map ( bin => { return { id:bin, indices:vals.map( (v,i) => { let test = !bin ? (d => d >= thrs[bin] && d <= thrs[bin+1]) : (d => d > thrs[bin] && d <= thrs[bin+1]); return test(v) ? i : ''; } ).filter(String), color: groupColors(bin) }; }); // Use the current tick marks as the boundaries for the histogram const h = d3.histogram() .domain(x.domain()) .thresholds(d3.axisBottom(x).scale().ticks()); const bins = h(vals); const counts = bins.map( bin => bin.length); const scale = d3.scaleLinear([0,d3.max(counts)], [dims.h,0]).nice(); return { dims: dims, count: counts, bins: bins, nUsedBins: counts.filter( d => d.length > 0).length, edges: thrs, members: membership, scale: scale, fx: h }; }35:[] 31:{"id":"cfd3b33244463f2f","slug":"from-points-to-histogram","title":"From Points to Histogram","thumbnail":"4222a54342f411eb5511880a066e4709638d5170e92ca491921e09a11fd502c5","access_level":"public","create_time":"$D2019-06-04T04:56:51.041Z","update_time":"$D2023-04-14T19:15:20.809Z","view_time":null,"first_public_time":"$D2019-07-03T19:41:09.569Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"22e692495fe9cf27","login":"khlick","name":"Khris Griffis","avatar_url":"https://avatars-next.observableusercontent.com/cf292a07d0a4a35dc630260f74dcebe58301d5ecf0babe1b1150762beb1336cb","tier":"starter_2024"},"version":1523,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bb90f6c4f06742e0","login":"khlick","name":"Khris Griffis","avatar_url":"https://avatars-next.observableusercontent.com/cf292a07d0a4a35dc630260f74dcebe58301d5ecf0babe1b1150762beb1336cb","tier":null}],"members":[{"type":"individual","id":"bb90f6c4f06742e0","login":"khlick","name":"Khris Griffis","avatar_url":"https://avatars-next.observableusercontent.com/cf292a07d0a4a35dc630260f74dcebe58301d5ecf0babe1b1150762beb1336cb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"From Points to Histogram","cells":[{"id":0,"value":"md`\n# From Points to Histogram\n\nA fragment-animated construction of a histogram.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"viewof reset = {\n let form = html``;\n form.reset.onclick = event => {\n event.preventDefault(); // Don’t submit the form.\n form.dispatchEvent(new CustomEvent(\"input\"));\n init();\n };\n return form\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"viewof viewbins = {\n const form = html``;\n form.viewbins.onclick = (event) => {\n event.preventDefault(); // Don’t submit the form.\n form.dispatchEvent(new CustomEvent(\"input\"));\n drawBins();\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"viewof group = {\n const form = html`

`;\n form.blobify.onclick = event => {\n event.preventDefault(); // Don’t submit the form.\n form.dispatchEvent(new CustomEvent(\"input\"));\n transitionGoo(1000);\n };\n form.unblob.onclick = event => {\n event.preventDefault(); // Don’t submit the form.\n form.dispatchEvent(new CustomEvent(\"input\"));\n transitionGooBack(750);\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"viewof go = {\n const form = html`

`;\n form.grow.onclick = event => {\n event.preventDefault(); // Don’t submit the form.\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"chart = {\n return CTR.svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1472,"value":"CTR = containers();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1416,"value":"doGrow = {\n grow;\n const a = growBars(45);\n return a;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"svg_bak= {\n const s = d3.select(DOM.svg(width,height)).style(\"overflow\", \"visible\");\n s.remove();\n //SVG filter for the gooey effect\n\t//Code taken from http://tympanus.net/codrops/2015/03/10/creative-gooey-effects/\n const defs = s.append(\"defs\");\n var filter = defs.append('filter').attr('id','gooey');\n filter.append('feGaussianBlur')\n .attr('in','SourceGraphic')\n .attr('stdDeviation', config.radius * 2)\n .attr('result','blur');\n filter.append('feColorMatrix')\n .attr(\"class\", \"blurValues\")\n .attr('in','blur')\n .attr('mode','matrix')\n .attr('values', '1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 ' + config.radius +' -6')\n .attr('result','gooey');\n filter.append(\"feComposite\")\n .attr(\"class\", \"blender\")\n .attr(\"in\", \"SourceGraphic\")\n .attr(\"in2\", \"gooey\")\n .attr(\"operator\", \"arithmetic\")\n .attr(\"k1\",\"0\")\n .attr(\"k2\",\"1\")\n .attr(\"k3\",\"0\")\n .attr(\"k4\",\"0\");\n // .attr(\"operator\", \"over\");\n return []\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"init = () => {\n CTR.cv.remove();\n const minDist = d3.min(data.map( d => calculateDistance(d,[d.x,0])));\n const dots = CTR.s;\n dots.append(\"g\")\n .attr(\"class\",\"circon\")\n .attr(\"opacity\", 1)\n .selectAll(\"circle\")\n .data(data)\n .enter().append(\"circle\")\n .attr(\"class\", \"small-circle\")\n .attr(\"r\", config.radius)\n .attr(\"cx\", (d, i) => x(d.x))\n .attr(\"cy\", (d, i) => height-margin.bottom-config.radius)\n .attr(\"fill\", d => d.color)\n .attr(\"opacity\", \"1\")\n .transition()\n .duration(700)\n .delay((d,i) => (calculateDistance(d,[d.x,0])-minDist)*3+250)\n .ease(t => d3.easeElasticOut(t,0.8,0.3))\n .attr(\"cx\", d => x(d.x))\n .attr(\"cy\", d => y(d.y));\n // .style(\"mix-blend-mode\",\"hue\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"function * growBars(n=45) {\n const ctx = CTR.cx;\n const inds = d3.range(hist.count.length);\n const rangeFcn = d3.interpolate(hist.dims.h,hist.scale(d3.max(hist.count)));\n\n for (const g of grower(n)) {\n yield g.then((yMax) => {\n ctx.clearRect(0,0,hist.dims.w,hist.dims.h);\n ctx.lineWidth = 1;\n ctx.strokeStyle = \"black\";\n inds.forEach( i => {\n let currentBin = hist.bins[i];\n let currentHeight = d3.max([yMax,hist.scale(currentBin.length)]);\n let currentWidth = Math.abs(x(currentBin.x1)-x(currentBin.x0));\n if (currentWidth > 0) {\n ctx.save();\n // if colorize, use hist.members[i].color, otherwise use d.color\n ctx.fillStyle = hist.members[i].color;\n ctx.beginPath();\n ctx.rect(x(currentBin.x0),currentHeight,currentWidth,hist.scale(0));\n ctx.fill();\n ctx.restore();\n }\n });\n return ctx.canvas;\n });\n \n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"collectPoints = () => {\n //transitionGoo(1000);\n for (var i = 0; i < 64; ++i) simulation.tick();\n const dgr = dodger(config.radius*2+pad);\n // Transition points to a hist-like pile\n d3.selectAll(\".small-circle\")\n .transition()\n .duration(600)\n .ease(d3.easeBounce)\n .on(\"end\", growBars)\n .delay((d,i) => calculateDistance(d,[d.x,0])/10)\n .attr(\"cx\", d => x(d.x))\n .attr(\"cy\", d => height - margin.bottom - dgr(x(d.x)) - config.radius - pad)\n // Grab the circle container and fade the opacity as an independent transition\n d3.select(\".circon\")\n .transition()\n .duration(600)\n .delay(height*2 + Math.sqrt(n/10))\n .attr(\"opacity\", 0);\n // grow histogram\n growBars();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"groupPoints = (flag) => {\n // select points and transition color\n d3.selectAll(\".small-circle\")\n .transition()\n .duration(300)\n .style(\"fill\", (d,i) => {return (flag ? colors[i] : d.color)} );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"drawBins = () => {\n const lineGen = d3.line()\n .defined( d => !isNaN(d))\n .x(d => x(d) )\n .y((d,i) => y(domain[i]) );\n \n const lns = CTR.b.append(\"g\")\n .attr(\"class\", \"bin-lines\")\n .attr(\"opacity\",1)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#727272\")\n .attr(\"stroke-width\", 1.2)\n .attr(\"stroke-dasharray\",\"9,4\")\n .selectAll(\"path\")\n .data(hist.edges.map( d => [d,d] ))\n .enter().append(\"path\")\n .attr(\"d\", d => lineGen(d));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"n = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"pad = 0.25;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"offset = 17","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"domain = [0,20];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"margin = ({top: 0, right: 10, bottom: 20, left: 10});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"config = ({\n radius: 4,\n gridLength: 10,\n gridPadding: 10\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"x = {\n let xs = data.map(d => d.x);\n return d3.scaleLinear(d3.extent(xs), [0, width - margin.right-margin.left]).nice();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"y = {\n // let ys = data.map(d => d.y);\n // return d3.scaleLinear(d3.extent(ys), [height - margin.bottom,margin.top]).nice();\n return d3.scaleLinear(domain, [height - margin.bottom,margin.top]).nice();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"dodger = rd => {\n const radius2 = rd ** 2;\n const bisect = d3.bisector(d => d.x);\n const circles = [];\n return x => {\n const l = bisect.left(circles, x - rd);\n const r = bisect.right(circles, x + rd, l);\n let y = 0;\n for (let i = l; i < r; ++i) {\n const {x: xi, y: yi} = circles[i];\n const x2 = (xi - x) ** 2;\n const y2 = (yi - y) ** 2;\n if (radius2 > x2 + y2) {\n y = yi + Math.sqrt(radius2 - x2) + 1e-6;\n i = l - 1;\n continue;\n }\n }\n circles.splice(bisect.left(circles, x, l, r), 0, {x, y});\n return y;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"calculateDistance= (d, point) => {\n return Math.sqrt(Math.pow(x(point[0]) - x(d.x), 2) + Math.pow(y(point[1]) - y(d.y), 2))\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"transitionGoo = (duration) => {\n d3.selectAll(\".blurValues\")\n .transition().duration(duration)\n .attrTween(\"values\", function() {\n return d3.interpolateString(\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 \" + config.radius + \" -7\", \n \"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 \" + config.radius * 20 + \" -7\"); \n });\n d3.selectAll(\".blender\")\n .transition().duration(duration*0.6)\n .attrTween(\"k2\", () => d3.interpolateString(\"1\",\"0\"))\n .attrTween(\"k3\",() => d3.interpolateString(\"0\",\"1\") );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"transitionGooBack = (duration) => {\n d3.selectAll(\".blurValues\")\n .transition().duration(duration)\n .attrTween(\"values\", function() {\n return d3.interpolateString(\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 \" + config.radius * 20 + \" -7\", \n \"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 \" + config.radius + \" -7\"); \n });\n d3.selectAll(\".blender\")\n .transition().duration(duration*0.6)\n .attrTween(\"k2\", () => d3.interpolateString(\"0\",\"1\"))\n .attrTween(\"k3\", () => d3.interpolateString(\"1\",\"0\"));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"simulation = {\n const dgr = dodger(config.radius*2+pad);\n return d3.forceSimulation(data)\n .force(\"y\", d3.forceY().y(d => height - margin.bottom - dgr(x(d.x)) - config.radius - pad))\n .force(\"x\", d3.forceX().x(d => d.x).strength(0.1))\n .force('collide', d3.forceCollide(-config.radius).strength(0.05))\n\t\t.alphaDecay(0)\n\t\t.alpha(0.12)\n .stop();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1301,"value":"function * grower(nLoops) {\n const rangeFcn = d3.interpolate(hist.dims.h,hist.scale(d3.max(hist.count)));\n for (let i = 0; i <= nLoops; i++) {\n yield Promises.tick(1, rangeFcn(i/nLoops));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"groupColors = d3.scaleOrdinal(d3.schemeSet3);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"random = d3.randomNormal()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"shuffle = (array) => {\n // Shuffles array in place\n // modern version of the Fisher–Yates shuffle algorithm\n for (let i = array.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [array[i], array[j]] = [array[j], array[i]];\n }\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"randDat = {\n return Float64Array.from({length: n}, random);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"data = {\n const shufDat = Array.from(randDat);\n shuffle(shufDat);\n \n return d3.range(n).map( i => { return {x:randDat[i],y:shufDat[i]+offset,r:config.radius,color:\"steelblue\"} } )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"colors = data.map( (obj,idx) => {\n return hist.members.map( d => d.indices.indexOf(idx) !== -1 ? d.color : '').filter(String);\n });\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"md`\n# Testing\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"opacityFcn = d3.interpolateString('1', '0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"vals = d3.range(15).map( v => [v,(v**2 + v + 1)/((14)**2+(14)+1)])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"vals.map( d => opacityFcn(d[1]) )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"348/6","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"