29:null 2a:["$","title",null,{"children":"Hexbin w/ Orbiting Slices | Mike Slattery | Observable"}] 2f:T5d0,viewof colors = { // learned from @danburzo and @philomenix and of course @jashkenas const form = html``; form.oninput = () => form.value = ['a','b','c','d','e','f','bgstroke'].reduce((acc, curr) => { acc[curr] = culori.formatter('rgb')(({ ...culori.rgb(form[curr].value), alpha: parseFloat(form[curr + '_alpha'].value) })) return acc; }, {}); form.oninput(); return form; }30:T157b,function createHexMini(data, hexaRadius=30){ var margin = ({top: 20, right: 20, bottom: 30, left: 40}) // Initial Geometrical Calculations var hexaRadius = hexaRadius, spaceBetweenHexa = 8, // Number of pixels of space between consecutive hexagons hexaWidth = hexaRadius * 2, // Calculates Width of the Hexagons with specified radius hexaHeight = hexaRadius * Math.sqrt(3), // Calculates Width of the Hexagons ... rows = 2, // Number of desired Rows cols = 2, // Number of desired Columns height = ((rows + 1/3) * (3/2 * hexaRadius)), // Calculates height of the window with given rows and r width = ((cols) * (Math.sqrt(3) * hexaRadius)); // Calculates width of ... var boxwidth = (((hexaRadius + spaceBetweenHexa) * 2.2667) * 2) //((hexaRadius * 2 * Math.sin(Math.PI / 3)) * 3); var boxheight = (((hexaRadius + spaceBetweenHexa) * 2.2667) * 2) //((hexaRadius * 3 / 2) * 3.5); var boxcenterX = width/2; var boxcenterY = height/2; var bgstrokeColor = colors.bgstroke; // getCenter works from hex position, not whole composition // getting center of the center hex to organize relative coords for clips, etc. var colx = 1; var rowx = 1; var valsx = getCenter(hexaRadius,rowx,colx); var hexbin = d3.hexbin() var fluff = 1.45; var svg = d3.create("svg") .attr("width",width * fluff) .attr("height",height * fluff) .attr("viewBox", [0, 0, width * fluff, height * fluff]) .attr("preserveAspectRatio", "xMinYMin meet") .attr("clip-path", "url(#outercircle)"); var filterDef = svg.append("defs") filterDef.append("clipPath") .attr("id", "clippy") .append("path") .attr("d", hexbin.hexagon((hexaRadius * 2.5) - spaceBetweenHexa)) .attr("transform-origin", valsx[0] + ' ' + valsx[1]) .attr("transform", "translate(" + valsx[0] + "," + valsx[1] + ")") .attr("clipPathUnits","objectBoundingBox"); svg.append('rect') .attr('x', 0) .attr('y', 0) .attr('width', width * fluff) .attr('height', height * fluff) .attr('fill', bgstrokeColor); var hexGroup = svg.append("g").attr("id", "hexg"); if (applyclip) { hexGroup.attr("clip-path", "url(#clippy)"); } hexGroup.attr("transform-origin", valsx[0] + ' ' + valsx[1]); //CIRCLE WITH BLEND HELPS WITH SINGLES //COULD HIT 0s with BLEND INSTEAD OR IN ADDITION. if (encircle){ var circcolor = culori.formatter('rgb')(culori.blend(spokes, mode, space)); var circorbit = hexGroup.append("g"); //2.3 gives us a snowflake thing... or 2.2666 using the blend biases nicely towards one side. circorbit.append('circle').attr('r', (hexaRadius + spaceBetweenHexa) * 2 ).attr('cx', valsx[0]).attr('cy', valsx[1]).attr("fill", circcolor) } // .attr("stroke", "red") // .attr("filter", "url(#outline)") for (var i=0; i { return d3.interpolateString(`rotate(0)`, `rotate(360)`); } hexGroup.transition() .on("start", function repeat() { const target = d3.select(this); const currentSpin = target.attr("class"); if (currentSpin != "stop") { d3.active(this) .transition() .duration(4000) .ease(d3.easeLinear) .attrTween("transform", tween) .on("end", repeat) } }); hexGroup.on("click",function(){ const target = d3.select(this) const currentSpin = target.attr("class") if (currentSpin != "stop") { target.attr("class","stop") } else { target.attr("class","proceed") target.transition() .on("start", function repeat() { const target = d3.select(this); const currentSpin = target.attr("class"); if (currentSpin != "stop") { d3.active(this) .transition() .duration(4000) .ease(d3.easeLinear) .attrTween("transform", tween) .on("end", repeat) } }) } }) var outtahere = svg.node(); return outtahere; }31:T48c,presetobjects = [{ prename : 'Use Current Sliders', colorvals : colors}, { prename : 'pointyhex-compass-hsl', colorvals : {a: "rgba(255, 128, 0, 0.5)",b:"rgba(128, 255, 0, 0.5)",c:"rgba(0, 255, 128, 0.5)",d:"rgba(0, 128, 255, 0.5)",e:"rgba(128, 0, 255, 0.5)", f:"rgba(255, 0, 128, 0.5)"}}, { prename : 'flathex-compass-hsl', colorvals : {a:"rgba(255, 0, 0, 0.5)",b:"rgba(255, 255, 0, 0.5)",c:"rgba(0, 255, 0, 0.5)",d:"rgba(0, 255, 255, 0.5)",e:"rgba(0, 0, 255, 0.5)",f:"rgba(255, 0, 255, 0.5)"}}, { prename : 'yu-triadic-rgb', colorvals : {a:"rgba(0, 52, 107, 0.5)",b:"rgba(164, 134, 0, 0.5)",c:"rgba(164, 34, 0, 0.5)",d:"rgba(0, 109, 73, 0.5)",e:"rgba(8, 0, 114, 0.5)",f:"rgba(164, 98, 0, 0.5)"}}, { prename : 'yu-as00deg-rgb', colorvals : {a:"rgba(0, 52, 107, 0.5)",b:"rgba(54, 144, 0, 0.5)",c:"rgba(164, 153, 0, 0.5)",d:"rgba(164, 98, 0, 0.5)",e:"rgba(151, 0, 35, 0.5)",f:"rgba(53, 0, 111, 0.5)"}}, { prename : 'yu_as30deg-rgb', colorvals : {a:"rgba(0, 52, 107, 0.5)",b:"rgba(52, 0, 107, 0.5)",c:"rgba(107, 0, 52, 0.5)",d:"rgba(107, 52, 0, 0.5)",e:"rgba(52, 107, 0, 0.5)",f:"rgba(0, 107, 52, 0.5)"}} ] 32:[] 2d:{"id":"2947eb1a90ecd757","slug":"hexbin-w-orbiting-slices","title":"Hexbin w/ Orbiting Slices","thumbnail":"d30787868421a6657f66a77e8cd014315b0e9b2390a9f914b49cff964eed95ee","access_level":"public","create_time":"$D2021-06-16T16:53:40.678Z","update_time":"$D2021-06-25T00:17:03.854Z","view_time":null,"first_public_time":"$D2021-06-22T21:44:52.633Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"1d28085143aea7e3","login":"slattery","name":"Mike Slattery","avatar_url":"https://avatars-next.observableusercontent.com/417cf7adb17b1f1aa6f920cec50e6d939759814f2dfea487e20afcc3e6e29449","tier":"pro_2024"},"version":1156,"publish_version":1156,"role":null,"authored":false,"authors":[{"type":"individual","id":"58237c9d2f2a8662","login":"slattery","name":"Mike Slattery","avatar_url":"https://avatars-next.observableusercontent.com/417cf7adb17b1f1aa6f920cec50e6d939759814f2dfea487e20afcc3e6e29449","tier":null}],"members":[{"type":"individual","id":"58237c9d2f2a8662","login":"slattery","name":"Mike Slattery","avatar_url":"https://avatars-next.observableusercontent.com/417cf7adb17b1f1aa6f920cec50e6d939759814f2dfea487e20afcc3e6e29449","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Hexbin w/ Orbiting Slices","cells":[{"id":0,"value":"md`# Hexbin w/ Orbiting Slices`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"md`Build a hex based display with six colors and the center being blended result of the six colors/alphas. To remove a color/category marker set it's alpha to 0.\n\nRelative sizing from [@sanderevers/hex-edges](/@sanderevers/hex-edges). Practically a fork of [@afzp99/d3js-hexbin](/@afzp99/d3js-hexbin) & [@jlupini/hexbin-cartogram](/@jlupini/hexbin-cartogram) with color control from [@danburzo/culori-blend-modes](/@danburzo/culori-blend-modes).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1131,"value":"md`Use the color config as is, choose your own colors and alphas, or try some presets. Then choose blendmodes to see how they behave for all permutations. You may go to the download buttons below to save your choices to JSON.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"value":"viewof presets = {\n const pform = html`

\n \n`;\n pform.select.onchange = async () => {\n if (pform.select.value === \"Use Current Sliders\") {\n // do nothing\n } else {\n pform.pvalue = presetcolors[pform.select.selectedIndex];\n for (var k in pform.pvalue){\n console.log(k,pform.pvalue[k],culori.formatter('hex')( pform.pvalue[k]) );\n document.getElementById(\"colorform\").elements[k].value = culori.formatter('hex')(pform.pvalue[k]);\n } \n nudgecolorform();\n pform.dispatchEvent(new CustomEvent(\"input\"));\n ;\n }\n };\n pform.select.selectedIndex = 0;\n pform.select.onchange();\n return pform;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"viewof mode = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"viewof fillblanks = Inputs.toggle({label: \"Fill blanks\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"viewof encircle = Inputs.toggle({label: \"Encircle\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"viewof applyclip = Inputs.toggle({label: \"Apply Clip\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"viewof radius = {\n const form = html`\n \n \n

`;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber}px radius`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"md`Click on the collection to stop spinning after finishing a rotation, to get it to be 'upright'. Click again to restart'`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"chart = {\n return createHexMini(hexlegendlist(hexlegendpositions), radius)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"DOM.download(serialize(colors), \"currentcolors\", \"Download Palette\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1060,"value":"hexlegendpositions = ({\n 'A': {color: \"a\", y:0, x:1, shortname: \"a\" },\n 'B' : { color: \"b\", y:0, x:2, shortname: \"b\" },\n 'C' : { color: \"c\", y:1, x:0, shortname: \"c\" },\n 'D': { color: \"d\", y:1, x:2, shortname: \"d\" }, \n 'E': { color: \"e\", y:2, x:1, shortname: \"e\" },\n 'F': { color: \"f\", y:2, x:2, shortname: \"f\" },\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"function drawHexagon(svg, radius, space, x, y, hexbin){\n \n var hexagon = svg.append(\"path\")\n .attr(\"d\", hexbin.hexagon(radius - space))\n .attr(\"transform\", \"translate(\" + x + \",\" + y + \")\")\n return hexagon\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"function getCenter(hexaRadius, row, col){\n var x = hexaRadius * col * Math.sqrt(3)\n //Offset each uneven row by half of a \"hex-width\" to the right\n if(row % 2 === 1) x += hexaRadius * Math.sqrt(3)/2\n var y = hexaRadius * row * 1.5;\n //return [x-(hexaRadius),y-((hexaRadius)/2)];\n return [x,y+hexaRadius];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"function getHexcolor(c, i){\n //grabbing whole array to get pre-blended for now\n var p = culori.parse(c[i])\n if (p.alpha == 0 && fillblanks){\n return c[6];\n } else {\n return c[i];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"function getcolor(d, i){\n if ( i == 6 ){\n return culori.formatter('rgb')(culori.blend(spokes, mode, space))\n } else {\n var p = culori.parse(colors[d.color])\n if (p.alpha == 0 && fillblanks){\n return culori.formatter('rgb')(culori.blend(spokes, mode, space))\n } else {\n return spokes[i];\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1062,"value":"hexlegendlist = function(){\n let dummydata = new Array;\n for (let k of Object.keys(hexlegendpositions)) {\n hexlegendpositions[k].longname = k;\n dummydata.push(hexlegendpositions[k]);\n }\n return dummydata\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"spokes = [colors.a,colors.b,colors.c,colors.d,colors.e,colors.f]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1134,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1136,"value":"presetnames = presetobjects.map(d => d.prename)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1138,"value":"presetcolors = presetobjects.map(d => d.colorvals)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1140,"value":"function nudgecolorform() {\n var element = document.getElementById(\"colorform\")\n element.dispatchEvent(new Event(\"input\"));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"viewof space = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3@6\", \"d3-hexbin@0.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"culori = require('culori@0.8.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"import { color, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1150,"value":"import {serialize} from \"@palewire/saving-json\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"