31:T475,ThirdAttempt = { // create svg const svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height) .style("padding", "5px") .style("border", "1px solid #000") .style("background-color", "rgba(246, 244, 231, 1)") .style("font", "10px sans-serif") const side = svg.append("g") .attr("class","side"); const groups = side.selectAll(".group") .data(inkData) .enter().append("g") .attr("class", "group") .style("fill", d => d.fill) .attr("transform", (d) => `translate(${d.x}, ${d.y})`); groups.selectAll(".blot") .data(d => d.blots) .enter().append("circle") .attr("class","blot") .attr("cx", (d) => d.cx) .attr("cy", (d) => d.cy) .attr("r", d => d.r) const clone = (selector) => { const node = svg.select(selector).node(); return d3.select(node.parentNode.insertBefore(node.cloneNode(true), node.nextSibling)); } const copyNodes = clone(".side") .attr("transform",`translate(${width/2})`) .style("stroke", "#fff") return svg.node(); }32:T4d6,FourthAttempt = { // create svg const svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height) .style("padding", "5px") .style("border", "1px solid #000") .style("background-color", "rgba(246, 244, 231, 1)") .style("font", "10px sans-serif"); const g = svg.append("g") .attr("transform", `translate(${width/4},20)`) const side = g.append("g") .attr("class","side"); const groups = side.selectAll(".group") .data(inkData) .enter().append("g") .attr("class", "group") .style("fill", d => d.fill) .attr("transform", (d) => `translate(${d.x}, ${d.y})`); groups.selectAll(".blot") .data(d => d.blots) .enter().append("circle") .attr("class","blot") .attr("cx", (d) => d.cx) .attr("cy", (d) => d.cy) .attr("r", d => d.r) const clone = (selector) => { const node = svg.select(selector).node(); return d3.select(node.parentNode.insertBefore(node.cloneNode(true), node.nextSibling)); } const copyNodes = clone(".side") .attr("transform",`translate(${width/2}) scale(-1, 1)`) .style("stroke", "#fff") return svg.node(); }33:T6c4,FifthAttempt = { // create svg const svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height) .style("padding", "5px") .style("border", "1px solid #000") .style("background-color", "rgba(246, 244, 231, 1)") .style("font", "10px sans-serif"); const goo = DOM.uid("goo"); const defs = svg.append("defs"); const filter = defs.append("filter").attr("id", goo.id); filter.append("feGaussianBlur") .attr("in","SourceGraphic") .attr("stdDeviation", gaussianBlur) .attr("color-interpolation-filters","sRGB") .attr("result","blur"); filter.append("feColorMatrix") .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 18 -2`) .attr("result","gooey"); const g = svg.append("g") .attr("transform", `translate(${width/4},0)`) .style("filter", goo) const side = g.append("g") .attr("class","side"); const groups = side.selectAll(".group") .data(inkData) .enter().append("g") .attr("class", "group") .style("fill", d => d.fill) .attr("transform", (d) => `translate(${d.x}, ${d.y})`); groups.selectAll(".blot") .data(d => d.blots) .enter().append("circle") .attr("class","blot") .attr("cx", (d) => d.cx) .attr("cy", (d) => d.cy) .attr("r", d => d.r) const clone = (selector) => { const node = svg.select(selector).node(); return d3.select(node.parentNode.insertBefore(node.cloneNode(true), node.nextSibling)); } const copyNodes = clone(".side") .attr("transform",`translate(${width/2}) scale(-1, 1)`) .style("stroke", "#fff") return svg.node(); }34:T6ff,SixthAttempt = { // create svg const svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height) .style("padding", "5px") .style("border", "1px solid #000") .style("background-color", "rgba(246, 244, 231, 1)") .style("font", "10px sans-serif"); const goo = DOM.uid("goo"); const defs = svg.append("defs"); const filter = defs.append("filter").attr("id", goo.id); filter.append("feGaussianBlur") .attr("in","SourceGraphic") .attr("stdDeviation", gaussianBlur) .attr("color-interpolation-filters","sRGB") .attr("result","blur"); filter.append("feColorMatrix") .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 18 -2`) .attr("result","gooey"); const g = svg.append("g") .attr("transform", `translate(${width/4},0)`) .style("filter", goo) const side = g.append("g") .attr("class","side"); const groups = side.selectAll(".group") .data(inkData) .enter().append("g") .attr("class", "group") .style("fill", d => d.fill) .style("opacity", (d) => d.opacity) .style("stroke-width", (d) => d.strokeWidth) .attr("transform", (d) => `translate(${d.x}, ${d.y})`); groups.selectAll(".blot") .data(d => d.blots) .enter().append("circle") .attr("class","blot") .attr("cx", (d) => d.cx) .attr("cy", (d) => d.cy) .attr("r", d => d.r) const clone = (selector) => { const node = svg.select(selector).node(); return d3.select(node.parentNode.insertBefore(node.cloneNode(true), node.nextSibling)); } const copyNodes = clone(".side") .attr("transform",`translate(${width/2}) scale(-1, 1)`) return svg.node(); }35:T813,SeventhAttempt = { const run = iRun; // create svg const svg = d3 .select(DOM.svg(width, height)) .style("width", width) .style("height", height) .style("padding", "5px") .style("border", "1px solid #000") .style("background-color", "rgba(246, 244, 231, 1)") .style("font", "10px sans-serif"); const goo = DOM.uid("goo"); const defs = svg.append("defs"); const splotch2 = defs.append("filter").attr("id", goo.id); splotch2 .append("feGaussianBlur") .attr("stdDeviation", 5) .attr("result", "blur"); splotch2 .append("feColorMatrix") .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 18 -7") .attr("result", "splotch2"); const g = svg.append("g").attr("transform", `translate(${width / 4},0)`); const side = g.append("g").attr("class", "side"); const groups = side .selectAll(".group") .data(inkData) .enter() .append("g") .attr("class", "group") .attr("filter", goo) .style("fill", (d) => d.transparentFill) .style("stroke", (d) => d.transparentStroke) .style("opacity", (d) => d.opacity) .style("stroke-width", (d) => d.strokeWidth) .attr("transform", (d) => `translate(${d.x}, ${d.y})`); groups .selectAll(".blot") .data((d) => d.blots) .enter() .append("circle") .attr("class", "blot") .attr("cx", (d) => d.cx) .attr("cy", (d) => d.cy) .attr("r", (d) => d.r); groups .selectAll(".line") .data((d) => d.lines) .enter() .append("line") .attr("class", "line") .style("stroke-width", 3) .attr("x1", (d) => d.x1) .attr("x2", (d) => d.x2) .attr("y1", (d) => d.y1) .attr("y2", (d) => d.y2); const clone = (selector) => { const node = svg.select(selector).node(); return d3.select( node.parentNode.insertBefore(node.cloneNode(true), node.nextSibling) ); }; const copyNodes = clone(".side").attr( "transform", `translate(${width / 2}) scale(-1, 1)` ); return svg.node(); }36:Tb2c,viewof kernel = { let ui = html` Color Matrix

	r	g	b	a	m
r
g
b
a

`; let inputs = ui.querySelectorAll('input'); function valid() { let sum = 0; for (let k of kernel) sum += k; console.log(sum); return sum === 16; } let kernel = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 18, -7] // let kernel = [1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0]; kernel.forEach((k, i) => { inputs[i].value = k; inputs[i].addEventListener('input', evt => { let change = kernel[i] - +evt.target.value; kernel[i] = +evt.target.value; }); }); ui.value = kernel; ui.dispatchEvent(new CustomEvent('change')); return ui; }37:Ta36,EigthAttempt = { const run = iRun; // create svg const svg = d3 .select(DOM.svg(width, height)) .style("width", width) .style("height", height) .style("padding", "5px") .style("border", "1px solid #000") .style("background-color", "rgba(246, 244, 231, 1)") .style("font", "10px sans-serif"); const goo = DOM.uid("goo"); const defs = svg.append("defs"); const turbulence = defs.append("filter").attr("id", goo.id); turbulence .append("feTurbulence") .attr("y", "0px") .attr("height", height) .attr("result", "waves") .attr("type", "turbulence") .attr("baseFrequency", `.1 .1`) .attr("numOctaves", octaves) .attr("seed", seed); turbulence .append("feDisplacementMap") .attr("in", "SourceGraphic") .attr("in2", "waves") .attr("height", height) .attr("scale", scale) .attr("xChannelSelector", "G") .attr("yChannelSelector", "B") .attr("result", "ripples"); turbulence .append("feGaussianBlur") .attr("in", "ripples") .attr("stdDeviation", blur) .attr("result", "blur"); turbulence .append("feColorMatrix") .attr("in", "blur") .attr("mode", "matrix") .attr("values", kernel.toString().replace(/[ ]*,[ ]*|[ ]+/g, " ")) .attr("result", "splotch2"); const g = svg.append("g").attr("transform", `translate(${width / 4},0)`); const side = g.append("g").attr("class", "side"); const groups = side .selectAll(".group") .data(inkData) .enter() .append("g") .attr("class", "group") .attr("filter", goo) .style("fill", (d) => d.transparentFill) .style("stroke", (d) => d.transparentStroke) .style("opacity", (d) => d.opacity) .style("stroke-width", (d) => d.strokeWidth) .attr("transform", (d) => `translate(${d.x}, ${d.y})`); groups .selectAll(".blot") .data((d) => d.blots) .enter() .append("circle") .attr("class", "blot") .attr("cx", (d) => d.cx) .attr("cy", (d) => d.cy) .attr("r", (d) => d.r); groups .selectAll(".line") .data((d) => d.lines) .enter() .append("line") .attr("class", "line") .style("stroke-width", 3) .attr("x1", (d) => d.x1) .attr("x2", (d) => d.x2) .attr("y1", (d) => d.y1) .attr("y2", (d) => d.y2); const clone = (selector) => { const node = svg.select(selector).node(); return d3.select( node.parentNode.insertBefore(node.cloneNode(true), node.nextSibling) ); }; const copyNodes = clone(".side").attr( "transform", `translate(${width / 2}) scale(-1, 1)` ); return svg.node(); }38:[] 2f:{"title":"Making Inkblots in D3","cells":[{"id":0,"value":"md`# Making Inkblots in D3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"md`For some reason, early in my visualization work, I was facinanted with creating inkblots in D3. I was learning how to make [scatterplots](http://bl.ocks.org/pstuffa/7ac82d0fcbad885d1590) in D3 and was using random data, which would often give a sort of inkblot-like appearance. Since then, I've gotten a bit better at D3 techniques, so here I'll try to create a realistic looking inkblot.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"md`## Analyzing an Inkblot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"md`When we make an inkblot in the physical world, we take a piece of paper, put ink on one side, fold it down the center, press the ink so it smudges, creating various shapes and textures, then open it up. Here is an example of a classic inkblot used for [Rorschach Tests](https://en.wikipedia.org/wiki/Rorschach_test).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"cImg = await new Promise((resolve, reject) => {\n let i = new Image();\n i.onload = () => resolve(i);\n i.onerror = reject;\n // i.crossOrigin = 'anynomous';\n i.src = 'https://upload.wikimedia.org/wikipedia/commons/b/bc/Rorschach_blot_02.jpg';\n // i.width = width;\n // i.height = height;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":789,"value":"md`How could we recreate this in D3? Well, we want something that will create these random shapes, grouping together collections of ink... we could do an approach of making random groups comprised of circles. Let's call that nGroups and nBlots. The groups would be randomly arranged on the page, and each group would have a number of circles that create the random shapes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"nGroups = Math.round(d3.randomUniform(2,15)())","pinned":true,"hidden":false,"mode":"ojs"},{"id":792,"value":"md`I've set these values using D3's uniform random number generator`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"nBlots = Math.round(d3.randomUniform(2,15)())","pinned":true,"hidden":false,"mode":"ojs"},{"id":959,"value":"Then we'll make a dataset ","pinned":false,"hidden":false,"mode":"md"},{"id":949,"value":"inkData = d3.range(nGroups).map((d) => {\n iRun\n return {\n x: x(Math.random()),\n y: y(Math.random()),\n opacity: opacityScale(Math.random()),\n strokeWidth: Math.random()/2,\n transparentFill: transparent(colorScale(Math.random() < .15 ? 1 : 0 ), 1),\n transparentStroke: transparent(colorScale(Math.random() < .15 ? 1 : 0 ), 1),\n fill: colorScale(Math.random() < 0.25 ? 1 : 0),\n blots: d3.range(nBlots).map((d) => ({\n cx: jitter(20),\n cy: jitter(20),\n r: sizeScale(Math.random())\n })),\n lines: d3.range(nBlots).map((d) => ({\n x1: jitter(20),\n x2: jitter(100),\n y1: jitter(20),\n y2: jitter(100),\n }))\n }; \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"md`Create groups of \"blots\", randomly located on half the page.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"FirstAttempt = {\n \n // create svg\n const svg = d3.select(DOM.svg(width, height))\n .style(\"width\", width)\n .style(\"height\", height)\n .style(\"padding\", \"5px\")\n .style(\"font\", \"10px sans-serif\")\n .style(\"background-color\", \"rgba(246, 244, 231, 1)\")\n .style(\"border\", \"1px solid #000\")\n\n const side = svg.append(\"g\");\n \n const groups = side.selectAll(\".group\")\n .data(inkData)\n .enter().append(\"g\")\n .attr(\"class\", \"group\")\n .attr(\"transform\", (d) => `translate(${d.x}, ${d.y})`);\n \n groups.selectAll(\".blot\")\n .data(d => d.blots)\n .enter().append(\"circle\")\n .attr(\"class\",\"blot\")\n .attr(\"cx\", (d) => d.cx)\n .attr(\"cy\", (d) => d.cy)\n .attr(\"r\", d => d.r)\n \n return svg.node();\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"md`Apply some coloring, keeping most black, and some red.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"SecondAttempt = {\n \n // create svg\n const svg = d3.select(DOM.svg(width, height))\n .style(\"width\", width)\n .style(\"height\", height)\n .style(\"padding\", \"5px\")\n .style(\"font\", \"10px sans-serif\")\n .style(\"background-color\", \"rgba(246, 244, 231, 1)\")\n .style(\"border\", \"1px solid #000\")\n\n const side = svg.append(\"g\");\n \n const groups = side.selectAll(\".group\")\n .data(inkData)\n .enter().append(\"g\")\n .attr(\"class\", \"group\")\n .style(\"fill\", d => d.fill)\n .attr(\"transform\", (d) => `translate(${d.x}, ${d.y})`);\n \n groups.selectAll(\".blot\")\n .data(d => d.blots)\n .enter().append(\"circle\")\n .attr(\"class\",\"blot\")\n .attr(\"cx\", (d) => d.cx)\n .attr(\"cy\", (d) => d.cy)\n .attr(\"r\", d => d.r)\n \n return svg.node();\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"md`Make a copy of one side and place on the other. I've added a white stroke to the copy so it's easy to distinguish.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"md`Flip the copy so it looks like you folded paper.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"md`Apply a Guassian Blur to make the circles more \"ink-like.\" You can alter the value with this slider.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"viewof gaussianBlur = Inputs.range([0, 5], {label: \"Blur\", step: .1, value: 3})","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"md`Remove the white strokes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"md`Add lines to keep making it look more like ink.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"viewof iRun = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"md`Adding in additional SVG filter effects, like feTurbulence, feDisplacementMap.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"viewof blur = Inputs.range([0, 5], {label: \"Blur\", step: .1, value: 3})","pinned":false,"hidden":false,"mode":"ojs"},{"id":843,"value":"viewof octaves = Inputs.range([0, 10], {label: \"Octaves\", step: 1, value: 1}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"viewof seed = Inputs.range([0, 100], {label: \"Seed\", step: 1, value: 4})","pinned":false,"hidden":false,"mode":"ojs"},{"id":847,"value":"viewof scale = Inputs.range([0, 100], {label: \"Scale\", step: 1, value: 20})","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":775,"value":"md`Not too shabby! This sorta looks like an inkblot. What else could we use? Perhaps we can apply some SVG noise effects to make the fill look more inklike? Fork this notebook and show me how to do it right! :)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"opacityScale = d3.scaleLinear()\n .range([.75,1])\n .domain([0,1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":338,"value":"transparent = (color, alpha) => {\n const rgb = d3.rgb(color);\n return \"rgba(\" + [rgb.r, rgb.g, rgb.b, alpha].join(\",\") + \")\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"y = d3.scaleLinear()\n .range([height - 100, 100])\n .domain([0, 1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"sizeScale = d3.scalePow()\n .exponent(10)\n .domain([0,1])\n .range([1, 50])","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"colorScale = d3.scaleOrdinal()\n .range([\"black\",\"red\"])\n .domain([0, 1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"jitter = {\n return function jitter(deg) {\n const firstVal = Math.random()*deg;\n const secondVal = Math.random();\n const thirdVal = (secondVal > .5 ? -1 : 1)\n return firstVal * thirdVal;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"x = d3.scaleLinear()\n .range([0, width/2])\n .domain([0, 1 ])","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"width = 675","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}