Cant bind Json data to d3.js Object

Question

I'm trying to bind a Json data object into a d3.js code, that creatses facets of Bar charts ( From vida.io )

Here is the following Json data:

 [
  {
    "chart_title": "Population",
    "unit": "billion",
    "India": 1.22,
    "China": 1.36
  },
  {
    "chart_title": "Popluation Grow Rate",
    "unit": "percentage",
    "India": 0.0131,
    "China": 0.0048
  },
  {
    "chart_title": "Tallest Building",
    "unit": "meter",
    "India": 833,
    "China": 1614
  },
  {
    "chart_title": "Sex Ratio",
    "unit": "",
    "India": 1.08,
    "China": 1.06
  },
  {
    "chart_title": "Literacy All Gender",
    "unit": "percentage",
    "India": 0.74,
    "China": 0.92
  },
  {
    "chart_title": "Literacy All Male",
    "unit": "percentage",
    "India": 0.82,
    "China": 0.96
  },
  {
    "chart_title": "Literacy All Female",
    "unit": "percentage",
    "India": 0.65,
    "China": 0.88
  },
  {
    "chart_title": "Area",
    "unit": "million square km",
    "India": 3.31,
    "China": 9.706
  },
  {
    "chart_title": "Area Land",
    "unit": "million square km",
    "India": 2.97,
    "China": 9.434
  },
  {
    "chart_title": "Area Water",
    "unit": "million square km",
    "India": 0.34,
    "China": 0.272
  },
  {
    "chart_title": "Infant Mortality",
    "unit": "per thousand",
    "India": 46.07,
    "China": 15.62
  }
]

i'm trying to defind the data as a variable (value_var ,,,) with no success, although the svg.data has a value var argument.

Here is the following code i'm using, not sure why its not working:

<!DOCTYPE html>
<html >
  <head>

       <title>D3 Page Template</title>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
   </head>
<style>
.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}
.bar {
  fill: #4682b4;
}

svg {
  border: none !important;
}

.chart-title {
  font-size: 18px;
  font-weight: bold;
}
</style>
     <body>
    <p>this is</p>
    <div id="canvas-svg"></div>

</div>
    <script>

 var value_data=[
  {
    "chart_title": "Population",
    "unit": "billion",
    "India": 1.22,
    "China": 1.36
  },
  {
    "chart_title": "Popluation Grow Rate",
    "unit": "percentage",
    "India": 0.0131,
    "China": 0.0048
  },
  {
    "chart_title": "Tallest Building",
    "unit": "meter",
    "India": 833,
    "China": 1614
  },
  {
    "chart_title": "Sex Ratio",
    "unit": "",
    "India": 1.08,
    "China": 1.06
  },
  {
    "chart_title": "Literacy All Gender",
    "unit": "percentage",
    "India": 0.74,
    "China": 0.92
  },
  {
    "chart_title": "Literacy All Male",
    "unit": "percentage",
    "India": 0.82,
    "China": 0.96
  },
  {
    "chart_title": "Literacy All Female",
    "unit": "percentage",
    "India": 0.65,
    "China": 0.88
  },
  {
    "chart_title": "Area",
    "unit": "million square km",
    "India": 3.31,
    "China": 9.706
  },
  {
    "chart_title": "Area Land",
    "unit": "million square km",
    "India": 2.97,
    "China": 9.434
  },
  {
    "chart_title": "Area Water",
    "unit": "million square km",
    "India": 0.34,
    "China": 0.272
  },
  {
    "chart_title": "Infant Mortality",
    "unit": "per thousand",
    "India": 46.07,
    "China": 15.62
  }
];

   /*--- IMPORTANT GUIDELINES ---
1. Use div #canvas-svg for svg rendering
    var svg = d3.select("#canvas-svg");
2. 'data' variable contains JSON data from Data tab
    Do NOT overwrite this variable 
3. To define customizable properties, use capitalized variable names,
    and define them in Properties tab ---*/

var WIDTH = 800;

var COLOR_1 = config.color1;

var COLOR_2 = config.color2;

var X_DATA_PARSE = vida.string;

var Y_DATA_PARSE = vida.number;

var Y_DATA_FORMAT = d3.format("");

var margin = {top: 70, right: 20, bottom: 30, left: 60},
    width = WIDTH - margin.left - margin.right,
    height = WIDTH - margin.top - margin.bottom;

var groups = [];

var makeBar = function(width, height, bar_data) {
  var Y_DATA_FORMAT = d3.format("");

  var Y_AXIS_LABEL = bar_data.unit;

  if (bar_data.unit === 'percentage') {
    Y_DATA_FORMAT = d3.format(".1%");
  }

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

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

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

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

  var value_data = _.map(groups, function(d) {
    return {x_axis: d, y_axis: bar_data[d]};
  });

  x.domain(value_data.map(function(d) { return d.x_axis; }));
  y.domain([0, d3.max(value_data, function(d) { return d.y_axis; })]);

  var svg = d3.select("#canvas-svg").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 detailBox = svg.append("svg:text")
      .attr("dx", "20px")
      .attr("dy", "-5px")
      .attr("text-anchor", "right")
      .style("fill", "#1D5096")
      .style("font-weight", "bold");

  var title = svg.append("text")
      .attr("x", 0)
      .attr("y", -50)
      .attr("class","chart-title")
      .text(bar_data.chart_title);

  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(0)")
      .attr("y", -25)
      .attr("x", 0)
      .style("text-anchor", "left")
      .text(Y_AXIS_LABEL);

  svg.selectAll(".bar")
      .data(value_data)
    .enter().append("rect")
      .style("fill", function(d) {
        if (d.x_axis === groups[0]) {
          return COLOR_1;
        } else {
          return COLOR_2;
        }
      })
      .attr("x", function(d) { return x(d.x_axis); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.y_axis); })
      .attr("height", function(d) { return height - y(d.y_axis); })
      .on("mouseover", function(d, i, j) {
        detailBox.attr("x", x.range()[i] - Y_DATA_FORMAT(d.y_axis).length / 2)
          .attr("y", y(d.y_axis))
          .text(Y_DATA_FORMAT(d.y_axis))
          .style("visibility", "visible");

        d3.select(this)
          .style("opacity", 0.7);
      }).on("mouseout", function() {
        detailBox.style("visibility", "hidden");

        d3.select(this)
          .style("opacity", 1.0);
      });
};

var width = width / data.length - 10;
width = width > 180 ? width : 180;

var keys = Object.keys(data[0]);
for (var i = 0; i < keys.length; i++) {
  if (keys[i] !== "chart_title" && keys[i] !== "unit") {
    groups.push(keys[i]);
  }
}

for (i = 0; i < data.length; i++) {
  makeBar(width, width, data[i]);
}
   </script> 
    </body>



</html>

Any Help on this would be great!!!

potatopeelings · Accepted Answer · 2015-07-19 11:33:22Z

1

Your code seems to be incomplete

You are missing 2 variables config and vida which are used in your code. Add this script block right before </head>

<script>
    var config = {
        color1: 'red',
        color2: 'blue',
    }
    var vida = {}
</script>

You are also missing the variable data. Modify your value_data declaration like so

var value_data = data = [
    {
       ...

You also seem to be using underscore.js but don't have a script included for it. Add this right before your </head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

Feel free to modify the path to a local path if you have it.

While these 3 changes should get it working, there's other problems with your markup (like your style block is not within your head, you seem to have a mismatched tag at the top of your body...) that you'll need to correct too.

answered Jul 19, 2015 at 11:33

potatopeelings

41.2k8 gold badges97 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yehoshaphat Schellekens Over a year ago

Thanks! that did the job!

Collectives™ on Stack Overflow

Cant bind Json data to d3.js Object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related