md`# Flower`
md`Closed paths along a circle with rotated axis`
{
const width = 800
const height = 400
const svg = d3.create('svg')
.attr("width",width)
.attr("height",height);
const group = svg.append("g")
.attr("transform", "translate(" + (400) + "," + (200) + ")")
const lineGenerator = d3.line()
.curve(d3.curveCardinal);
const outerRadius = 80;
let data = d3.range(datos.length).map(function (i) {
return {
'x': i,
'y': i
};
});
const xcos = d3.scaleLinear()
.domain([0, data.length])
.range([Math.PI * 0, Math.PI * 2]);
const ysin = d3.scaleLinear()
.domain([0, data.length])
.range([Math.PI * 0, Math.PI * 2]);
let dots;
for (let ii = 0; ii < datos.length; ii++) {
let dots = group
.selectAll('g')
.data(datos)
.enter()
.append("g")
.attr("id",function(d,i){return 'tear_'+i;})
.attr('transform', function (d, i) {
const rx = Math.cos(xcos(i)) * outerRadius;
const ry = Math.sin(ysin(i)) * outerRadius;
return 'translate(' + rx + ', ' + ry + ')rotate(' + (xcos(i) * 180 / Math.PI + 90) + ')';
})
}
for (let k = 0; k < datos.length; k++){
let thevalue = datos[k].avgCount * 5
let mypoints = [[0, 40 - 20*thevalue],
[20 + thevalue*4, 50],
[0, 80],
[-20 - thevalue*4, 50],
[0, 40 - 20*thevalue]];
let pathData = lineGenerator(mypoints);
svg.select("#tear_"+k)
.append('path')
.attr('d', pathData)
.style("opacity", .8)
.style("fill", d3.rgb(10,255-k*30,255-k*20))
svg.select('#tear_'+k)
.append('text')
.attr("x", 0)
.attr("y", -80)
.text(function (d) { return datos[k].normalizedQuery.toUpperCase(); })
.attr("font-family", "Gill Sans, Century Gothic, sans-serif")
.attr("font-size", 10)
.attr("text-anchor","middle")
.style("fill", "black")
svg.select("#tear_"+k)
.append("text")
.attr("x", 0)
.attr("y", -70)
.text(function (d) { return datos[k].avgCount; })
.attr("font-family", "Gill Sans, Century Gothic, sans-serif")
.attr("font-size", 10)
.attr("text-anchor","middle")
.style("fill", "black")
}
return svg.node();
}
d3 = require("d3@6")
datos = [
{
"normalizedQuery": "lion",
"avgCount": 0.59
},
{
"normalizedQuery": "tiger",
"avgCount": 0.61
},
{
"normalizedQuery": "bear",
"avgCount": 1.0
},
{
"normalizedQuery": "puma",
"avgCount": 0.65
},
{
"normalizedQuery": "lynx",
"avgCount": 0.74
}
]
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.
