pixel flipper, data sifter. trying to see what I can while I'm here
simpleRender = function(svg, name, color) {
let clip_path_id = "clip_path_" + name
let clipped_container_group = svg.append('g').attr("clip-path", `url(#${clip_path_id})`)
let filler = clipped_container_group.append("rect")
.attr("x", -size/2)
.attr("y", -size/2)
.attr("width", size*2)
.attr("height", size*2)
.attr("fill", color)
// let rotator_container_group = this.clipped_container_group.append('g').attr('transform', `translate(${this.conf.offset.x}, ${this.conf.offset.y})`)
}
bg = {
let svg = d3.create("svg")
.attr("width", width)
.attr("height", size * 3.5)
svg.append("rect").attr("width", width).attr("height", size*3.5)
.attr("fill", "#111")
let data = d3.range(100).map(d => {
return {
i: d,
color: d3.schemeCategory10[Math.floor(Math.random() * 10)]
}
})
let n = 10
svg.selectAll("g.logo").data(data)
.enter()
.append("g").classed("logo", true)
.attr("transform", (d,i) => {
return `scale(.5)translate(${10 + (i % n) * (size + 20)}, ${ 10 + Math.floor(i / n) * (size + 20)})`
})
.style("opacity", 0.5)
.each(function(d,i) {
simpleRender(d3.select(this), "dee", d.color)
simpleRender(d3.select(this), "three", d.color)
})
// simpleRender(svg, "one", "blue")
// simpleRender(svg, "zero", "blue")
return svg.node()
}
import {Range} from "@observablehq/inputs"
d3 = require("d3@6")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
