pixel flipper, data sifter. trying to see what I can while I'm here
drawingLine = d3.line()
.x(function(d) { return d.x })
.y(function(d) { return d.y })
.curve(d3.curveBasis)
function renderDrawings(g, drawings, color, bgcolor = "#fff") {
var gds = g.selectAll("g.drawing").data(drawings)
.enter().append("g").classed("drawing", true)
.attr("transform", function(d,i) {
return "translate(" + [20 + (i % 20) * 45, 180 + Math.floor(i/20)*52] + ")scale(0.15)"
})
.style("fill", "none")
.style("stroke", color)
.style("stroke-width", 5)
gds.append("rect").attr("width", 300).attr("height", 350)
.attr("x", -50).attr("y", -50)
.style("stroke", "none")
.style("fill", bgcolor)
.on("mouseover", function(d) {
g.selectAll("path.encoding").style("stroke-opacity", 1/drawings.length / 2)
.filter(function(p) { return p.id === d.key_id })
.style("stroke-opacity", 1)
d3.select(this.parentNode).style("stroke-width", 20)
}).on("mouseout", function(d) {
g.selectAll("path.encoding").style("stroke-opacity", 1/drawings.length * 2)
d3.select(this.parentNode).style("stroke-width", 5)
})
gds
.selectAll("path.stroke").data(function(d) { return d.strokes })
.enter().append("path").classed("stroke", true)
.attr("d", drawingLine).style("pointer-events", "none")
}
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.
