md`# Hexagons`
md`Hierarchical spatial distribution with hexagons on it`
{
const width = 800
const height = 500
const svg = d3.create('svg')
.attr("width",width)
.attr("height",height);
const group = svg.append("g")
const lineGenerator = d3.line()
const bubble = d3.pack(datos[0])
.size([400,400])
.padding(5)
const nodes = d3.hierarchy(datos[0])
.sum(d => d.avgCount)
const node = group.selectAll(".node")
.data(bubble(nodes).descendants())
.enter()
.filter(d => !d.children)
.append("g")
.attr("class", "node")
.attr("transform", d => "translate(" + d.x + "," + d.y + ")");
node.append('path')
.attr('d', function (d,i){
const radius = d.r * 1.2
const pitchy = radius * Math.sqrt(0.75)
const verA = [0, pitchy]
const verB = [radius / 2, 0]
const verC = [3 * radius / 2, 0]
const verD = [2 * radius, pitchy]
const verF = [radius / 2, 2 * pitchy]
const verE = [3 * radius / 2, 2 * pitchy]
const thepoints = [verA, verB, verC, verD, verE, verF, verA];
const pathData = lineGenerator(thepoints);
return pathData;})
.style('stroke-width', "none" )
.style("opacity", '.9')
.style("fill", function (d,i) {return d3.rgb(10,225-i*20,255-i*20); })
node.append("text")
.attr("x",d => d.r*1.2)
.attr("y",d => d.r)
.text(d => d.data.normalizedQuery)
.attr("font-family", "Gill Sans, Century Gothic, sans-serif")
.style("text-anchor", "middle")
.style("font-size", d => d.r / 4)
.attr("fill", "black");
return svg.node();
}
d3 = require("d3@6")
datos = [
{
"children":[
{
"normalizedQuery": "lion",
"avgCount": 0.030
},
{
"normalizedQuery": "tiger",
"avgCount": 0.023
},
{
"normalizedQuery": "bear",
"avgCount": 0.017
},
{
"normalizedQuery": "puma",
"avgCount": 0.015
},
{
"normalizedQuery": "lynx",
"avgCount": 0.015
}
]
}
]
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.
