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

Adds a lollipop chart

Browse Source
This commit is contained in:
Roman Galochkin 2020-02-20 11:56:02 +03:00
parent 739707dd39
commit a9bfc0dd47
1 changed files with 19 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -232,8 +232,8 @@ export class CdfChartD3 {
.y0(this.calc.chartHeight); .y0(this.calc.chartHeight);
// Add axis. // Add axis.
this.chart.createObject({ tag: 'g', selector: 'axis' }) this.chart.createObject({ tag: 'g', selector: 'xAxis' })
.attr('transform', 'translate(' + 0 + ',' + this.calc.chartHeight + ')') .attr('transform', 'translate(0,' + this.calc.chartHeight + ')')
.call(this.xAxis); .call(this.xAxis);
// Draw area. // Draw area.
@ -303,52 +303,50 @@ export class CdfChartD3 {
// Lollipops // Lollipops
{ {
const data = [ const data = [
{ Country: "United States", Value: "12394" }, {x: 3, y: 10},
{ Country: "Ry", Value: "1000" }, {x: 5, y: 30},
{ Country: "Dy", Value: "5000" }, {x: 7.5, y: 50},
]; ];
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(data.map(function (d) { .domain(xs)
return d.Country;
}))
.padding(1); .padding(1);
this.svg.append("g") this.chart.append("g")
.attr("transform", "translate(0," + this.calc.chartHeight + ")") .attr("transform", "translate(0," + this.calc.chartHeight + ")")
.call(d3.axisBottom(x)) .call(d3.axisBottom(x))
.selectAll("text") .selectAll("text");
.attr("transform", "translate(-10,0)rotate(-45)")
.style("text-anchor", "end");
// Add Y axis // Add Y axis
const y = d3.scaleLinear() const y = d3.scaleLinear()
.domain([0, 13000]) .domain([0, 50])
.range([this.calc.chartHeight, 0]); .range([this.calc.chartHeight, 0]);
this.svg.append("g") this.chart.append("g")
.attr("transform", "translate(" + this.calc.chartWidth + ",0)")
.call(d3.axisLeft(y)); .call(d3.axisLeft(y));
// Lines // Lines
this.svg.selectAll("lollipops-line") this.chart.selectAll("lollipops-line")
.data(data) .data(data)
.enter() .enter()
.append("line") .append("line")
.attr("x1", d => x(d.Country)) .attr("x1", d => x(d.x))
.attr("x2", d => x(d.Country)) .attr("x2", d => x(d.x))
.attr("y1", d => y(d.Value)) .attr("y1", d => y(d.y))
.attr("y2", y(0)) .attr("y2", y(0))
.attr("stroke", "red"); .attr("stroke", "red");
// Circles // Circles
this.svg.selectAll("lollipops-circle") this.chart.selectAll("lollipops-circle")
.data(data) .data(data)
.enter() .enter()
.append("circle") .append("circle")
.attr("cx", d => x(d.Country)) .attr("cx", d => x(d.x))
.attr("cy", d => y(d.Value)) .attr("cy", d => y(d.y))
.attr("r", "4") .attr("r", "4")
.style("fill", "yellow") .style("fill", "yellow")
.attr("stroke", "green"); .attr("stroke", "green");