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.










share|improve this question























  • 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











  • 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










  • @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















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.










share|improve this question























  • 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











  • 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










  • @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













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.










share|improve this question















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 10 at 15:25

























asked Apr 26 '17 at 13:32









Shri

7611




7611











  • 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











  • 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










  • @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










  • @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










  • 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
















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













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>








share|improve this answer




















    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













     

    draft saved


    draft discarded


















    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

























    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>








    share|improve this answer
























      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>








      share|improve this answer






















        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>








        share|improve this answer












        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>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Apr 27 '17 at 5:05









        Mark

        88k10126183




        88k10126183



























             

            draft saved


            draft discarded















































             


            draft saved


            draft discarded














            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





















































            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







            這個網誌中的熱門文章

            How to read a connectionString WITH PROVIDER in .NET Core?

            In R, how to develop a multiplot heatmap.2 figure showing key labels successfully

            Museum of Modern and Contemporary Art of Trento and Rovereto