Columbia '20 // hackNY '17
svg = {
const svg = d3.select(DOM.svg(width, 500))
const g = svg.append("g").attr("transform", `translate(${hexRadius},${hexRadius})`)
svg.call(hexTip);
//Draw each hexagon
g.selectAll(".hexagon")
.data(hexbin(points))
.join("path")
.attr("class", "hexagon")
.style("stroke", "white")
.style("stroke-width", 1.5)
.style("fill", function(d, i) {
return d3.interpolateMagma(hexData[i].letter/30 + 0.2);
})
.attr("d", d => "M" + d.x + "," + d.y + hexbin.hexagon())
.on('mouseover', hexTip.show)
.on('mouseout', hexTip.hide);
return svg.node()
}
svg2 = {
const svg = d3.select(DOM.svg(width, 1000))
const g = svg.append("g").attr("transform", `translate(${quiltHexRadius},${quiltHexRadius})`)
svg.call(hexTip2);
//Draw each hexagon
var hexes = g.selectAll(".hexagon")
.data(hexbin2(points2))
.join("path")
.attr("class", "hexagon")
.style("stroke", "none")
.style("fill", function(d, i) {
return d3.interpolateViridis(1-(mapping[i].number/(sortedChars.length+7) + 0.1));
})
.attr("d", d => "M" + d.x + "," + d.y + hexbin2.hexagon())
.on('mousemove', hexTip2.show)
//.on('mouseout', hexTip2.hide);
svg.append("g").attr("transform", `translate(${quiltHexRadius},${quiltHexRadius})`).selectAll(".hexagon")
.data(hexbin3(points2))
.join("path")
.attr("class", "hexagon")
.style("stroke", "white")
.style("stroke-width", function(d, i) { return 1.5/*return (d.x)*5/400*/})
.style("fill", function(d, i) {
return "#FFFFFF";
})
.attr("d", d => "M" + d.x + "," + d.y + hexbin3.hexagon())
.on('mousemove', hexTip2.show)
.on('mouseout', hexTip2.hide);
svg.append("g").attr("transform", `translate(${quiltHexRadius},${quiltHexRadius})`).selectAll("line")
.data(hexbin3(points2))
.enter()
.append("line")
.style("stroke", function(d, i) {return d3.interpolateViridis(1-(mapping[i].number/(sortedChars.length+7) + 0.1));})
.style("stroke-width", 2.5)
.attr("x1", function(d, i) {return d.x - 14;})
.attr("y1", function(d, i) {return d.y - 8})
.attr("x2", function(d, i) { return d.x})
.attr("y2", function(d, i) {return d.y});
svg.append("g").attr("transform", `translate(${quiltHexRadius},${quiltHexRadius})`).selectAll("line")
.data(hexbin3(points2))
.enter()
.append("line")
.style("stroke", function(d, i) { return d3.interpolateViridis(1-(mapping[i].number/(sortedChars.length+7) + 0.1));})
.style("stroke-width", 2.5)
.attr("x1", function(d, i) {return d.x})
.attr("y1", function(d, i) {return d.y})
.attr("x2", function(d, i) { return d.x + 14})
.attr("y2", function(d, i) {return d.y - 8});
svg.append("g").attr("transform", `translate(${quiltHexRadius},${quiltHexRadius})`).selectAll("line")
.data(hexbin3(points2))
.enter()
.append("line")
.style("stroke", function(d, i) { return d3.interpolateViridis(1-(mapping[i].number/(sortedChars.length+7) + 0.1));})
.style("stroke-width", 2.5)
.attr("x1", function(d, i) {return d.x})
.attr("y1", function(d, i) {return d.y})
.attr("x2", function(d, i) { return d.x})
.attr("y2", function(d, i) {return d.y + 15.5});
return svg.node()
}
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.
