quantified.uncertainty/squiggle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Separates branches

Browse Source
This commit is contained in:
Roman Galochkin 2020-02-20 12:34:34 +03:00
parent 00589ad310
commit 4e0ce7ad02
1 changed files with 49 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/components/charts/cdfChartD3.js
View File

@ -161,8 +161,12 @@ export class CdfChartD3 {
'translate(' + this.calc.chartLeftMargin + ',' + this.calc.chartTopMargin + ')',
);
// A
this.addDistributionChart();
this.addLollipopsChart();
return this;
}
addDistributionChart() {
const areaColorRange = d3.scaleOrdinal().range(this.attrs.areaColors);
this.dataPoints = [this.getDataPoints('primary')];
@ -304,59 +308,57 @@ export class CdfChartD3 {
thi$.mouseover(this);
})
.on('mouseout', this.mouseout);
}
// Lollipops
{
const data = [
{x: 3, y: 10},
{x: 5, y: 30},
{x: 7.5, y: 50},
];
const xs = [3, 5, 7.5];
addLollipopsChart() {
const data = [
{ x: 3, y: 10 },
{ x: 5, y: 30 },
{ x: 7.5, y: 50 },
];
const xs = [3, 5, 7.5];
// X axis
const x = d3.scaleBand()
.range([0, this.calc.chartWidth])
.domain(xs)
.padding(1);
// X axis
const x = d3.scaleBand()
.range([0, this.calc.chartWidth])
.domain(xs)
.padding(1);
this.chart.append("g")
.attr("class", 'lollipops-x-axis')
.attr("transform", "translate(0," + this.calc.chartHeight + ")")
.call(d3.axisBottom(x));
this.chart.append("g")
.attr("class", 'lollipops-x-axis')
.attr("transform", "translate(0," + this.calc.chartHeight + ")")
.call(d3.axisBottom(x));
// Y axis
const y = d3.scaleLinear()
.domain([0, 50])
.range([this.calc.chartHeight, 0]);
// Y axis
const y = d3.scaleLinear()
.domain([0, 50])
.range([this.calc.chartHeight, 0]);
this.chart.append("g")
.attr("class", 'lollipops-y-axis')
.attr("transform", "translate(" + this.calc.chartWidth + ",0)")
.call(d3.axisLeft(y));
this.chart.append("g")
.attr("class", 'lollipops-y-axis')
.attr("transform", "translate(" + this.calc.chartWidth + ",0)")
.call(d3.axisLeft(y));
// Lines
this.chart.selectAll("lollipops-line")
.data(data)
.enter()
.append("line")
.attr("class", 'lollipops-line')
.attr("x1", d => x(d.x))
.attr("x2", d => x(d.x))
.attr("y1", d => y(d.y))
.attr("y2", y(0));
// Lines
this.chart.selectAll("lollipops-line")
.data(data)
.enter()
.append("line")
.attr("class", 'lollipops-line')
.attr("x1", d => x(d.x))
.attr("x2", d => x(d.x))
.attr("y1", d => y(d.y))
.attr("y2", y(0));
// Circles
this.chart.selectAll("lollipops-circle")
.data(data)
.enter()
.append("circle")
.attr("class", 'lollipops-circle')
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("r", "4");
}
return this;
// Circles
this.chart.selectAll("lollipops-circle")
.data(data)
.enter()
.append("circle")
.attr("class", 'lollipops-circle')
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("r", "4");
}
mouseover(constructor) {