md`# Bubbles`
md`Hierarchical spatial distribution with circles 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 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("circle")
.attr("r", d => d.r)
.style("stroke", "none")
.style("fill", "#3397B5")
.style("fill", function(d,i){return d3.rgb(10,225-i*20,255-i*20);})
node.append("text")
.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();
}
world = fetch("https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m.json").then(d => d.json())
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.
