Develop Reference

Plot histogram in ReactJS

Suppose I want to plot histogram for time taken to read each book.
I calculated time to read each book and stored in an array as
const timeToRead = [10,12,8,3,7]
As I gone through different methods on how to plot histogram .... I found that to display data , it should be in range as:
const timeToRead = [0-5,5-10,10-15]
But on basis of my previous data how can I convert it into range, so it can satisfy condition to plot histogram.
Or is there any other method to plot histogram?
Let me know if any further details is need, also if I'm not clear enough do let me know.
How to make histogram

You have to reduce the data you have to get counts of points that go into each bucket.
0-5, 5-10 etc being the buckets.
Now, you could hand-code a reducer for yourself that gives you the count of data points for each of those bins or use something like d3-array package that has tons of stuff to get info out of data.
Here's a quick example.
let bin = d3.bin()
.domain(timeToRead)
.thresholds([0, 5, 10]);
Mode Reading
https://www.npmjs.com/package/d3-array#bin.
https://observablehq.com/#d3/d3-bin#thresholds

frequently hangs the browser while manipulating pivot table when input data is big

when manipulating pivot table, as selecting rows/columns, frequently hangs the browser when input data is big.
Browser crashes frequently(Browser started to complain it was out of memory),
For the input data, I'm only passing in the array under the data key As below.
[{"Province": "d6880daca6180e00", "Party":"Conservative", "Age": 50,"Name": "8c9424ca352f92c7","Gender": "Male","City":"83f113b91833ae43","Country":"india","Brand":"AcnSports","Account":"Old Navy LLC","Tier 1 SC Access":"Update","Province1": "Ontario", "Party1":"Conservative1", "Age1": 50,"Name1": "Adle Mark", "Gender1": "Male","City1":"Jaipur","Country1":"india","Brand1":"AcnSports","Account1":"Old Navy LLC","Tier 1 SC Access1":"Update"}]
I have 5k rows which contains unique value for(Key) -Provience,Name and City ,rest all are duplicate.
Everything seems working. Data gets rendered but it takes too much time whenever I perform any action like drag n drop.
It works fine if there is all duplicate rows ,I have tested for 1,60000 records and it works smooth .
Please correct me If I am doing anything wrong.
What should I do in this case?
Any Help will be apprecited.
output table Snapshot
JSONData
System spec's :- 2.5 Ghz, Core i7,16 GB Ram,Chrome
Thanks,
Ravindra Solanki

This issue was addressed in Github Issues :) https://github.com/nicolaskruchten/pivottable/issues/599
quoting the conclusion here for completeness:
This is not really a reasonable thing to do... Think about it: a
5000x5000 table is not something a human can read. If each cell was 1
pixel by 1 pixel, you would need a grid of 3x5 HDTVs to display this
many pixels!

Rickshaw/d3.js - equally-spaced series

I have a graph made with rickshaw (line graph).
The graph is working fine but unreadable. The time(x) data for the graph is irregular.
e.g:
{"x":1387669802,"y":1256},
{"x":1387669803,"y":1273},
{"x":1387669804,"y":1256},
{"x":1387669805,"y":1248},
{"x":1387669820,"y":1281},
...huge time gap...
{"x":1370122812,"y":1281},
{"x":1370122813,"y":1236},
{"x":1370122852,"y":1252},
{"x":1370122822,"y":1281}
there are many gaps between a little series of data. sometimes big gaps, sometimes small gaps. What I try is to set a fix distance between two data points.
Last time i worked with morris.js. There was a option named parseTime which does exactly that. treating the data as an equally-spaced series.
http://www.oesmith.co.uk/morris.js/lines.html
Any idea how to do that with rickshaw/d3?
Regards

D3 graphing selective portions of data set

I have a large time series data set I need to graph, and am trying to use D3 to do it. I plan to have my graph have the x-axis be time, and allow for movement of the graph in the x direction. I want to have the graph only load/display the points that exist in the current time range on the screen.
For example, if my dataset has times 1-100, but the graph starts out with times 1-10 shown, the graph should only graph points 1-10. Then the user may move to the right and see times 5-15 and the graph should update accordingly.
Can anyone explain to me how this might be done via d3? I am having a hard time bridging the understanding from an entire data set being loaded in at once and graphed immediately to selective graphing of subsets of the data.

I think you are looking for the selection.filter() function. For example you can have:
var allNodes = vis.selectAll("Nodes").data(data.nodes);
var validNodes = allNodes.filter(function(d){return (d.time>1 && d.time <10)});
//use normal graph functions on validNodes.
You can also apply filter directly on the array of nodes.

Stacked Bar And Scatter Alignment

I have a chart here: http://jsfiddle.net/wergeld/bx82z/
What I need is for the stacked bars and the scatter points to line up on each other based on the data X-element (county name in this case).
Getting the bars to stack was simple. But as you can see in the example the scatter points show up in the middle of the chart - not on the same x-value as the others.
I suppose I could create a category list (using the county names) but there may be cases where I do not have all 3 data elements for all counties - how to handle that scenario?
I did great the category axis and it is still doing the same thing: http://jsfiddle.net/wergeld/YckwW/

You were not defining the series correctly to achieve what you were wanting. See updated jsfiddle for what I think you are looking for.
In the cases where you are missing a piece of data for one of the countries you could always use null, which simply means there is nothing to display for that data point. See Missing Data Sample for an example. It is case sensitive so make sure that null is all lower case.