Responsive Charts with D3 with json parsing

I was using chart of D3 but the chart were not responsive and also with csv.

I found a article on eyeseast.github.io and i modified the article according to my need to make
D3 chart responsive and work with JSON value.

I passed JSON value into the Code and made some easy change.

I really want to thanks eyeseast.github.io to great article of Responsive Charts with D3 but the article
was not fulfilling my requirement for JSON parsing.

That article use a csv file for data and some 4 column data to represent the Graph which was so difficult to understand and edit.

I decided to make it more easy for  D3 chart with json parsing.

Here is an example:

Just copy and paste this code into a html file and run.

 <style type="text/css">
 /* Start css for D3 Graph for twitter Index */
div#chart{
  max-width: 800px;
  width: auto;
}

.bar rect {
    stroke: #fff;
    shape-rendering: crispEdges;
}

.bar rect.background {
    fill: #E7E7E7;
}

.bar rect.percent {
    fill: #357EBD;
}

.bar:hover rect.percent {
    fill: #BCE8F1;
}

.bar text {
    font-size: 12px;
    fill: #FFF;
}

.axis line {
    stroke: #ccc;
    stroke-width: 1;
}

line.median {
    stroke: #777;
    stroke-width: 1;
}
.tick text{
  font-size: 11px;
}
.d3chart{
  width:100%; border:1px solid #EEE;padding:20px;
}
/* End css for D3 Graph for twitter Index */
</style>
<div class="d3chart">
    <div id="chart"></div>
    <script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
  var margin = {top: 30, right: 10, bottom: 30, left: 10}
  , width = parseInt(d3.select('#chart').style('width'), 10)
  , width = width - margin.left - margin.right
  , height = 200 // placeholder
  , barHeight = 20
  , spacing = 3
  , percent = d3.format();
var mydata = [{"Cname":"Threadless","Total":2193775},{"Cname":"TOMS","Total":2173026},{"Cname":"hm","Total":3432181}];
  // scales and axes
  var x = d3.scale.linear()
  .range([0, width])
  .domain([0,Math.max.apply(Math,mydata.map(function(o){return o.Total;}))+400000]); // hard-coding this because I know the data
  var y = d3.scale.ordinal();

  var xAxis = d3.svg.axis()
  .scale(x)
  .tickFormat(percent);

  // create the chart
  var chart = d3.select('#chart').append('svg')
  .style('width', '103%')
  .append('g')
  .attr('transform', 'translate(' + [margin.left, margin.top] + ')');

  function n(err, data) {
  // sort
    data = data.sort(function(a,b) { return parseFloat(b.Total) - parseFloat(a.Total) } );



    // set y domain
    y.domain(d3.range(data.length))
    .rangeBands([0, data.length * barHeight]);

    // set height based on data
    height = y.rangeExtent()[1];
    d3.select(chart.node().parentNode)
    .style('height', (height + margin.top + margin.bottom) + 'px')

    // render the chart

    // add top and bottom axes
    chart.append('g')
    .attr('class', 'x axis top')
    .call(xAxis.orient('top'));

    chart.append('g')
    .attr('class', 'x axis bottom')
    .attr('transform', 'translate(0,' + height + ')')
    .call(xAxis.orient('bottom'));

    var bars = chart.selectAll('.bar')
    .data(data)
    .enter().append('g')
    .attr('class', 'bar')
    .attr('transform', function(d, i) { return 'translate(0,'  + y(i) + ')'; });

    bars.append('rect')
    .attr('class', 'background')
    .attr('height', y.rangeBand())
    .attr('width', width);

    bars.append('rect')
    .attr('class', 'percent')
    .attr('height', y.rangeBand())
    .attr('width', function(d) { return x(d.Total); })

    bars.append('text')
    .text(function(d) { return capitalise(d.Cname)+' ('+d.Total+')'; })
    .attr('class', 'name')
    .attr('y', y.rangeBand() - 5)
    .attr('x', spacing);
  };

  // resize
  d3.select(window).on('resize', resize);

  function resize() {
    // update width
    width = parseInt(d3.select('#chart').style('width'), 10);
    width = width - margin.left - margin.right;

    // resize the chart
    x.range([0, width]);
    d3.select(chart.node().parentNode)
    .style('height', (y.rangeExtent()[1] + margin.top + margin.bottom) + 'px')
    .style('width', (width + margin.left + margin.right + 5) + 'px');

    chart.selectAll('rect.background')
    .attr('width', width);

    chart.selectAll('rect.percent')
    .attr('width', function(d) { return x(d.Total); });

    // update axes
    chart.select('.x.axis.top').call(xAxis.orient('top'));
    chart.select('.x.axis.bottom').call(xAxis.orient('bottom'));
  }
  // call above functino to create graph and pass the json data
  n([],mydata);

  // functino for change name in only first letter capital
  function capitalise(string) {
    return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
  }
</script>    </div>


I want to say thanks to eyeseast.github.io to post this article on which i made some changes and made it for json parsing and responsive Chart with good color combination.

You need to only copy and paste the in your file and just refresh the page if will give you more flexibility to use D3 graph with Json.

Do not forget to comment on this article if you find this article good.
Thanks