Columbia '20 // hackNY '17
html`<link rel="stylesheet" href="//rawgithub.com/Caged/d3-tip/master/examples/example-styles.css">
<style>
.rect:hover {
opacity: 0.7;
}
`
md`# Sunburst`
md`probably will actually quilt`
piechart = {
const arcs = pie(pieData);
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
svg.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", (d) => d3.interpolateViridis(d.data.count/592))
.attr("d", arc)
svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.attr("text-anchor", "middle")
.selectAll("text")
.data(arcs)
.join("text")
.attr("transform", d => `translate(${arc.centroid(d)})`)
.call(text => text.append("tspan")
.attr("y", "-0.4em")
.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.7em")
.attr("fill-opacity", 0.7)
.text(d => d.data.value.toLocaleString()));
return svg.node();
}
pieData = {
const data = d3.csvParse(await FileAttachment("totalfreq@1.csv").text(), d3.autoType);
var data2 = data.slice(235, 1196)
return data2;
}
pieHeight = 800;
arc = {
// radius is 400
const radius = Math.min(width, height) / 2;
return d3.arc().innerRadius(radius * 0.5).outerRadius(radius - 1);
}
pie = d3.pie()
.padAngle(0.00000005)
.sort(null)
.value(d => 1)
bigpiechart = {
const arcs = monthpie(bigpieData);
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -900 / 2, width, 900]);
svg.call(pieTip);
console.log(arcs);
var big = svg.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", (d) => d3.interpolateYlGnBu(d.data.count/6131))
.attr("d", arc)
.attr("class", "slice")
.on('mouseover', pieTip.show)
.on('mouseout', pieTip.hide);
return svg.node();
}
bigpieData = {
const data = d3.csvParse(await FileAttachment("newdf@2.csv").text(), d3.autoType);
return data;
}
html`<style>.slice:hover{opacity:0.8;}</style>`
monthpie = d3.pie()
.padAngle(0.005)
.sort(null)
.value(d => 1)
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.
