Basic stacked bar chart from the D3.js GalleryParallel coordinates from the D3.js Graph GalleryBasic dendrogram from the D3.js graph galleryHorizontal bar chart from the D3.js GalleryScatterplot including hover effect from the D3.js Graph GalleryCircular bar plot from the D3.js Graph GalleryBasic choord diagram from the D3.js graph galleryHistogram with colored tailBasic density plot from the D3.js graph gallerybasic violin plotBasic Arc Diagram from the d3.js graph gallery
simple Donut chart from the D3.js Graph Gallery
{
yield html`
<div id="chart">
</div>`;
drawDonut();
}
async function drawDonut() {
var svg = d3.select("#chart")
.append("svg")
.attr("width", dimensions.width)
.attr("height", dimensions.height)
.append("g")
.attr("transform", "translate(" + dimensions.width / 2 + "," + dimensions.height / 2 + ")");
var color = d3.scaleOrdinal()
.domain(["a", "b", "c", "d", "e", "f", "g", "h"])
.range(d3.schemeDark2);
var pie = d3.pie()
.sort(null) // Do not sort group by size
.value(function(d) {return d.value; })
var data_ready = pie(d3.entries(data))
var arc = d3.arc()
.innerRadius(radius * 0.5) // This is the size of the donut hole
.outerRadius(radius * 0.8)
// Another arc that won't be drawn. Just for labels positioning
var outerArc = d3.arc()
.innerRadius(radius * 0.9)
.outerRadius(radius * 0.9)
svg
.selectAll('allSlices')
.data(data_ready)
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d){ return(color(d.data.key)) })
.attr("stroke", "white")
.style("stroke-width", "2px")
.style("opacity", 0.7)
svg
.selectAll('allPolylines')
.data(data_ready)
.enter()
.append('polyline')
.attr("stroke", "black")
.style("fill", "none")
.attr("stroke-width", 1)
.attr('points', function(d) {
var posA = arc.centroid(d) // line insertion in the slice
var posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that
var posC = outerArc.centroid(d); // Label position = almost the same as posB
var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left
posC[0] = radius * 0.95 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left
return [posA, posB, posC]
})
svg
.selectAll('allLabels')
.data(data_ready)
.enter()
.append('text')
.text( function(d) { console.log(d.data.key) ; return d.data.key } )
.attr('transform', function(d) {
var pos = outerArc.centroid(d);
var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2
pos[0] = radius * 0.99 * (midangle < Math.PI ? 1 : -1);
return 'translate(' + pos + ')';
})
.style('text-anchor', function(d) {
var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2
return (midangle < Math.PI ? 'start' : 'end')
})
}
radius = Math.min(width, dimensions.height) / 2 - dimensions.margin.left
dimensions = ({
height:400,
width:500,
margin: {
top: 10,
right: 10,
bottom: 10,
left: 40,
}
})
d3 = require("d3@5")
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.
