GDP Data from India: Learning D3.js (part 1)

GDP Data for India over the years. Simple bar chart example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
    <style>
      body {
        font-family: futura;
      }
      h2.title {
        color: black;
        text-align: center;
      }
      .axis {
        font-family: arial;
        font-size: 0.7em;
      }
      text {
        fill: black;
        stroke: none;
      }
      .label {
        font-size: 2em;
      }
      path {
        fill: none;
        stroke: black;
        stroke-width: 2px;
      }
      .tick {
        fill: none;
        stroke: black;
      }
      .bar {
        opacity: 0.9;
        stroke: none;
        fill: steelblue;
      }

.bar:hover {
        fill: orangered ;
      }
      .d3-tip {
        line-height: 1;
        font-weight: bold;
        padding: 12px;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        border-radius: 2px;
      }

</style>

// Choose data for GDP Figures
          data = data[field];
          data = convert_to_usd(data);
          // bind our data to svg rects for the bar plot
          svg.selectAll(".bar")
              .data(data)
              .enter()
              .append("rect")
                .attr('class', 'bar')
            // maximum price for rent
            var max_y = d3.max(data, function(d) {
                return +d[data_field];
            });

var time_years = data.map(function(d){ return d['year'];});

console.log("Years are :"+time_years);
            // Create x-axis scale mapping dates -> pixels
            var time_scale = d3.scale.ordinal()
                .rangeBands([0, width])
                .domain(time_years);

// Create y-axis scale mapping price -> pixels
            var measure_scale = d3.scale.linear()
                .range([height, 0])
                .domain([0, max_y*1.1]);

// Create D3 axis object from time_scale for the x-axis
            var time_axis = d3.svg.axis()
                .scale(time_scale);

// Create D3 axis object from measure_scale for the y-axis
            var measure_axis = d3.svg.axis()
                .scale(measure_scale)
                .orient("left")
                .ticks(10);

// Append SVG to page corresponding to the D3 x-axis
            svg.append('g')
                .attr('class', 'x axis')
                .attr('transform', "translate(0," + height + ")")
                .call(time_axis);

// Append SVG to page corresponding to the D3 y-axis
            svg.append('g')
                .attr('class', 'y axis')
                .call(measure_axis);

// add label to y-axis
            var y_label = d3.select(".y.axis")
                .append("text")
                .attr('class', 'label')
                .text("USD (billions)")
            		.style('font-size', '2.2em')
                .attr("transform", "rotate(-90), translate(0, -70)");
      
      			// center y axis label
      			y_label.attr("x", -(height / 2)).attr('y', -40)
            	.style("text-anchor", "middle");
        
            // based on the data bound to each svg rect,
            // change its x, y, width, height accordingly
            d3.selectAll('.bar')
                .attr('x', function(d) {
                    return time_scale(d['year']);
                })
                .attr('width', function(d) {
                    return width / data.length - barPadding;
                })
                .attr('y', function(d) {
                    return measure_scale(+d[data_field]);
                })
                .attr('height', function(d) {
                    return height - measure_scale(+d[data_field]);
                })
                .append("svg:title")
                .text(function(d){
                  return d['data'];
                });
        };

</script>
  </head>
  <body>
    <script type="text/javascript">
    // load our data file asynchronously and pass the data
    // to the draw function once it is loaded.
    d3.json("india_inflation_adjusted_gdp_by_sector.json", draw);
    </script>
  </body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js