Published
Edited
Oct 23, 2020
md`# Pie Graph`
{
const arcs = pie(piedata);
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
svg.append("g")
.attr("stroke", "white")
.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", d => color(d.data.name))
.attr("d", arc)
svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 18)
.attr("text-anchor", "middle")
.selectAll("text")
.data(arcs)
.join("text")
.attr("transform", d => `translate(${arcLabel.centroid(d)})`)
.call(text => text.append("tspan")
.attr("y", "0.7em ")
.attr("font-weight", "bold")
.text(d => d.data.name))
.call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan")
.attr("x", 0)
.attr("y", "-0.4em")
.attr("fill-opacity", 0.7)
.text(d => d.data.value.toLocaleString()));
return svg.node();
}
datainjson = FileAttachment("Amit_Goldenb.json").json()
excludedrts = datainjson.filter(function(ort) {
return ort.is_retweet == false;
});
englishtweets = excludedrts.filter(function(language) {
return language.lang == "en";
});
data = {
const data =[];
for (let i = englishtweets.length; i > 0; --i) {
data.push({
value: englishtweets[i-1].compound,
category: englishtweets[i-1].category
});
}
return data
}
positive = {let positive = 0;
for(var i = 0; i < data.length; ++i){
if(data[i].category == "positive"){
positive++}
}
return positive }
negative = {let negative = 0;
for(var i = 0; i < data.length; ++i){
if(data[i].category == "negative"){
negative++}
}
return negative }
neutral = {let neutral = 0;
for(var i = 0; i < data.length; ++i){
if(data[i].category == "neutral"){
neutral++}
}
return neutral }
piedata = [{name:"Positive Tweets", value: positive},{name:"Neutral Tweets", value: neutral},{name:"Negative Tweets", value: negative}]
color = d3.scaleOrdinal()
.domain(piedata.map(d => d.name))
.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), piedata.length).reverse())
arcLabel = {
const radius = Math.min(width, height) / 2 * 0.6;
return d3.arc().innerRadius(radius).outerRadius(radius);
}
arc = d3.arc()
.innerRadius(0)
.outerRadius(Math.min(width, height) / 2 - 1)
pie = d3.pie()
.sort(null)
.value(d => d.value)
height = 550
d3 = require("d3@6")
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.
