D3.js - How to use inline JSON as dataset for D3 charts, instead of csv/tsv/json file
up vote
1
down vote
favorite
3
I'm implementing D3.js charts in my application, I don't want to use file as dataset, I just want to use inline JSON as dataset (JSON would be generated dynamically in application).
I have done implementation for Reusable Responsive Multiline Chart using following code.
var data1 = [ "My JSON data here" ];
d3.json('', function (error, data)
data1.forEach(function (d)
d.year = +d.year;
d.variableA = +d.variableA;
d.variableB = +d.variableB;
d.variableC = +d.variableC;
d.Temp = +d.Temp;
);
var chart = makeLineChart(data1, 'year',
'Device 1': column: 'variableA' ,
'Device 2': column: 'variableB' ,
'Device 3': column: 'variableC' ,
'Device 4': column: 'variableD'
, xAxis: 'Years', yAxis: 'Temperature' );
chart.bind("#chart-line1");
chart.render();
);
Here I'm calling d3.json() but file name is blank and also there is no use of data in code. Instead of 'data' I'm using 'data1'.
It works perfect ...
Now I want to achieve the same for Grouped Bar Chart, but this chart data binding method is different than "Reusable Responsive Multiline Chart".
Following is the code to parse data for "Grouped Bar Chart".
d3.csv("\data.csv", function(d, i, columns)
for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
return d;
, function(error, data)
if (error) throw error;
var keys = data.columns.slice(1);
// Rest of code to bind parsed data to chart
);
Complete code at Grouped Bar Chart
So how I can replace data.csv with inline JSON here.
d3.js
asked Apr 26 '17 at 13:32
Shri
7611
|
show 1 more comment
up vote
1
down vote
favorite
3
I'm implementing D3.js charts in my application, I don't want to use file as dataset, I just want to use inline JSON as dataset (JSON would be generated dynamically in application).
I have done implementation for Reusable Responsive Multiline Chart using following code.
var data1 = [ "My JSON data here" ];
d3.json('', function (error, data)
data1.forEach(function (d)
d.year = +d.year;
d.variableA = +d.variableA;
d.variableB = +d.variableB;
d.variableC = +d.variableC;
d.Temp = +d.Temp;
);
var chart = makeLineChart(data1, 'year',
'Device 1': column: 'variableA' ,
'Device 2': column: 'variableB' ,
'Device 3': column: 'variableC' ,
'Device 4': column: 'variableD'
, xAxis: 'Years', yAxis: 'Temperature' );
chart.bind("#chart-line1");
chart.render();
);
Here I'm calling d3.json() but file name is blank and also there is no use of data in code. Instead of 'data' I'm using 'data1'.
It works perfect ...
Now I want to achieve the same for Grouped Bar Chart, but this chart data binding method is different than "Reusable Responsive Multiline Chart".
Following is the code to parse data for "Grouped Bar Chart".
d3.csv("\data.csv", function(d, i, columns)
for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
return d;
, function(error, data)
if (error) throw error;
var keys = data.columns.slice(1);
// Rest of code to bind parsed data to chart
);
Complete code at Grouped Bar Chart
So how I can replace data.csv with inline JSON here.
d3.js
asked Apr 26 '17 at 13:32
Shri
7611
Try to addd = [ "My JSON data here" ];on the second line, afterd3.csv()and before thefor
– cirofdo
Apr 26 '17 at 14:00
@TheBiro You mean to say, replacing "\data.csv" with 'd = [ "My JSON data here" ];' will work? I'm not getting clearly where to add d = [ "My JSON data here" ];.
– Shri
Apr 26 '17 at 15:12
just remove the call tod3.jsonand use your generated data
– thedude
Apr 26 '17 at 15:34
No, my idea was to overwrite the datadwith your json insided3.csv.
– cirofdo
Apr 26 '17 at 15:53
@TheBiro it's not working, I just tired as follow :d3.csv("", function(d = [ "State": "CA", "Under 5 Years": 2704659, "5 to 13 Years": 4499890, "14 to 17 Years": 2159981, "18 to 24 Years": 3853788, "25 to 44 Years": 10604510, "45 to 64 Years": 8819342, "65 Years and Over": 4114496 , "State": "TX", "Under 5 Years": 2027307, "5 to 13 Years": 3277946, "14 to 17 Years": 1420518, "18 to 24 Years": 2454721, "25 to 44 Years": 7017731, "45 to 64 Years": 5656528, "65 Years and Over": 2472223 ], i, columns) {it shows following Error: <text> attribute y: Expected length, "NaN". in D3.js file.
– Shri
Apr 26 '17 at 19:45
|
show 1 more comment
up vote
1
down vote
favorite
3
up vote
1
down vote
favorite
3
3
I'm implementing D3.js charts in my application, I don't want to use file as dataset, I just want to use inline JSON as dataset (JSON would be generated dynamically in application).
I have done implementation for Reusable Responsive Multiline Chart using following code.
var data1 = [ "My JSON data here" ];
d3.json('', function (error, data)
data1.forEach(function (d)
d.year = +d.year;
d.variableA = +d.variableA;
d.variableB = +d.variableB;
d.variableC = +d.variableC;
d.Temp = +d.Temp;
);
var chart = makeLineChart(data1, 'year',
'Device 1': column: 'variableA' ,
'Device 2': column: 'variableB' ,
'Device 3': column: 'variableC' ,
'Device 4': column: 'variableD'
, xAxis: 'Years', yAxis: 'Temperature' );
chart.bind("#chart-line1");
chart.render();
);
Here I'm calling d3.json() but file name is blank and also there is no use of data in code. Instead of 'data' I'm using 'data1'.
It works perfect ...
Now I want to achieve the same for Grouped Bar Chart, but this chart data binding method is different than "Reusable Responsive Multiline Chart".
Following is the code to parse data for "Grouped Bar Chart".
d3.csv("\data.csv", function(d, i, columns)
for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
return d;
, function(error, data)
if (error) throw error;
var keys = data.columns.slice(1);
// Rest of code to bind parsed data to chart
);
Complete code at Grouped Bar Chart
So how I can replace data.csv with inline JSON here.
d3.js
asked Apr 26 '17 at 13:32
Shri
7611
I'm implementing D3.js charts in my application, I don't want to use file as dataset, I just want to use inline JSON as dataset (JSON would be generated dynamically in application).
I have done implementation for Reusable Responsive Multiline Chart using following code.
var data1 = [ "My JSON data here" ];
d3.json('', function (error, data)
data1.forEach(function (d)
d.year = +d.year;
d.variableA = +d.variableA;
d.variableB = +d.variableB;
d.variableC = +d.variableC;
d.Temp = +d.Temp;
);
var chart = makeLineChart(data1, 'year',
'Device 1': column: 'variableA' ,
'Device 2': column: 'variableB' ,
'Device 3': column: 'variableC' ,
'Device 4': column: 'variableD'
, xAxis: 'Years', yAxis: 'Temperature' );
chart.bind("#chart-line1");
chart.render();
);
Here I'm calling d3.json() but file name is blank and also there is no use of data in code. Instead of 'data' I'm using 'data1'.
It works perfect ...
Now I want to achieve the same for Grouped Bar Chart, but this chart data binding method is different than "Reusable Responsive Multiline Chart".
Following is the code to parse data for "Grouped Bar Chart".
d3.csv("\data.csv", function(d, i, columns)
for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
return d;
, function(error, data)
if (error) throw error;
var keys = data.columns.slice(1);
// Rest of code to bind parsed data to chart
);
Complete code at Grouped Bar Chart
So how I can replace data.csv with inline JSON here.
d3.js
d3.js
asked Apr 26 '17 at 13:32
Shri
7611
asked Apr 26 '17 at 13:32
Shri
7611
edited Nov 10 at 15:25
asked Apr 26 '17 at 13:32
Shri
7611
asked Apr 26 '17 at 13:32
Shri
7611
asked Apr 26 '17 at 13:32
Shri
7611
7611
Try to addd = [ "My JSON data here" ];on the second line, afterd3.csv()and before thefor
– cirofdo
Apr 26 '17 at 14:00
@TheBiro You mean to say, replacing "\data.csv" with 'd = [ "My JSON data here" ];' will work? I'm not getting clearly where to add d = [ "My JSON data here" ];.
– Shri
Apr 26 '17 at 15:12
just remove the call tod3.jsonand use your generated data
– thedude
Apr 26 '17 at 15:34
No, my idea was to overwrite the datadwith your json insided3.csv.
– cirofdo
Apr 26 '17 at 15:53
@TheBiro it's not working, I just tired as follow :d3.csv("", function(d = [ "State": "CA", "Under 5 Years": 2704659, "5 to 13 Years": 4499890, "14 to 17 Years": 2159981, "18 to 24 Years": 3853788, "25 to 44 Years": 10604510, "45 to 64 Years": 8819342, "65 Years and Over": 4114496 , "State": "TX", "Under 5 Years": 2027307, "5 to 13 Years": 3277946, "14 to 17 Years": 1420518, "18 to 24 Years": 2454721, "25 to 44 Years": 7017731, "45 to 64 Years": 5656528, "65 Years and Over": 2472223 ], i, columns) {it shows following Error: <text> attribute y: Expected length, "NaN". in D3.js file.
– Shri
Apr 26 '17 at 19:45
|
show 1 more comment
Try to addd = [ "My JSON data here" ];on the second line, afterd3.csv()and before thefor
– cirofdo
Apr 26 '17 at 14:00
@TheBiro You mean to say, replacing "\data.csv" with 'd = [ "My JSON data here" ];' will work? I'm not getting clearly where to add d = [ "My JSON data here" ];.
– Shri
Apr 26 '17 at 15:12
just remove the call tod3.jsonand use your generated data
– thedude
Apr 26 '17 at 15:34
No, my idea was to overwrite the datadwith your json insided3.csv.
– cirofdo
Apr 26 '17 at 15:53
@TheBiro it's not working, I just tired as follow :d3.csv("", function(d = [ "State": "CA", "Under 5 Years": 2704659, "5 to 13 Years": 4499890, "14 to 17 Years": 2159981, "18 to 24 Years": 3853788, "25 to 44 Years": 10604510, "45 to 64 Years": 8819342, "65 Years and Over": 4114496 , "State": "TX", "Under 5 Years": 2027307, "5 to 13 Years": 3277946, "14 to 17 Years": 1420518, "18 to 24 Years": 2454721, "25 to 44 Years": 7017731, "45 to 64 Years": 5656528, "65 Years and Over": 2472223 ], i, columns) {it shows following Error: <text> attribute y: Expected length, "NaN". in D3.js file.
– Shri
Apr 26 '17 at 19:45
Try to add
d = [ "My JSON data here" ]; on the second line, after d3.csv() and before the for– cirofdo
Apr 26 '17 at 14:00
Try to add
d = [ "My JSON data here" ]; on the second line, after d3.csv() and before the for– cirofdo
Apr 26 '17 at 14:00
@TheBiro You mean to say, replacing "\data.csv" with 'd = [ "My JSON data here" ];' will work? I'm not getting clearly where to add d = [ "My JSON data here" ];.
– Shri
Apr 26 '17 at 15:12
@TheBiro You mean to say, replacing "\data.csv" with 'd = [ "My JSON data here" ];' will work? I'm not getting clearly where to add d = [ "My JSON data here" ];.
– Shri
Apr 26 '17 at 15:12
just remove the call to
d3.json and use your generated data– thedude
Apr 26 '17 at 15:34
just remove the call to
d3.json and use your generated data– thedude
Apr 26 '17 at 15:34
No, my idea was to overwrite the data
d with your json inside d3.csv.– cirofdo
Apr 26 '17 at 15:53
No, my idea was to overwrite the data
d with your json inside d3.csv.– cirofdo
Apr 26 '17 at 15:53
@TheBiro it's not working, I just tired as follow :
d3.csv("", function(d = [ "State": "CA", "Under 5 Years": 2704659, "5 to 13 Years": 4499890, "14 to 17 Years": 2159981, "18 to 24 Years": 3853788, "25 to 44 Years": 10604510, "45 to 64 Years": 8819342, "65 Years and Over": 4114496 , "State": "TX", "Under 5 Years": 2027307, "5 to 13 Years": 3277946, "14 to 17 Years": 1420518, "18 to 24 Years": 2454721, "25 to 44 Years": 7017731, "45 to 64 Years": 5656528, "65 Years and Over": 2472223 ], i, columns) { it shows following Error: <text> attribute y: Expected length, "NaN". in D3.js file.– Shri
Apr 26 '17 at 19:45
@TheBiro it's not working, I just tired as follow :
d3.csv("", function(d = [ "State": "CA", "Under 5 Years": 2704659, "5 to 13 Years": 4499890, "14 to 17 Years": 2159981, "18 to 24 Years": 3853788, "25 to 44 Years": 10604510, "45 to 64 Years": 8819342, "65 Years and Over": 4114496 , "State": "TX", "Under 5 Years": 2027307, "5 to 13 Years": 3277946, "14 to 17 Years": 1420518, "18 to 24 Years": 2454721, "25 to 44 Years": 7017731, "45 to 64 Years": 5656528, "65 Years and Over": 2472223 ], i, columns) { it shows following Error: <text> attribute y: Expected length, "NaN". in D3.js file.– Shri
Apr 26 '17 at 19:45
|
show 1 more comment
1 Answer
1
active
oldest
votes
up vote
2
down vote
accepted
The methods d3.json and d3.csv are AJAX calls meant to fetch data from the server. If you have in-line JSON, you do not need these calls. The fact that your first example works like that is just a side-effect. Your d3.json call fails but the call-back function is still executed. It's just un-necessary and should be written as:
var data1 = [ "My JSON data here" ];
data1.forEach(function (d)
d.year = +d.year;
d.variableA = +d.variableA;
d.variableB = +d.variableB;
d.variableC = +d.variableC;
d.Temp = +d.Temp;
);
var chart = makeLineChart(data1, 'year',
'Device 1': column: 'variableA' ,
'Device 2': column: 'variableB' ,
'Device 3': column: 'variableC' ,
'Device 4': column: 'variableD'
, xAxis: 'Years', yAxis: 'Temperature' );
chart.bind("#chart-line1");
chart.render();
On your second chart again the call to d3.csv is not necessary. There is however some processing that happens from the CSV format to JSON. You'll need to replicate that in creating your JSON and for the rest of the chart to work you'll need something like:
...
var z = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var data = ["State":"CA","Under 5 Years":2704659,"5 to 13 Years":4499890,"14 to 17 Years":2159981,"18 to 24 Years":3853788,"25 to 44 Years":10604510,"45 to 64 Years":8819342,"65 Years and Over":4114496,"State":"TX","Under 5 Years":2027307,"5 to 13 Years":3277946,"14 to 17 Years":1420518,"18 to 24 Years":2454721,"25 to 44 Years":7017731,"45 to 64 Years":5656528,"65 Years and Over":2472223];
var keys = ["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"]
x0.domain(data.map(function(d) return d.State; ));
x1.domain(keys).rangeRound([0, x0.bandwidth()]);
...
Here's that code running without the call to d3.csv:
<!DOCTYPE html>
<style>
.axis .domain
display: none;
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = top: 20, right: 20, bottom: 30, left: 40,
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x0 = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.1);
var x1 = d3.scaleBand()
.padding(0.05);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var z = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var data = ["State":"CA","Under 5 Years":2704659,"5 to 13 Years":4499890,"14 to 17 Years":2159981,"18 to 24 Years":3853788,"25 to 44 Years":10604510,"45 to 64 Years":8819342,"65 Years and Over":4114496,"State":"TX","Under 5 Years":2027307,"5 to 13 Years":3277946,"14 to 17 Years":1420518,"18 to 24 Years":2454721,"25 to 44 Years":7017731,"45 to 64 Years":5656528,"65 Years and Over":2472223,"State":"NY","Under 5 Years":1208495,"5 to 13 Years":2141490,"14 to 17 Years":1058031,"18 to 24 Years":1999120,"25 to 44 Years":5355235,"45 to 64 Years":5120254,"65 Years and Over":2607672,"State":"FL","Under 5 Years":1140516,"5 to 13 Years":1938695,"14 to 17 Years":925060,"18 to 24 Years":1607297,"25 to 44 Years":4782119,"45 to 64 Years":4746856,"65 Years and Over":3187797,"State":"IL","Under 5 Years":894368,"5 to 13 Years":1558919,"14 to 17 Years":725973,"18 to 24 Years":1311479,"25 to 44 Years":3596343,"45 to 64 Years":3239173,"65 Years and Over":1575308,"State":"PA","Under 5 Years":737462,"5 to 13 Years":1345341,"14 to 17 Years":679201,"18 to 24 Years":1203944,"25 to 44 Years":3157759,"45 to 64 Years":3414001,"65 Years and Over":1910571];
var keys = ["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"];
x0.domain(data.map(function(d) return d.State; ));
x1.domain(keys).rangeRound([0, x0.bandwidth()]);
y.domain([0, d3.max(data, function(d) return d3.max(keys, function(key) return d[key]; ); )]).nice();
g.append("g")
.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d) return "translate(" + x0(d.State) + ",0)"; )
.selectAll("rect")
.data(function(d) return keys.map(function(key) return key: key, value: d[key]; ); )
.enter().append("rect")
.attr("x", function(d) return x1(d.key); )
.attr("y", function(d) return y(d.value); )
.attr("width", x1.bandwidth())
.attr("height", function(d) return height - y(d.value); )
.attr("fill", function(d) return z(d.key); );
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x0));
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y).ticks(null, "s"))
.append("text")
.attr("x", 2)
.attr("y", y(y.ticks().pop()) + 0.5)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("Population");
var legend = g.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.selectAll("g")
.data(keys.slice().reverse())
.enter().append("g")
.attr("transform", function(d, i) return "translate(0," + i * 20 + ")"; );
legend.append("rect")
.attr("x", width - 19)
.attr("width", 19)
.attr("height", 19)
.attr("fill", z);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9.5)
.attr("dy", "0.32em")
.text(function(d) return d; );
</script>answered Apr 27 '17 at 5:05
Mark
88k10126183
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
The methods d3.json and d3.csv are AJAX calls meant to fetch data from the server. If you have in-line JSON, you do not need these calls. The fact that your first example works like that is just a side-effect. Your d3.json call fails but the call-back function is still executed. It's just un-necessary and should be written as:
var data1 = [ "My JSON data here" ];
data1.forEach(function (d)
d.year = +d.year;
d.variableA = +d.variableA;
d.variableB = +d.variableB;
d.variableC = +d.variableC;
d.Temp = +d.Temp;
);
var chart = makeLineChart(data1, 'year',
'Device 1': column: 'variableA' ,
'Device 2': column: 'variableB' ,
'Device 3': column: 'variableC' ,
'Device 4': column: 'variableD'
, xAxis: 'Years', yAxis: 'Temperature' );
chart.bind("#chart-line1");
chart.render();
On your second chart again the call to d3.csv is not necessary. There is however some processing that happens from the CSV format to JSON. You'll need to replicate that in creating your JSON and for the rest of the chart to work you'll need something like:
...
var z = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var data = ["State":"CA","Under 5 Years":2704659,"5 to 13 Years":4499890,"14 to 17 Years":2159981,"18 to 24 Years":3853788,"25 to 44 Years":10604510,"45 to 64 Years":8819342,"65 Years and Over":4114496,"State":"TX","Under 5 Years":2027307,"5 to 13 Years":3277946,"14 to 17 Years":1420518,"18 to 24 Years":2454721,"25 to 44 Years":7017731,"45 to 64 Years":5656528,"65 Years and Over":2472223];
var keys = ["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"]
x0.domain(data.map(function(d) return d.State; ));
x1.domain(keys).rangeRound([0, x0.bandwidth()]);
...
Here's that code running without the call to d3.csv:
<!DOCTYPE html>
<style>
.axis .domain
display: none;
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = top: 20, right: 20, bottom: 30, left: 40,
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x0 = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.1);
var x1 = d3.scaleBand()
.padding(0.05);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var z = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var data = ["State":"CA","Under 5 Years":2704659,"5 to 13 Years":4499890,"14 to 17 Years":2159981,"18 to 24 Years":3853788,"25 to 44 Years":10604510,"45 to 64 Years":8819342,"65 Years and Over":4114496,"State":"TX","Under 5 Years":2027307,"5 to 13 Years":3277946,"14 to 17 Years":1420518,"18 to 24 Years":2454721,"25 to 44 Years":7017731,"45 to 64 Years":5656528,"65 Years and Over":2472223,"State":"NY","Under 5 Years":1208495,"5 to 13 Years":2141490,"14 to 17 Years":1058031,"18 to 24 Years":1999120,"25 to 44 Years":5355235,"45 to 64 Years":5120254,"65 Years and Over":2607672,"State":"FL","Under 5 Years":1140516,"5 to 13 Years":1938695,"14 to 17 Years":925060,"18 to 24 Years":1607297,"25 to 44 Years":4782119,"45 to 64 Years":4746856,"65 Years and Over":3187797,"State":"IL","Under 5 Years":894368,"5 to 13 Years":1558919,"14 to 17 Years":725973,"18 to 24 Years":1311479,"25 to 44 Years":3596343,"45 to 64 Years":3239173,"65 Years and Over":1575308,"State":"PA","Under 5 Years":737462,"5 to 13 Years":1345341,"14 to 17 Years":679201,"18 to 24 Years":1203944,"25 to 44 Years":3157759,"45 to 64 Years":3414001,"65 Years and Over":1910571];
var keys = ["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"];
x0.domain(data.map(function(d) return d.State; ));
x1.domain(keys).rangeRound([0, x0.bandwidth()]);
y.domain([0, d3.max(data, function(d) return d3.max(keys, function(key) return d[key]; ); )]).nice();
g.append("g")
.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d) return "translate(" + x0(d.State) + ",0)"; )
.selectAll("rect")
.data(function(d) return keys.map(function(key) return key: key, value: d[key]; ); )
.enter().append("rect")
.attr("x", function(d) return x1(d.key); )
.attr("y", function(d) return y(d.value); )
.attr("width", x1.bandwidth())
.attr("height", function(d) return height - y(d.value); )
.attr("fill", function(d) return z(d.key); );
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x0));
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y).ticks(null, "s"))
.append("text")
.attr("x", 2)
.attr("y", y(y.ticks().pop()) + 0.5)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("Population");
var legend = g.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.selectAll("g")
.data(keys.slice().reverse())
.enter().append("g")
.attr("transform", function(d, i) return "translate(0," + i * 20 + ")"; );
legend.append("rect")
.attr("x", width - 19)
.attr("width", 19)
.attr("height", 19)
.attr("fill", z);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9.5)
.attr("dy", "0.32em")
.text(function(d) return d; );
</script>answered Apr 27 '17 at 5:05
Mark
88k10126183
add a comment |
up vote
2
down vote
accepted
The methods d3.json and d3.csv are AJAX calls meant to fetch data from the server. If you have in-line JSON, you do not need these calls. The fact that your first example works like that is just a side-effect. Your d3.json call fails but the call-back function is still executed. It's just un-necessary and should be written as:
var data1 = [ "My JSON data here" ];
data1.forEach(function (d)
d.year = +d.year;
d.variableA = +d.variableA;
d.variableB = +d.variableB;
d.variableC = +d.variableC;
d.Temp = +d.Temp;
);
var chart = makeLineChart(data1, 'year',
'Device 1': column: 'variableA' ,
'Device 2': column: 'variableB' ,
'Device 3': column: 'variableC' ,
'Device 4': column: 'variableD'
, xAxis: 'Years', yAxis: 'Temperature' );
chart.bind("#chart-line1");
chart.render();
On your second chart again the call to d3.csv is not necessary. There is however some processing that happens from the CSV format to JSON. You'll need to replicate that in creating your JSON and for the rest of the chart to work you'll need something like:
...
var z = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var data = ["State":"CA","Under 5 Years":2704659,"5 to 13 Years":4499890,"14 to 17 Years":2159981,"18 to 24 Years":3853788,"25 to 44 Years":10604510,"45 to 64 Years":8819342,"65 Years and Over":4114496,"State":"TX","Under 5 Years":2027307,"5 to 13 Years":3277946,"14 to 17 Years":1420518,"18 to 24 Years":2454721,"25 to 44 Years":7017731,"45 to 64 Years":5656528,"65 Years and Over":2472223];
var keys = ["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"]
x0.domain(data.map(function(d) return d.State; ));
x1.domain(keys).rangeRound([0, x0.bandwidth()]);
...
Here's that code running without the call to d3.csv:
<!DOCTYPE html>
<style>
.axis .domain
display: none;
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = top: 20, right: 20, bottom: 30, left: 40,
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x0 = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.1);
var x1 = d3.scaleBand()
.padding(0.05);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var z = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var data = ["State":"CA","Under 5 Years":2704659,"5 to 13 Years":4499890,"14 to 17 Years":2159981,"18 to 24 Years":3853788,"25 to 44 Years":10604510,"45 to 64 Years":8819342,"65 Years and Over":4114496,"State":"TX","Under 5 Years":2027307,"5 to 13 Years":3277946,"14 to 17 Years":1420518,"18 to 24 Years":2454721,"25 to 44 Years":7017731,"45 to 64 Years":5656528,"65 Years and Over":2472223,"State":"NY","Under 5 Years":1208495,"5 to 13 Years":2141490,"14 to 17 Years":1058031,"18 to 24 Years":1999120,"25 to 44 Years":5355235,"45 to 64 Years":5120254,"65 Years and Over":2607672,"State":"FL","Under 5 Years":1140516,"5 to 13 Years":1938695,"14 to 17 Years":925060,"18 to 24 Years":1607297,"25 to 44 Years":4782119,"45 to 64 Years":4746856,"65 Years and Over":3187797,"State":"IL","Under 5 Years":894368,"5 to 13 Years":1558919,"14 to 17 Years":725973,"18 to 24 Years":1311479,"25 to 44 Years":3596343,"45 to 64 Years":3239173,"65 Years and Over":1575308,"State":"PA","Under 5 Years":737462,"5 to 13 Years":1345341,"14 to 17 Years":679201,"18 to 24 Years":1203944,"25 to 44 Years":3157759,"45 to 64 Years":3414001,"65 Years and Over":1910571];
var keys = ["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"];
x0.domain(data.map(function(d) return d.State; ));
x1.domain(keys).rangeRound([0, x0.bandwidth()]);
y.domain([0, d3.max(data, function(d) return d3.max(keys, function(key) return d[key]; ); )]).nice();
g.append("g")
.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d) return "translate(" + x0(d.State) + ",0)"; )
.selectAll("rect")
.data(function(d) return keys.map(function(key) return key: key, value: d[key]; ); )
.enter().append("rect")
.attr("x", function(d) return x1(d.key); )
.attr("y", function(d) return y(d.value); )
.attr("width", x1.bandwidth())
.attr("height", function(d) return height - y(d.value); )
.attr("fill", function(d) return z(d.key); );
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x0));
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y).ticks(null, "s"))
.append("text")
.attr("x", 2)
.attr("y", y(y.ticks().pop()) + 0.5)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("Population");
var legend = g.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.selectAll("g")
.data(keys.slice().reverse())
.enter().append("g")
.attr("transform", function(d, i) return "translate(0," + i * 20 + ")"; );
legend.append("rect")
.attr("x", width - 19)
.attr("width", 19)
.attr("height", 19)
.attr("fill", z);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9.5)
.attr("dy", "0.32em")
.text(function(d) return d; );
</script>answered Apr 27 '17 at 5:05
Mark
88k10126183
add a comment |
up vote
2
down vote
accepted
up vote
2
down vote
accepted
The methods d3.json and d3.csv are AJAX calls meant to fetch data from the server. If you have in-line JSON, you do not need these calls. The fact that your first example works like that is just a side-effect. Your d3.json call fails but the call-back function is still executed. It's just un-necessary and should be written as:
var data1 = [ "My JSON data here" ];
data1.forEach(function (d)
d.year = +d.year;
d.variableA = +d.variableA;
d.variableB = +d.variableB;
d.variableC = +d.variableC;
d.Temp = +d.Temp;
);
var chart = makeLineChart(data1, 'year',
'Device 1': column: 'variableA' ,
'Device 2': column: 'variableB' ,
'Device 3': column: 'variableC' ,
'Device 4': column: 'variableD'
, xAxis: 'Years', yAxis: 'Temperature' );
chart.bind("#chart-line1");
chart.render();
On your second chart again the call to d3.csv is not necessary. There is however some processing that happens from the CSV format to JSON. You'll need to replicate that in creating your JSON and for the rest of the chart to work you'll need something like:
...
var z = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var data = ["State":"CA","Under 5 Years":2704659,"5 to 13 Years":4499890,"14 to 17 Years":2159981,"18 to 24 Years":3853788,"25 to 44 Years":10604510,"45 to 64 Years":8819342,"65 Years and Over":4114496,"State":"TX","Under 5 Years":2027307,"5 to 13 Years":3277946,"14 to 17 Years":1420518,"18 to 24 Years":2454721,"25 to 44 Years":7017731,"45 to 64 Years":5656528,"65 Years and Over":2472223];
var keys = ["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"]
x0.domain(data.map(function(d) return d.State; ));
x1.domain(keys).rangeRound([0, x0.bandwidth()]);
...
Here's that code running without the call to d3.csv:
<!DOCTYPE html>
<style>
.axis .domain
display: none;
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = top: 20, right: 20, bottom: 30, left: 40,
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x0 = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.1);
var x1 = d3.scaleBand()
.padding(0.05);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var z = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var data = ["State":"CA","Under 5 Years":2704659,"5 to 13 Years":4499890,"14 to 17 Years":2159981,"18 to 24 Years":3853788,"25 to 44 Years":10604510,"45 to 64 Years":8819342,"65 Years and Over":4114496,"State":"TX","Under 5 Years":2027307,"5 to 13 Years":3277946,"14 to 17 Years":1420518,"18 to 24 Years":2454721,"25 to 44 Years":7017731,"45 to 64 Years":5656528,"65 Years and Over":2472223,"State":"NY","Under 5 Years":1208495,"5 to 13 Years":2141490,"14 to 17 Years":1058031,"18 to 24 Years":1999120,"25 to 44 Years":5355235,"45 to 64 Years":5120254,"65 Years and Over":2607672,"State":"FL","Under 5 Years":1140516,"5 to 13 Years":1938695,"14 to 17 Years":925060,"18 to 24 Years":1607297,"25 to 44 Years":4782119,"45 to 64 Years":4746856,"65 Years and Over":3187797,"State":"IL","Under 5 Years":894368,"5 to 13 Years":1558919,"14 to 17 Years":725973,"18 to 24 Years":1311479,"25 to 44 Years":3596343,"45 to 64 Years":3239173,"65 Years and Over":1575308,"State":"PA","Under 5 Years":737462,"5 to 13 Years":1345341,"14 to 17 Years":679201,"18 to 24 Years":1203944,"25 to 44 Years":3157759,"45 to 64 Years":3414001,"65 Years and Over":1910571];
var keys = ["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"];
x0.domain(data.map(function(d) return d.State; ));
x1.domain(keys).rangeRound([0, x0.bandwidth()]);
y.domain([0, d3.max(data, function(d) return d3.max(keys, function(key) return d[key]; ); )]).nice();
g.append("g")
.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d) return "translate(" + x0(d.State) + ",0)"; )
.selectAll("rect")
.data(function(d) return keys.map(function(key) return key: key, value: d[key]; ); )
.enter().append("rect")
.attr("x", function(d) return x1(d.key); )
.attr("y", function(d) return y(d.value); )
.attr("width", x1.bandwidth())
.attr("height", function(d) return height - y(d.value); )
.attr("fill", function(d) return z(d.key); );
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x0));
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y).ticks(null, "s"))
.append("text")
.attr("x", 2)
.attr("y", y(y.ticks().pop()) + 0.5)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("Population");
var legend = g.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.selectAll("g")
.data(keys.slice().reverse())
.enter().append("g")
.attr("transform", function(d, i) return "translate(0," + i * 20 + ")"; );
legend.append("rect")
.attr("x", width - 19)
.attr("width", 19)
.attr("height", 19)
.attr("fill", z);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9.5)
.attr("dy", "0.32em")
.text(function(d) return d; );
</script>answered Apr 27 '17 at 5:05
Mark
88k10126183
The methods d3.json and d3.csv are AJAX calls meant to fetch data from the server. If you have in-line JSON, you do not need these calls. The fact that your first example works like that is just a side-effect. Your d3.json call fails but the call-back function is still executed. It's just un-necessary and should be written as:
var data1 = [ "My JSON data here" ];
data1.forEach(function (d)
d.year = +d.year;
d.variableA = +d.variableA;
d.variableB = +d.variableB;
d.variableC = +d.variableC;
d.Temp = +d.Temp;
);
var chart = makeLineChart(data1, 'year',
'Device 1': column: 'variableA' ,
'Device 2': column: 'variableB' ,
'Device 3': column: 'variableC' ,
'Device 4': column: 'variableD'
, xAxis: 'Years', yAxis: 'Temperature' );
chart.bind("#chart-line1");
chart.render();
On your second chart again the call to d3.csv is not necessary. There is however some processing that happens from the CSV format to JSON. You'll need to replicate that in creating your JSON and for the rest of the chart to work you'll need something like:
...
var z = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var data = ["State":"CA","Under 5 Years":2704659,"5 to 13 Years":4499890,"14 to 17 Years":2159981,"18 to 24 Years":3853788,"25 to 44 Years":10604510,"45 to 64 Years":8819342,"65 Years and Over":4114496,"State":"TX","Under 5 Years":2027307,"5 to 13 Years":3277946,"14 to 17 Years":1420518,"18 to 24 Years":2454721,"25 to 44 Years":7017731,"45 to 64 Years":5656528,"65 Years and Over":2472223];
var keys = ["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"]
x0.domain(data.map(function(d) return d.State; ));
x1.domain(keys).rangeRound([0, x0.bandwidth()]);
...
Here's that code running without the call to d3.csv:
<!DOCTYPE html>
<style>
.axis .domain
display: none;
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = top: 20, right: 20, bottom: 30, left: 40,
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x0 = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.1);
var x1 = d3.scaleBand()
.padding(0.05);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var z = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var data = ["State":"CA","Under 5 Years":2704659,"5 to 13 Years":4499890,"14 to 17 Years":2159981,"18 to 24 Years":3853788,"25 to 44 Years":10604510,"45 to 64 Years":8819342,"65 Years and Over":4114496,"State":"TX","Under 5 Years":2027307,"5 to 13 Years":3277946,"14 to 17 Years":1420518,"18 to 24 Years":2454721,"25 to 44 Years":7017731,"45 to 64 Years":5656528,"65 Years and Over":2472223,"State":"NY","Under 5 Years":1208495,"5 to 13 Years":2141490,"14 to 17 Years":1058031,"18 to 24 Years":1999120,"25 to 44 Years":5355235,"45 to 64 Years":5120254,"65 Years and Over":2607672,"State":"FL","Under 5 Years":1140516,"5 to 13 Years":1938695,"14 to 17 Years":925060,"18 to 24 Years":1607297,"25 to 44 Years":4782119,"45 to 64 Years":4746856,"65 Years and Over":3187797,"State":"IL","Under 5 Years":894368,"5 to 13 Years":1558919,"14 to 17 Years":725973,"18 to 24 Years":1311479,"25 to 44 Years":3596343,"45 to 64 Years":3239173,"65 Years and Over":1575308,"State":"PA","Under 5 Years":737462,"5 to 13 Years":1345341,"14 to 17 Years":679201,"18 to 24 Years":1203944,"25 to 44 Years":3157759,"45 to 64 Years":3414001,"65 Years and Over":1910571];
var keys = ["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"];
x0.domain(data.map(function(d) return d.State; ));
x1.domain(keys).rangeRound([0, x0.bandwidth()]);
y.domain([0, d3.max(data, function(d) return d3.max(keys, function(key) return d[key]; ); )]).nice();
g.append("g")
.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d) return "translate(" + x0(d.State) + ",0)"; )
.selectAll("rect")
.data(function(d) return keys.map(function(key) return key: key, value: d[key]; ); )
.enter().append("rect")
.attr("x", function(d) return x1(d.key); )
.attr("y", function(d) return y(d.value); )
.attr("width", x1.bandwidth())
.attr("height", function(d) return height - y(d.value); )
.attr("fill", function(d) return z(d.key); );
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x0));
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y).ticks(null, "s"))
.append("text")
.attr("x", 2)
.attr("y", y(y.ticks().pop()) + 0.5)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("Population");
var legend = g.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.selectAll("g")
.data(keys.slice().reverse())
.enter().append("g")
.attr("transform", function(d, i) return "translate(0," + i * 20 + ")"; );
legend.append("rect")
.attr("x", width - 19)
.attr("width", 19)
.attr("height", 19)
.attr("fill", z);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9.5)
.attr("dy", "0.32em")
.text(function(d) return d; );
</script><!DOCTYPE html>
<style>
.axis .domain
display: none;
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = top: 20, right: 20, bottom: 30, left: 40,
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x0 = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.1);
var x1 = d3.scaleBand()
.padding(0.05);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var z = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var data = ["State":"CA","Under 5 Years":2704659,"5 to 13 Years":4499890,"14 to 17 Years":2159981,"18 to 24 Years":3853788,"25 to 44 Years":10604510,"45 to 64 Years":8819342,"65 Years and Over":4114496,"State":"TX","Under 5 Years":2027307,"5 to 13 Years":3277946,"14 to 17 Years":1420518,"18 to 24 Years":2454721,"25 to 44 Years":7017731,"45 to 64 Years":5656528,"65 Years and Over":2472223,"State":"NY","Under 5 Years":1208495,"5 to 13 Years":2141490,"14 to 17 Years":1058031,"18 to 24 Years":1999120,"25 to 44 Years":5355235,"45 to 64 Years":5120254,"65 Years and Over":2607672,"State":"FL","Under 5 Years":1140516,"5 to 13 Years":1938695,"14 to 17 Years":925060,"18 to 24 Years":1607297,"25 to 44 Years":4782119,"45 to 64 Years":4746856,"65 Years and Over":3187797,"State":"IL","Under 5 Years":894368,"5 to 13 Years":1558919,"14 to 17 Years":725973,"18 to 24 Years":1311479,"25 to 44 Years":3596343,"45 to 64 Years":3239173,"65 Years and Over":1575308,"State":"PA","Under 5 Years":737462,"5 to 13 Years":1345341,"14 to 17 Years":679201,"18 to 24 Years":1203944,"25 to 44 Years":3157759,"45 to 64 Years":3414001,"65 Years and Over":1910571];
var keys = ["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"];
x0.domain(data.map(function(d) return d.State; ));
x1.domain(keys).rangeRound([0, x0.bandwidth()]);
y.domain([0, d3.max(data, function(d) return d3.max(keys, function(key) return d[key]; ); )]).nice();
g.append("g")
.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d) return "translate(" + x0(d.State) + ",0)"; )
.selectAll("rect")
.data(function(d) return keys.map(function(key) return key: key, value: d[key]; ); )
.enter().append("rect")
.attr("x", function(d) return x1(d.key); )
.attr("y", function(d) return y(d.value); )
.attr("width", x1.bandwidth())
.attr("height", function(d) return height - y(d.value); )
.attr("fill", function(d) return z(d.key); );
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x0));
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y).ticks(null, "s"))
.append("text")
.attr("x", 2)
.attr("y", y(y.ticks().pop()) + 0.5)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("Population");
var legend = g.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.selectAll("g")
.data(keys.slice().reverse())
.enter().append("g")
.attr("transform", function(d, i) return "translate(0," + i * 20 + ")"; );
legend.append("rect")
.attr("x", width - 19)
.attr("width", 19)
.attr("height", 19)
.attr("fill", z);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9.5)
.attr("dy", "0.32em")
.text(function(d) return d; );
</script><!DOCTYPE html>
<style>
.axis .domain
display: none;
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = top: 20, right: 20, bottom: 30, left: 40,
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x0 = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.1);
var x1 = d3.scaleBand()
.padding(0.05);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var z = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var data = ["State":"CA","Under 5 Years":2704659,"5 to 13 Years":4499890,"14 to 17 Years":2159981,"18 to 24 Years":3853788,"25 to 44 Years":10604510,"45 to 64 Years":8819342,"65 Years and Over":4114496,"State":"TX","Under 5 Years":2027307,"5 to 13 Years":3277946,"14 to 17 Years":1420518,"18 to 24 Years":2454721,"25 to 44 Years":7017731,"45 to 64 Years":5656528,"65 Years and Over":2472223,"State":"NY","Under 5 Years":1208495,"5 to 13 Years":2141490,"14 to 17 Years":1058031,"18 to 24 Years":1999120,"25 to 44 Years":5355235,"45 to 64 Years":5120254,"65 Years and Over":2607672,"State":"FL","Under 5 Years":1140516,"5 to 13 Years":1938695,"14 to 17 Years":925060,"18 to 24 Years":1607297,"25 to 44 Years":4782119,"45 to 64 Years":4746856,"65 Years and Over":3187797,"State":"IL","Under 5 Years":894368,"5 to 13 Years":1558919,"14 to 17 Years":725973,"18 to 24 Years":1311479,"25 to 44 Years":3596343,"45 to 64 Years":3239173,"65 Years and Over":1575308,"State":"PA","Under 5 Years":737462,"5 to 13 Years":1345341,"14 to 17 Years":679201,"18 to 24 Years":1203944,"25 to 44 Years":3157759,"45 to 64 Years":3414001,"65 Years and Over":1910571];
var keys = ["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"];
x0.domain(data.map(function(d) return d.State; ));
x1.domain(keys).rangeRound([0, x0.bandwidth()]);
y.domain([0, d3.max(data, function(d) return d3.max(keys, function(key) return d[key]; ); )]).nice();
g.append("g")
.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d) return "translate(" + x0(d.State) + ",0)"; )
.selectAll("rect")
.data(function(d) return keys.map(function(key) return key: key, value: d[key]; ); )
.enter().append("rect")
.attr("x", function(d) return x1(d.key); )
.attr("y", function(d) return y(d.value); )
.attr("width", x1.bandwidth())
.attr("height", function(d) return height - y(d.value); )
.attr("fill", function(d) return z(d.key); );
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x0));
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y).ticks(null, "s"))
.append("text")
.attr("x", 2)
.attr("y", y(y.ticks().pop()) + 0.5)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("Population");
var legend = g.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.selectAll("g")
.data(keys.slice().reverse())
.enter().append("g")
.attr("transform", function(d, i) return "translate(0," + i * 20 + ")"; );
legend.append("rect")
.attr("x", width - 19)
.attr("width", 19)
.attr("height", 19)
.attr("fill", z);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9.5)
.attr("dy", "0.32em")
.text(function(d) return d; );
</script>answered Apr 27 '17 at 5:05
Mark
88k10126183
answered Apr 27 '17 at 5:05
Mark
88k10126183
answered Apr 27 '17 at 5:05
Mark
88k10126183
answered Apr 27 '17 at 5:05
Mark
88k10126183
88k10126183
add a comment |
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f43635748%2fd3-js-how-to-use-inline-json-as-dataset-for-d3-charts-instead-of-csv-tsv-json%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Try to add
d = [ "My JSON data here" ];on the second line, afterd3.csv()and before thefor– cirofdo
Apr 26 '17 at 14:00
@TheBiro You mean to say, replacing "\data.csv" with 'd = [ "My JSON data here" ];' will work? I'm not getting clearly where to add d = [ "My JSON data here" ];.
– Shri
Apr 26 '17 at 15:12
just remove the call to
d3.jsonand use your generated data– thedude
Apr 26 '17 at 15:34
No, my idea was to overwrite the data
dwith your json insided3.csv.– cirofdo
Apr 26 '17 at 15:53
@TheBiro it's not working, I just tired as follow :
d3.csv("", function(d = [ "State": "CA", "Under 5 Years": 2704659, "5 to 13 Years": 4499890, "14 to 17 Years": 2159981, "18 to 24 Years": 3853788, "25 to 44 Years": 10604510, "45 to 64 Years": 8819342, "65 Years and Over": 4114496 , "State": "TX", "Under 5 Years": 2027307, "5 to 13 Years": 3277946, "14 to 17 Years": 1420518, "18 to 24 Years": 2454721, "25 to 44 Years": 7017731, "45 to 64 Years": 5656528, "65 Years and Over": 2472223 ], i, columns) {it shows following Error: <text> attribute y: Expected length, "NaN". in D3.js file.– Shri
Apr 26 '17 at 19:45