score:0
i'm not sure if this is the most efficient method of going through that much data (then again, javascript was not made for big data so efficiency shouldn't be on your mind).
basically i would approach this looping through all the data with an associative array keeping track of the frequency. if the current data.company
is not in the associative array, it'll add it on to the array as a key and then input the frequency of one. if it is found as a key in the array, it'll increment the frequency by 1.
score:1
what you can do is loop through all the entries, and gather them into an object where the key is the name and the value is the count. the initial data will look like this:
{
"ford" : 2,
"mercury" : 1
}
you can do a reduce
, passing through an object:
var frequency = hugedata.reduce(function(freq,current){
var currentcompany = current.company;
if(!freq.hasownproperty(currentcompany)) freq[currentcompany] = 0;
freq[currentcompany]++;
return freq;
},{});
but reduce
is es5 and sometimes slow. you can do a plain loop:
var frequency = {};
var hugedatalength = hugedata.length;
for(var i = 0; i < hugedatalength; i++){
var current = hugedata[i];
var currentcompany = current.company;
if(!frequency.hasownproperty(currentcompany)) frequency[currentcompany] = 0;
frequency[currentcompany]++;
}
now that we have reduced the data into a much more manageable size, you can loop through the frequency data and turn it into an array, moving down the key and value into an object.
var chartdata = object.keys(frequency).map(function(company){
var value = frequency[company];
return {
value : company,
frequency : value
}
});
a running demo can be seen here.
i did a similar feat in the past few months, and your browser's debugger is a very handy tool for this job, especially the cpu profiler. you can pin down which operations are actually causing the lag.
Source: stackoverflow.com
Related Query
- How can I find the frequency of each member in my data set
- How can I set the each line color or width in SVG path
- d3.js - How can I set the cursor to hand when mouseover these elements on SVG container?
- How can I get "call" to execute for each data element in D3?
- How can I set min/max of the x-axis in Rickshaw / D3?
- Using Javascript D3 library, how can I determine mouse position in data set of an area element on mousemove event?
- How can I connect two parent node into one child node and how to make a tooltip for each node in the tree pragmatically? in D3 js (SVG)
- How can I find the translated co-ordinates of an SVG element?
- How can I find the projection of an existing D3 path
- dc.js - how to get the average of a column in data set
- How can i get the startAngle and endAngle of each arc in the sunburst example using d3.js?
- In D3, how can I create multiple elements for each data element based on value in data?
- How can I set the position of a drop down list with D3.js?
- How do you retrieve the key values of a nested data set in D3
- how can i group JSON data into the weeks according to calender?
- How to set the label for each vertical axis in a parallel coordinates visualization?
- D3: How can I find the largest length of my text labels?
- How can you color each circle in the D3 circle pack layout
- How to find top 5 numbers in a data set and data associated with it?
- How to retrieve the key values of a nested data set in D3
- How can I use D3 tree data in the VEGA Api?
- d3.js - force - how can I configure the force to place each nodes to grow farther away from the origin nodes?
- In d3.js, while importing csv files using a row conversion, how can I "slice" the data to only include a range of rows?
- How can I change the color of a circle created via d3 each time I click the mouse?
- How to get the minimum and maximum value between a given range in data set in d3.js
- D3.JS, How can I render multiple objects in the same data binding?
- How can i set each text label vertically in d3?
- How do you find the last data point in d3 and draw a circle and a line on it?
- How can I set the transform origin to the middle of this rectangle in D3?
- How can I set the background color of a svg element which contains a D3 heat map?
More Query from same tag
- d3.js simple animation - datasets already generated
- Rearranging an array with key value
- Errors importing d3?
- custom x axis tooltip for nvd3 scatter chart
- d3.js - How to do data mapping and filter for Stacked Bar graph
- Change fill color of d3.js node
- Uncaught TypeError: n is not a function d3.js. While trying to overlay us_map on google maps
- Update bar chart in d3 based on user input
- d3.js v4 - nodes are stuck in the top left corner
- Bring a SVG line to front
- Filter data in d3 to draw either circle or square
- Difficulty with D3 transition for sortable heatmap
- Difference between d3.js and d3.v3.js
- D3 Horizontal stacked bar chart axis cut off
- D3 JS - Group Containing a SVG Rectangle Won't Translate Smoothly on Drag
- Meteor js publish and subscribe is very slow to react
- Lost flow chart lines after upgrading from 3.5.5 to 4.2.8
- Adding a drop down causes an undefined error
- Adding d3 Label not working
- Problems using D3.js locally
- How to remove data cleanly before updating d3.js chart?
- Simple curved text within a circle
- mouseover on line doesn't give circle in d3 js
- Avoiding Tangles in Long Networks, D3 Force Diagram
- d3js Redistributing labels around a pie chart
- Ho do I capture ctrl + click on MacOS with d3js
- D3js map marker collision detection
- D3 and mouse events, click test not working
- d3.js force directed layout constrained by a shape
- D3.js version 5 chart to PDF