score:0
Accepted answer
The original data in the bl.ocks that you used as example (this one, your link is broken) looks like this:
State,Under 5 Years,5 to 13 Years,14 to 17 Years,18 to 24 Years,25 to 44 Years,45 to 64 Years,65 Years and Over
AL,310504,552339,259034,450818,1231572,1215966,641667
AK,52083,85640,42153,74257,198724,183159,50277
AZ,515910,828669,362642,601943,1804762,1523681,862573
AR,202070,343207,157204,264160,754420,727124,407205
CA,2704659,4499890,2159981,3853788,10604510,8819342,4114496
So, let's see how we can replicate that row function:
The main problem with your attempt is that, unlike the original row function, you're not iterating through each object in the data array. When you do this...
data.total = t;
... you're just setting a property in that array, which is not what you want.
So, you have to iterate through each object in the array. For instance, using Array.prototype.forEach
:
function type(data) {
data.columns = Object.keys(data[0]);
data.forEach(function(d) {
for (i = 1, t = 0; i < data.columns.length; ++i) t += d[data.columns[i]] = +d[data.columns[i]];
d.total = t;
});
return data;
};
Here is the demo:
var csv = `State,Under 5 Years,5 to 13 Years,14 to 17 Years,18 to 24 Years,25 to 44 Years,45 to 64 Years,65 Years and Over
AL,310504,552339,259034,450818,1231572,1215966,641667
AK,52083,85640,42153,74257,198724,183159,50277
AZ,515910,828669,362642,601943,1804762,1523681,862573
AR,202070,343207,157204,264160,754420,727124,407205
CA,2704659,4499890,2159981,3853788,10604510,8819342,4114496`;
const data = d3.csvParse(csv);
var tmp_data = type(data);
console.log(tmp_data)
function type(data) {
data.columns = Object.keys(data[0]);
data.forEach(function(d) {
for (i = 1, t = 0; i < data.columns.length; ++i) t += d[data.columns[i]] = +d[data.columns[i]];
d.total = t;
});
return data;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
Source: stackoverflow.com
Related Query
- What's different between these two row conversion functions?
- What is the difference between these two code blocks in d3.js
- D3: move circle between two different g elements in force layout
- How to draw area/fill between two curved lines of different lengths (different x values) in d3
- D3 what is the difference between these two way of data binding?
- toggling between two functions
- interact between two different graphs in two different browser windows in dc.js crossfilter
- Drawing multiple edges between two nodes with d3
- How to draw a line / link between two points on a D3 map based on latitude / longitude?
- Using d3 to shade area between two lines
- Calling two functions on same click event with d3.js
- Create dynamic d3 color scale between two color values
- D3.js adding intercept point and area between two paths
- Draw curve between two points using diagonal function in d3 js
- How to use linkRadial to draw a link between two points?
- How do i add two different shapes to D3 forced directed graph based on shape field value?
- How do I draw an arrow between two points in d3v4?
- d3.js: Drawing arcs between two points on map from file
- Shade area between two lines using D3
- Draw an arc between two points
- How to get a set of subpoints between two points?
- Drawing different colored "strokes" between center and different nodes in a D3.js tree
- Two lined D3.js line chart, with one line starting at different position
- What is the different between d3.max() vs. math.max() in d3.js?
- D3 how to draw chart with a x data between two y data
- put line between two elements that are inside a <g> that has zoom events?
- Draw line between two points in JavaScript?
- How to visualize diff between two graphs
- Circle-packing diagram - transition between two set of values
- create color scale between two colors
More Query from same tag
- Finding the user selected option(s) from a `multiple` drop down menu using d3?
- d3 v3 not starting transition on g elements
- Add text/label onto links in D3 force directed graph
- D3.js - how can I iterate through subarrays in my dataset
- On click, display other data in separate div in d3.js; Passing by value
- d3 replacing semicolon with comma
- programmatically access a d3 rectangle on click event
- How to fix ".join is not a function" when trying join after selectAll?
- For loop does not work in D3.js
- Angular directive within d3 SVG
- Stacked Bar Chart with Time Series Data
- Setting d3.curveBundle.beta seems to have no effect
- Nested JSON loadings in D3.js
- How to add circle points for multiline chart?
- D3 bullet chart and ie8
- D3 Parse and Display JSON (from Python Dataframe)
- Modifying donut chart to "progress donut chart"
- D3 won't append elements after external JSON is loaded
- Monochromatic color palette generation with d3 library
- React-nvd3 show multiple lines on line chart
- D3 and dimple line charts
- remove/unbind d3 zoom from canvas
- How to make the cursor change in d3.js when I want?
- How to create a line break in an HTML element using D3.js
- variables scope in javascript D3
- Can selectAll() in d3 js take css style also as parameter?
- How do I draw gridlines in d3.js with zoom and pan
- Convert Raphael Path to line segment array [[x1,y1],[x2,y2],...[xn,yn]
- Display information in line graph using d3.js with Ruby on Rails
- script error - requireJS