diff options
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/Histogram.tsx | 50 |
1 files changed, 31 insertions, 19 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx index c7850d8c1..623453ea3 100644 --- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx +++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx @@ -14,7 +14,6 @@ import { PinProps, PresBox } from "../../trails"; import { Docs } from "../../../../documents/Documents"; import { List } from "../../../../../fields/List"; import './Chart.scss'; -import { minMaxRange } from "../utils/D3Utils"; import e from "connect-flash"; export interface HistogramProps { @@ -245,9 +244,17 @@ export class Histogram extends React.Component<HistogramProps> { let uniqueArr = [...new Set(data)] var numBins = uniqueArr.length - if (this.numericalData) numBins = this.rangeVals.xMax! - this.rangeVals.xMin! + 1; - var startingPoint = this.numericalData==true? this.rangeVals.xMin: 0; - console.log(startingPoint) + var startingPoint = 0; + var endingPoint = numBins; + var translateXAxis = 0; + if (this.numericalData) { + numBins = this.rangeVals.xMax! - this.rangeVals.xMin! + 1; + startingPoint = this.rangeVals.xMin!; + endingPoint = this.rangeVals.xMax!; + if (numBins>15) numBins = 15; + else translateXAxis = width/(numBins+1) / 2; + } + else translateXAxis = width/(numBins+1) / 2; const svg = (this._histogramSvg = d3 .select(this._histogramRef.current) @@ -262,28 +269,27 @@ export class Histogram extends React.Component<HistogramProps> { var x: any; if (this.numericalData){ x = d3.scaleLinear() - .domain([this.rangeVals.xMin!, this.rangeVals.xMax!]) - .range([0, width-(width/numBins)]); + .domain([startingPoint!, endingPoint!]) + .range([0, width ]); } else { x = d3.scaleLinear() .domain([0, numBins]) .range([0, width]); } - - var xAxis = d3.axisBottom(x) - .ticks(numBins-1) - var translateXAxis = (width/numBins) / 2; var histogram = d3.histogram() .value(function(d) {return d}) - .domain([startingPoint!, numBins+startingPoint!]) + .domain([startingPoint!, endingPoint!]) .thresholds(x.ticks(numBins)) var bins = histogram(data) - console.log(this._histogramData) - console.log(data) - console.log(bins) - console.log(this.rangeVals.xMin, this.rangeVals.xMax, numBins) + var eachRectWidth = width/(bins.length) + var graphStartingPoint = bins[0].x1! - (bins[1].x1! - bins[1].x0!) + bins[0].x0 = graphStartingPoint; + x = x.domain([graphStartingPoint, endingPoint]) + .range([0, width - eachRectWidth]) + var xAxis; + if (!this.numericalData) { // if the data is strings rather than numbers uniqueArr.sort() for (let i=0; i<data.length; i++){ @@ -300,14 +306,20 @@ export class Histogram extends React.Component<HistogramProps> { .ticks(numBins-1) .tickFormat( i => uniqueArr[i]) .tickPadding(10) - translateXAxis = (width/numBins) / 2; + translateXAxis = eachRectWidth / 2; + } + else { + xAxis = d3.axisBottom(x) + .ticks(numBins-1) } + const maxFrequency = d3.max(bins, function(d) { return d.length; }) + var y = d3.scaleLinear() .range([height, 0]); - y.domain([0, d3.max(bins, function(d) { return d.length; })!]); + y.domain([0, maxFrequency!]); var yAxis = d3.axisLeft(y) - .ticks(d3.max(bins, function(d) { return d.length; })!) + .ticks(maxFrequency!) svg.append("g") .call(yAxis); svg.append("g") @@ -334,7 +346,7 @@ export class Histogram extends React.Component<HistogramProps> { .append("rect") .attr("x", 1) .attr("transform", function(d) { return "translate(" + x(d.x0!) + "," + y(d.length) + ")"; }) - .attr("width", width/(numBins)) + .attr("width", eachRectWidth) .attr("height", function(d) { return height - y(d.length); }) .attr("style", "outline: thin solid black;") .style("fill", "#69b3a2") |