Creative Director
Published
Edited
Apr 27, 2021
tree = {
const svg = d3.select(DOM.svg(width, height))
const g = svg.selectAll('g')
.data(rawData)
.join(
enter => {
// create the initial heatmap for all tickers
const g = enter
.append("g")
.attr("class",(d,i) => "g_"+i)
.on("click", function(){
clicked()
})
g.append("path")
.attr("class","voronoi")
.attr("id", (d,i) => i )
.attr("d", d => d )
.attr("stroke", "#FFF")
.attr("stroke-width", 1)
.style("fill", "#6ca7ff")
.style("fill-opacity", 1)
return g
},
update => update,
exit => {
//
}
)
var isClicked = true
function clicked(){
if(isClicked){
g.select(".voronoi")
.transition()
.delay((d,i) => i * 20)
.duration((d,i) => 750 - i * 20)
.attr("stroke", "#666")
.attr("stroke-width", .5)
.style("fill-opacity", .2)
.attr("transform", (d,i) => `translate(${pos[i]})`)
isClicked = false
}else{
g.select(".voronoi")
.transition()
.delay((d,i) => i * 20)
.duration((d,i) => 750 - i * 20)
.attr("stroke", "#fff")
.attr("stroke-width", 1)
.style("fill-opacity", 1)
.attr("transform", (d,i) => `translate(0,0)`)
isClicked = true
}
console.log("click ",isClicked)
}
// g.select(".voronoi")
// .transition()
// .delay((d,i) => i * 20)
// .duration(750)
// .attr("stroke", "#000")
// .attr("stroke-width", .5)
// .style("fill-opacity", .05)
// .attr("transform", (d,i) => {
// console.log(pos[i])
// return `translate(${pos[i]})`
// })
yield svg.node()
}
height = 800
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.
