CODEWITHSUNDEEP
javascripthtmld3.jsbar-chart
User0911
User0911

Reputation: 1582

Issue with d3.js bar graph

I am porting a bar graph using json data and d3.js But I am not able to do so. I have tried many ways. Any help would be appreciated.

Here is my code,

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
font: 10px sans-serif;
}

.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}

.bar {
fill: steelblue;
}

.x.axis path {
 display: none;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>



var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
.rangeRound([height, 0]);

var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));

var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var data = [
        {
        "State": "AL",
        "Under 5 Years": 310504,
        "5 to 13 Years": 552339,
        "14 to 17 Years": 259034
        },
        {
        "State": "PA",
        "Under 5 Years": 737462,
        "5 to 13 Years": 1345341,
        "14 to 17 Years": 679201
        },
        {
        "State": "RI",
        "Under 5 Years": 60934,
        "5 to 13 Years": 111408,
        "14 to 17 Years": 56198
        },
        {
        "State": "SC",
        "Under 5 Years": 303024,
        "5 to 13 Years": 517803,
        "14 to 17 Years": 245400
        },
        {
        "State": "SD",
        "Under 5 Years": 58566,
        "5 to 13 Years": 94438,
        "14 to 17 Years": 45305
        },
        {
        "State": "TN",
        "Under 5 Years": 416334,
        "5 to 13 Years": 725948,
        "14 to 17 Years": 336312
        },
        {
        "State": "TX",
        "Under 5 Years": 2027307,
        "5 to 13 Years": 3277946,
        "14 to 17 Years": 1420518
        },
        {
        "State": "WY",
        "Under 5 Years": 38253,
        "5 to 13 Years": 60890,
        "14 to 17 Years": 29314
        }
    ];

d3.json.parse(data, function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));

data.forEach(function(d) {
var y0 = 0;
d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
d.total = d.ages[d.ages.length - 1].y1;
});


x.domain(data.map(function(d) { return d.State; }));
y.domain([0, d3.max(data, function(d) { return d.total; })]);

 svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

 svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
 .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Population");

 var state = svg.selectAll(".state")
  .data(data)
 .enter().append("g")
  .attr("class", "g")
  .attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });

 state.selectAll("rect")
  .data(function(d) { return d.ages; })
 .enter().append("rect")
  .attr("width", x.rangeBand())
  .attr("y", function(d) { return y(d.y1); })
  .attr("height", function(d) { return y(d.y0) - y(d.y1); })
  .style("fill", function(d) { return color(d.name); });

 var legend = svg.selectAll(".legend")
  .data(color.domain().slice().reverse())
 .enter().append("g")
  .attr("class", "legend")
  .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
  .attr("x", width - 18)
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", color);

  legend.append("text")
  .attr("x", width - 24)
  .attr("y", 9)
  .attr("dy", ".35em")
  .style("text-anchor", "end")
  .text(function(d) { return d; });

 });

 </script>

Upvotes: 1

Views: 773

Answers (2)

Abalsin907
Abalsin907

Reputation: 29

This may help,

  1. Take your data and stick it in an external json file.

    For example, "mydata.json"

  2. Instead of 

    d3.json.parse(data, function(error, data)

  3. Remove parse and replace your data with the path to your external json file.

     d3.json(path/mydata.json, function(error, data)

  4. Make sure the external file is in the correct json format

Upvotes: 0

user1614080
user1614080

Reputation: 2874

There is no d3.json.parse method. If you get rid of that everything seems to work and here's a fiddle with it.

Upvotes: 1

Related Questions