Public
Edited
Apr 6, 2023
{
yield html`
<div id="body" style="white-space: nowrap;">
</div>`;
drawDonut();
}
async function drawDonut() {
let div4 = d3.select("body").append("div")
div4.append("button")
.attr("class", "previous")
.text("previous")
div4.append("button")
.attr("class", "next")
.text("next")
let body = d3.select("#body")
let bodyHeight = 200
let bodyWidth = 400
let pie = d3.pie()
.value(d => 1)
let colorInterpolator = d3.interpolate("blue","#e3e7f9")
let colors = d3.quantize(colorInterpolator,data[0].data.length);
let colorScale = d3.scaleOrdinal()
.range(colors)
.domain(data[0].data.map(d => d.country))
let arc = d3.arc()
.outerRadius(bodyHeight / 2)
.innerRadius(50)
.padRadius(300)
.padAngle(2 / 300)
.cornerRadius(8);
let div = d3.select("body").append("div")
.attr("class", "tooltip-donut")
.style("opacity", 0);
let div2 = d3.select("body").append("div")
.attr("class", "tooltip-donut")
.style("opacity", 0);
let g = body.selectAll(".arc")
.data(pie(data[0].data))
.enter()
.append("svg")
.attr("width", "500px")
.attr("height", "500px")
.style("display","inline");
g.append("path")
.attr("d", arc)
.attr("fill", d => {
return colorScale(d.data.country)
})
.style("opacity", 0.5)
.on('mouseover', function(event,i) {
d3.select(this)
.style('opacity', 1)
console.log("mousing over", event, this)
div.transition()
.duration(50)
.style("opacity", 1);
div.html(event.data["country"])
.style("left", (d3.event.pageX + 10) + "px")
.style("top", (d3.event.pageY - 15) + "px");
div2.transition()
.duration(50)
.style("opacity", 1);
div2.html(event.data["sales"])
.style("left", (d3.event.pageX + 10) + "px")
.style("top", (d3.event.pageY - 15) + "px");
})
.on('mouseout', function(event) {
d3.select(this)
.style('opacity', .5);
div.transition()
.duration(50)
.style("opacity", 0);
div2.transition()
.duration(50)
.style("opacity", 0);
});
g.append("text")
.attr("text-anchor", "middle")
.text(data[0].name)
.attr("font-family", "sans-serif")
.attr("font-size", 20);
}
data = [
{name:'Yale',data:[
{country:'Checking',sales:19362129},
// {country:'China',sales:11937562},
// {country:'Japan',sales:4884489},
// {country:'Germany',sales:3651871},
// {country:'France',sales:2574807},
{country:'Fake',sales:2574807}
]
},
{name:'Columbia',data:[
{country:'Sonoe',sales:19362129},
{country:'Likes',sales:11937562},
{country:'Cheese',sales:2574807}
]
},
{name:'Hunter',data:[
{country:'Ben',sales:19362129},
{country:'Eats',sales:11937562},
{country:'Green',sales:2574807},
{country:'Leaves',sales:5389}
]
},
{name:'Punter',data:[
{country:'Falk',sales:19362129},
{country:'Smells',sales:11937562},
{country:'so',sales:2574807},
{country:'gross',sales:5389},
{country:'face',sales:2574807},
]
},
{name:'Kalani',data:[
{country:'Hawaii',sales:19362129},
{country:'Feet',sales:11937562},
{country:'o',sales:2574807},
{country:'show',sales:2574807},
{country:'lets',sales:2574807},
{country:'go',sales:2574807},
{country:'bows',sales:2574807}
]
}
]
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.
