GDP Data for India over the years. Simple bar chart example
Last active
April 12, 2016 23:24
-
-
Save mickeykedia/f26f3839ef7f5d8b00b558ad8b8bb7af to your computer and use it in GitHub Desktop.
GDP Data from India: Learning D3.js (part 1)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> | |
| <script type="text/javascript"> | |
| function convert_to_usd(data){ | |
| conversion_rate = 67.0; | |
| for (var i = 0; i < data.length; i++) { | |
| // Converting to Billions of Rupees from Crores and then converting | |
| // to dollars | |
| data[i]['data'] = (data[i]['data'])/(conversion_rate*100); | |
| }; | |
| return data; | |
| } | |
| // https://github.com/mbostock/d3/wiki/Time-Formatting | |
| //format = d3.time.format("%Y-%m"); | |
| function draw(data) { | |
| "use strict"; | |
| // set margins according to Mike Bostock's margin conventions | |
| // http://bl.ocks.org/mbostock/3019563 | |
| var margin = {top: 25, right: 40, bottom: 100, left: 175}; | |
| // set height and width of chart | |
| var width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var barPadding = 10; | |
| // specify the radius of our circles and the | |
| // column we want to plot | |
| var field = 'Gross Domestic Product (GDP) at Factor Cost'; | |
| var data_field = 'data'; | |
| // Append the title for the graph | |
| d3.select("body") | |
| .append("h2") | |
| .text("India GDP (Inflation Adjusted) Trend") | |
| .attr('class', 'title'); | |
| // append the SVG tag with height and width to accommodate for margins | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append('g') | |
| .attr('class','chart') | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| // 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"Net Indirect Taxes": [{"data": 270745, "year": "04-05"}, {"data": 290171, "year": "05-06"}, {"data": 307125, "year": "06-07"}, {"data": 354311, "year": "07-08"}, {"data": 257674, "year": "08-09"}, {"data": 272542, "year": "09-10"}, {"data": 350869, "year": "10-11"}, {"data": 393342, "year": "11-12"}], "Private Final Consumption Expenditure (PFCE)": [{"data": 1917508, "year": "04-05"}, {"data": 2083309, "year": "05-06"}, {"data": 2259892, "year": "06-07"}, {"data": 2471397, "year": "07-08"}, {"data": 2649610, "year": "08-09"}, {"data": 2841675, "year": "09-10"}, {"data": 3072115, "year": "10-11"}, {"data": 3241479, "year": "11-12"}], "Consumption of Fixed Capital": [{"data": 319891, "year": "04-05"}, {"data": 350894, "year": "05-06"}, {"data": 385699, "year": "06-07"}, {"data": 427630, "year": "07-08"}, {"data": 468903, "year": "08-09"}, {"data": 520320, "year": "09-10"}, {"data": 564463, "year": "10-11"}, {"data": 601034, "year": "11-12"}], "Gross National Income (GNI) at Factor Cost": [{"data": 2949089, "year": "04-05"}, {"data": 3228177, "year": "05-06"}, {"data": 3534849, "year": "06-07"}, {"data": 3879457, "year": "07-08"}, {"data": 4133292, "year": "08-09"}, {"data": 4479973, "year": "09-10"}, {"data": 4833178, "year": "10-11"}, {"data": 5150686, "year": "11-12"}], "CIS": [{"data": 80150, "year": "04-05"}, {"data": 101511, "year": "05-06"}, {"data": 133556, "year": "06-07"}, {"data": 175411, "year": "07-08"}, {"data": 85290, "year": "08-09"}, {"data": 139173, "year": "09-10"}, {"data": 191258, "year": "10-11"}, {"data": 195811, "year": "11-12"}], "Net Domestic Product (NDP) at Factor Cost": [{"data": 2651573, "year": "04-05"}, {"data": 2902179, "year": "05-06"}, {"data": 3178665, "year": "06-07"}, {"data": 3469006, "year": "07-08"}, {"data": 3689773, "year": "08-09"}, {"data": 3987317, "year": "09-10"}, {"data": 4321491, "year": "10-11"}, {"data": 4601480, "year": "11-12"}], "Indirect Taxes": [{"data": 363967, "year": "04-05"}, {"data": 405717, "year": "05-06"}, {"data": 456797, "year": "06-07"}, {"data": 503347, "year": "07-08"}, {"data": 474009, "year": "08-09"}, {"data": 459607, "year": "09-10"}, {"data": 545728, "year": "10-11"}, {"data": 593322, "year": "11-12"}], "Less Imports of Goods and Services": [{"data": 625945, "year": "04-05"}, {"data": 829926, "year": "05-06"}, {"data": 1008198, "year": "06-07"}, {"data": 1110963, "year": "07-08"}, {"data": 1363302, "year": "08-09"}, {"data": 1332899, "year": "09-10"}, {"data": 1540648, "year": "10-11"}, {"data": 1825210, "year": "11-12"}], "Exports of Goods and Services": [{"data": 569051, "year": "04-05"}, {"data": 717424, "year": "05-06"}, {"data": 863459, "year": "06-07"}, {"data": 914628, "year": "07-08"}, {"data": 1048140, "year": "08-09"}, {"data": 998149, "year": "09-10"}, {"data": 1224415, "year": "10-11"}, {"data": 1411774, "year": "11-12"}], "Community, Social & Pers. Services": [{"data": 411361, "year": "04-05"}, {"data": 440426, "year": "05-06"}, {"data": 452823, "year": "06-07"}, {"data": 483917, "year": "07-08"}, {"data": 544497, "year": "08-09"}, {"data": 610096, "year": "09-10"}, {"data": 637675, "year": "10-11"}, {"data": 674703, "year": "11-12"}], "Gross Domestic Product (GDP) at Factor Cost": [{"data": 2971464, "year": "04-05"}, {"data": 3253073, "year": "05-06"}, {"data": 3564364, "year": "06-07"}, {"data": 3896636, "year": "07-08"}, {"data": 4158676, "year": "08-09"}, {"data": 4507637, "year": "09-10"}, {"data": 4885954, "year": "10-11"}, {"data": 5202514, "year": "11-12"}], "Per Capita Income (Rs.)": [{"data": 24143, "year": "04-05"}, {"data": 26015, "year": "05-06"}, {"data": 28067, "year": "06-07"}, {"data": 30332, "year": "07-08"}, {"data": 31754, "year": "08-09"}, {"data": 33843, "year": "09-10"}, {"data": 35993, "year": "10-11"}, {"data": 37851, "year": "11-12"}], "Construction": [{"data": 228855, "year": "04-05"}, {"data": 258129, "year": "05-06"}, {"data": 284806, "year": "06-07"}, {"data": 315495, "year": "07-08"}, {"data": 332329, "year": "08-09"}, {"data": 355717, "year": "09-10"}, {"data": 384199, "year": "10-11"}, {"data": 404617, "year": "11-12"}], "Electricity, Gas & Water Supply": [{"data": 62675, "year": "04-05"}, {"data": 67123, "year": "05-06"}, {"data": 73362, "year": "06-07"}, {"data": 79430, "year": "07-08"}, {"data": 83050, "year": "08-09"}, {"data": 88266, "year": "09-10"}, {"data": 90944, "year": "10-11"}, {"data": 98105, "year": "11-12"}], "Agriculture, Forestry & Fishing": [{"data": 565426, "year": "04-05"}, {"data": 594487, "year": "05-06"}, {"data": 619190, "year": "06-07"}, {"data": 655080, "year": "07-08"}, {"data": 655689, "year": "08-09"}, {"data": 662509, "year": "09-10"}, {"data": 709103, "year": "10-11"}, {"data": 728667, "year": "11-12"}], "Discrepancies ": [{"data": -25154, "year": "04-05"}, {"data": -37288, "year": "05-06"}, {"data": -54997, "year": "06-07"}, {"data": -116472, "year": "07-08"}, {"data": -28777, "year": "08-09"}, {"data": -95097, "year": "09-10"}, {"data": -132049, "year": "10-11"}, {"data": 16720, "year": "11-12"}], "Manufacturing": [{"data": 453225, "year": "04-05"}, {"data": 499020, "year": "05-06"}, {"data": 570458, "year": "06-07"}, {"data": 629073, "year": "07-08"}, {"data": 656302, "year": "08-09"}, {"data": 719728, "year": "09-10"}, {"data": 774162, "year": "10-11"}, {"data": 793468, "year": "11-12"}], "Gross Domestic Product (GDP) at Market Prices": [{"data": 3242209, "year": "04-05"}, {"data": 3543244, "year": "05-06"}, {"data": 3871489, "year": "06-07"}, {"data": 4250947, "year": "07-08"}, {"data": 4416350, "year": "08-09"}, {"data": 4780179, "year": "09-10"}, {"data": 5236823, "year": "10-11"}, {"data": 5595856, "year": "11-12"}], "Mining & Quarrying": [{"data": 85028, "year": "04-05"}, {"data": 86141, "year": "05-06"}, {"data": 92578, "year": "06-07"}, {"data": 95997, "year": "07-08"}, {"data": 98055, "year": "08-09"}, {"data": 104225, "year": "09-10"}, {"data": 109421, "year": "10-11"}, {"data": 108469, "year": "11-12"}], "Financing, Ins., Real Estate & Business Services": [{"data": 437174, "year": "04-05"}, {"data": 492340, "year": "05-06"}, {"data": 561063, "year": "06-07"}, {"data": 628124, "year": "07-08"}, {"data": 703629, "year": "08-09"}, {"data": 769883, "year": "09-10"}, {"data": 849995, "year": "10-11"}, {"data": 931714, "year": "11-12"}], "Trade, Hotels & Restaurant": [{"data": 477303, "year": "04-05"}, {"data": 535397, "year": "05-06"}, {"data": 594918, "year": "06-07"}, {"data": 655013, "year": "07-08"}, {"data": 692224, "year": "08-09"}, {"data": 746178, "year": "09-10"}, {"data": 813079, "year": "10-11"}, {"data": 904884, "year": "11-12"}], "Gross Fixed Capital Formation (GFCF)": [{"data": 931028, "year": "04-05"}, {"data": 1081792, "year": "05-06"}, {"data": 1231265, "year": "06-07"}, {"data": 1430764, "year": "07-08"}, {"data": 1480943, "year": "08-09"}, {"data": 1580944, "year": "09-10"}, {"data": 1699387, "year": "10-11"}, {"data": 1792521, "year": "11-12"}], "Population (in Mn.)": [{"data": 1089, "year": "04-05"}, {"data": 1106, "year": "05-06"}, {"data": 1122, "year": "06-07"}, {"data": 1138, "year": "07-08"}, {"data": 1154, "year": "08-09"}, {"data": 1170, "year": "09-10"}, {"data": 1186, "year": "10-11"}, {"data": 1202, "year": "11-12"}], "Net National Income (NNI) at Factor Cost": [{"data": 2629198, "year": "04-05"}, {"data": 2877283, "year": "05-06"}, {"data": 3149150, "year": "06-07"}, {"data": 3451827, "year": "07-08"}, {"data": 3664389, "year": "08-09"}, {"data": 3959653, "year": "09-10"}, {"data": 4268715, "year": "10-11"}, {"data": 4549652, "year": "11-12"}], "Valuables": [{"data": 41054, "year": "04-05"}, {"data": 40414, "year": "05-06"}, {"data": 45933, "year": "06-07"}, {"data": 47263, "year": "07-08"}, {"data": 59987, "year": "08-09"}, {"data": 94524, "year": "09-10"}, {"data": 125192, "year": "10-11"}, {"data": 135139, "year": "11-12"}], "Net Factor Income from abroad": [{"data": -22375, "year": "04-05"}, {"data": -24896, "year": "05-06"}, {"data": -29515, "year": "06-07"}, {"data": -17179, "year": "07-08"}, {"data": -25384, "year": "08-09"}, {"data": -27664, "year": "09-10"}, {"data": -52776, "year": "10-11"}, {"data": -51828, "year": "11-12"}], "Subsidies": [{"data": 93222, "year": "04-05"}, {"data": 115546, "year": "05-06"}, {"data": 149672, "year": "06-07"}, {"data": 149036, "year": "07-08"}, {"data": 216335, "year": "08-09"}, {"data": 187065, "year": "09-10"}, {"data": 194859, "year": "10-11"}, {"data": 199981, "year": "11-12"}], "Government Final Capital Expenditure (GFCE)": [{"data": 354518, "year": "04-05"}, {"data": 386007, "year": "05-06"}, {"data": 400579, "year": "06-07"}, {"data": 438919, "year": "07-08"}, {"data": 484459, "year": "08-09"}, {"data": 553709, "year": "09-10"}, {"data": 597154, "year": "10-11"}, {"data": 627620, "year": "11-12"}], "Transport, Storage & Communication": [{"data": 250417, "year": "04-05"}, {"data": 280010, "year": "05-06"}, {"data": 315166, "year": "06-07"}, {"data": 354507, "year": "07-08"}, {"data": 392901, "year": "08-09"}, {"data": 451035, "year": "09-10"}, {"data": 517376, "year": "10-11"}, {"data": 557888, "year": "11-12"}]} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment