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