constructor(props){
super(props)
this.state = {
labels: [
{
type: 'chartTitle',
text : 'Chord Interval Counts',
textClass : 'chartTitle',
gWrapperClass : 'chartTitleG',
transformation: '',
fontSize: '1.5em'
}
],
margins : { top: 20, right: 20, bottom: 100, left: 20 },
curShowing: 0
}
this.theData = this.removeLessimportantData(this.props.data[this.state.curShowing]);
this.seqClr = d3.scaleSequential().domain(this.makeSeqDom(this.theData)).interpolator(d3.interpolateRainbow);
this.radiusScale = d3.scaleSqrt();
this.colorScale = d3.scaleOrdinal(d3.schemeDark2);
this.simulation;
this.d3Circles;
this.myTickFn = this.myTickFn.bind(this)
this.makeSeqDom = this.makeSeqDom.bind(this)
this.toggle = this.toggle.bind(this)
this.drawChart = this.drawChart.bind(this)
this.calcXPos = this.calcXPos.bind(this)
this.calcYPos = this.calcYPos.bind(this)
this.bubbleDataJoin;
}
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
var width = x-40,
height = y-40,
radius = (Math.min(width, height) / 2) - 10;
var formatNumber = d3.format(",d");
var x = d3.scaleLinear()
.range([0, 2 * Math.PI]);
var y = d3.scaleSqrt()
.range([0, radius]);
var color = d3.scaleOrdinal(d3.schemeCategory20);
var partition = d3.partition();
var arc = d3.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x0))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x1))); })
.innerRadius(function(d) { return Math.max(0, y(d.y0)); })
.outerRadius(function(d) { return Math.max(0, y(d.y1)); });
var svg = d3.select("body").append("svg")
.attr("width", width)
var d3 = require('d3');
var formatSum = d3.format(".1s");
var padding = 10;
var radius = d3.scaleSqrt()
.range([0, 220]);
var color = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var arc = d3.arc()
.padRadius(50);
var pie = d3.pie()
.sort(null)
.padAngle(0.02)
.value(function(d) { return d.population; });
d3.csv("data.csv", function(d, i, columns) {
return {
state: d.State,
sum: d3.sum(columns.slice(1), function(key) { return +d[key]; }),
ages: columns.slice(1).map(function(key) {
return {
age: key,
population: +d[key]
};
})
};
function sunburstChart() {
const margin = {
top: 10,
right: 10,
bottom: 10,
left: 10,
};
const x = d3.scaleLinear().range([0, 2 * Math.PI]);
const y = d3.scaleSqrt();
const partition = d3.partition();
const arc = d3.arc()
.startAngle((d) => x(d.x0))
.endAngle((d) => x(d.x1))
.innerRadius((d) => y(d.y0))
.outerRadius((d) => y(d.y1));
const selections = {};
let width = 500;
let height = 250;
let svg;
let canvas;
let root;
let labelText;
let radius;
function setSize() {
radius = Math.min(width, height) / 2;
canvas.attr('transform', `translate(${width / 2 + margin.left},${height / 2 + margin.top})`);
svg
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.left);
y.range([0, radius]);
}
function resize() {
selections.paths = canvas.selectAll('path')
.filter((d) => ((d.x1 - d.x0) > 0.005 && !d.data.dummy && d.depth))
.attr('d', arc);
}
function setLabel(d) {
if (selections.paths.empty()) {
selections.accountLabel
.text('Chart is empty.');
} else {
selections.balanceLabel
.text(labelText(d));
selections.accountLabel
.text(d.data.account)
.call(makeAccountLink);
}
}
// Fade all but the current sequence
function mouseOver(d) {
setLabel(d);
// Only highlight segments that are ancestors of the current segment.
selections.paths
.interrupt()
.style('opacity', 0.5)
// check if d.account starts with node.account
.filter((node) => (d.data.account.lastIndexOf(node.data.account, 0) === 0))
.style('opacity', 1);
}
// Restore everything to full opacity when moving off the visualization.
function mouseLeave() {
selections.paths
.transition()
.duration(1000)
.style('opacity', 1);
setLabel(root);
}
function chart(svg_) {
svg = svg_;
canvas = svg.attr('class', 'sunburst').append('g')
.on('mouseleave', mouseLeave);
setSize();
// Bounding circle underneath the sunburst
canvas.append('circle')
.style('opacity', 0)
.attr('r', radius);
selections.accountLabel = canvas.append('text')
.attr('class', 'account')
.attr('text-anchor', 'middle');
selections.balanceLabel = canvas.append('text')
.attr('class', 'balance')
.attr('dy', '1.2em')
.attr('text-anchor', 'middle');
root = svg.datum();
partition(root);
selections.paths = canvas.selectAll('path')
.data(root.descendants())
.enter()
.filter((d) => ((d.x1 - d.x0) > 0.005 && !d.data.dummy && d.depth))
.append('path')
.attr('fill-rule', 'evenodd')
.style('fill', (d) => sunburstColorScale(d.data.account))
.on('mouseover', mouseOver)
.call(makeAccountLink);
resize();
setLabel(root);
}
chart.labelText = (f) => {
labelText = f;
return chart;
};
chart.height = (d) => {
height = d - margin.top - margin.bottom;
return chart;
};
chart.width = (d) => {
width = d - margin.left - margin.right;
return chart;
};
chart.update = () => {
setSize();
resize();
};
return chart;
}