31:T719,Original = { // Layout const content = this || html`

«Schotter» by d3.js,

` // Schotter const g = d3.select(content).select('g') .attr('transform', `translate(${width / 4 - (size * cols) / 2}, ${margin.top})`) const angle = d => { const magnitude = 1 + d.row * 5 const random = Math.random() - 0.5 return random * magnitude; } const x = d => { const pos = xScale(d.col) const magnitude = 1 + d.row * 1 const random = Math.random() - 0.5 return pos + random * magnitude } const y = d => { const pos = yScale(d.row) const magnitude = 1 + d.row * 1.2 const random = Math.random() - 0.5 return pos + random * magnitude } const squares = g.selectAll('.square').data(data) squares.enter() .append('rect') .attr('class', 'square') .attr('fill', 'none') .attr('stroke', '#333') .attr('stroke-width', 0.9) .attr('width', size) .attr('height', size) .attr('transform-origin', d => `${size/2} ${size/2}`) .attr('transform', d => `translate(${x(d)}, ${y(d)}) rotate(${angle(d)})`) // Bonus: update "Created At" every minute while (true) { if (!content.createdAt) { content.createdAt = now } d3.select(content).select('.createdAt').html(dayjs(content.createdAt).fromNow()) yield content await Promises.delay(1000 * 60) } }32:T4f8,Playground = { const svg = d3.select(DOM.svg(width, height)) const g = svg.append('g') .attr('transform', `translate(${width / 2 - (size * cols) / 2}, ${margin.top})`) const angle = d => { const magnitude = angleMagnitude(d) const random = Math.random() - 0.5 return random * magnitude; } const x = d => { const pos = xScale(d.col) const magnitude = xMagnitude(d) const random = Math.random() - 0.5 return pos + random * magnitude } const y = d => { const pos = yScale(d.row) const magnitude = yMagnitude(d) const random = Math.random() - 0.5 return pos + random * magnitude } const squares = g.selectAll('.square').data(data) squares.enter() .append('rect') .attr('class', 'square') .attr('fill', fillFuncs[fillN]) .attr('fill-opacity', fillOpacityFuncs[fillOpacityN]) .attr('stroke', strokeFuncs[strokeN]) .attr('stroke-opacity', strokeOpacityFuncs[strokeOpacityN]) .attr('stroke-width', strokeWidthFuncs[strokeWidthN]) .attr('rx', radiusFuncs[radiusN]) .attr('width', size) .attr('height', size) .attr('transform-origin', d => `${size/2} ${size/2}`) .attr('transform', d => `translate(${x(d)}, ${y(d)}) rotate(${angle(d)})`) return svg.node() }33:T6bd,Wobble = { let svg = d3.select(this) if (!svg.size()) { // Create SVG first time only and reuse it later for animations svg = d3.select(DOM.svg(width, height)) svg.append('g') } // Schotter const g = svg.select('g') .attr('transform', `translate(${width / 2 - (size * cols) / 2}, ${margin.top})`) const angle = d => { const magnitude = 1 + d.row * 5 const random = Math.random() - 0.5 return random * magnitude; } const x = d => { const pos = xScale(d.col) const magnitude = 1 + d.row * 1 const random = Math.random() - 0.5 return pos + random * magnitude } const y = d => { const pos = yScale(d.row) const magnitude = 1 + d.row * 1.2 const random = Math.random() - 0.5 return pos + random * magnitude } let isActive = false const render = () => { const squares = g.selectAll('.square').data(data) squares.enter() .append('rect') .attr('class', 'square') .attr('fill', 'none') .attr('stroke', '#333') .attr('stroke-width', 0.9) .attr('width', size) .attr('height', size) .attr('transform-origin', d => `${size/2} ${size/2}`) .attr('transform', d => `translate(${x(d)}, ${y(d)}) rotate(${angle(d)})`) .merge(squares).transition().ease(d3.easeLinear).duration(100) .on("start", function repeat() { if (!isActive) return; d3.active(this) .attr('transform', d => `translate(${x(d)}, ${y(d)}) rotate(${angle(d)})`) .transition() .on("start", repeat) }) } svg.on('mouseenter', () => { isActive = true; render() }) svg.on('mouseleave', () => { isActive = false; render() }) render() return svg.node() }34:[] 2f:{"title":"Georg Nees, «Schotter»","cells":[{"id":0,"value":"md`# Georg Nees, «Schotter»`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"md`# Playground`","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"md`Play with these functions to generate art`","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"angleMagnitude = d => [\n 1 + d.row * 5,\n (rows - d.row) * 5,\n 1 + d.col * 10\n][0] // change index to try others","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"xMagnitude = d => [\n 1 + d.row * 1,\n (rows - d.row) * 5,\n 1 + d.col * 2\n][0] // change index to try others","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"yMagnitude = d => [\n 1 + d.row * 1.2,\n (rows - d.row) * 1,\n 1 + d.col * 2\n][0] // change index to try others","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"fillFuncs = [\n (d, i) => 'none',\n (d, i) => 'white',\n (d, i) => i % 5 ? 'white' : 'black',\n (d, i) => d3.interpolateGreys(d.row / rows),\n (d, i) => d3.interpolatePurples(d.row / rows),\n (d, i) => d3.interpolatePurples(1 - d.row / rows),\n (d, i) => d3.interpolatePurples(1 - d.row / rows * Math.random()),\n (d, i) => d3.interpolatePurples(d.row / rows * Math.random()),\n (d, i) => d3.interpolatePurples(Math.random())\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":999,"value":"viewof fillN = funcSlider(fillFuncs, 6)","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"fillOpacityFuncs = [\n (d, i) => 1,\n (d, i) => 1 - d.row / rows,\n (d, i) => d.row / rows,\n (d, i) => 0.5 + d.row / rows,\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":995,"value":"viewof fillOpacityN = funcSlider(fillOpacityFuncs, 3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"strokeFuncs = [\n (d, i) => '#333',\n (d, i) => fillFuncs[fillN](d, i),\n (d, i) => d3.interpolateGreys(0.4 - d.row/rows),\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":990,"value":"viewof strokeN = funcSlider(strokeFuncs, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":786,"value":"strokeWidthFuncs = [\n (d, i) => 0.9,\n (d, i) => 0.1 + d.row * 0.1,\n (d, i) => d.row * Math.random() * 3\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":985,"value":"viewof strokeWidthN = funcSlider(strokeWidthFuncs, 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":817,"value":"strokeOpacityFuncs = [\n (d, i) => 1,\n (d, i) => 1.3 - d.row / rows,\n (d, i) => d.row / rows,\n (d, i) => 1 - d.row / rows,\n (d, i) => fillOpacityFuncs[fillOpacityN](d)\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"viewof strokeOpacityN = funcSlider(strokeOpacityFuncs, 3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":874,"value":"radiusFuncs = [\n (d, i) => 0,\n (d, i) => (1 - d.row / rows) * size / 2,\n (d, i) => d.row / rows * size / 2,\n (d, i) => d.row / rows * size / 2 * Math.random()\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":946,"value":"viewof radiusN = funcSlider(radiusFuncs, 3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":457,"value":"md`# Gallery`","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":940,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"cols = 12","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"rows = 22","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"size = { \n const xSize = (width - margin.left - margin.right) / cols\n const ySize = (height - margin.top - margin.bottom) / rows\n return Math.min(xSize, ySize)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"md `### Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"generatedData = d3.range(rows * cols).map(index => {\n const row = Math.floor(index / cols)\n const col = index - row * cols;\n return {\n row,\n col\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"xScale = d3.scaleLinear().domain([0, cols]).range([0, cols * size])","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"yScale = d3.scaleLinear().domain([0, rows]).range([0, rows * size])","pinned":false,"hidden":false,"mode":"ojs"},{"id":956,"value":"funcSlider = (funcs, value = 0) => slider({value, step: 1, max: funcs.length - 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"md `### Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"margin = ({top: 10, bottom: 20, left: 25, right: 20})","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md `### Libs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"import { slider, select } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"dayjs = {\n return Promise.all([\n require('dayjs'),\n require('dayjs/plugin/relativeTime')\n ]).then(([dayjs, relativeTime]) => {\n dayjs.extend(relativeTime)\n return dayjs\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"md `### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"originalUrl =\n \"https://user-images.githubusercontent.com/642673/63655079-6293b000-c783-11e9-8f59-3928d7d0e5db.png\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"data = generatedData","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}