jchakko/consumption.csv

## consumption.csv

          
            state
            rice_total
            wheat_total
            total
            rice_percent
            wheat_percent
            team

            
              Andhra Pradesh 
              19.781
              0.966
              20.747
              95.34390514
              4.656094857
              rice

            
              Arunachal Pradesh 
              22.414
              1.031
              23.445
              95.60247388
              4.397526125
              rice

            
              Assam 
              21.443
              1.304
              22.747
              94.26737592
              5.732624082
              rice

            
              Bihar 
              11.41
              11.096
              22.506
              50.69759175
              49.30240825
              rice

            
              Chhattisgarh 
              19.949
              3.01
              22.959
              86.8896729
              13.1103271
              rice

            
              Delhi  
              3.524
              11.551
              15.075
              23.37645108
              76.62354892
              roti

            
              Goa
              12.413
              3.35
              15.763
              78.74770031
              21.25229969
              rice

            
              Gujarat 
              3.877
              8.692
              12.569
              30.84573156
              69.15426844
              roti

            
              Haryana 
              1.776
              15.75
              17.526
              10.13351592
              89.86648408
              roti

            
              Himachal Pradesh 
              8.209
              12.244
              20.453
              40.13592138
              59.86407862
              roti

            
              Jammu & Kashmir  
              15.734
              6.676
              22.41
              70.2097278
              29.7902722
              rice

            
              Jharkhand  
              14.554
              7.129
              21.683
              67.12170825
              32.87829175
              rice

            
              Karnataka  
              10.835
              2.082
              12.917
              83.88170628
              16.11829372
              rice

            
              Kerala  
              13.979
              1.613
              15.592
              89.65495126
              10.34504874
              rice

            
              Madhya Pradesh  
              4.07
              16.334
              20.404
              19.9470692
              80.0529308
              roti

            
              Maharashtra  
              6.183
              8.458
              14.641
              42.23072195
              57.76927805
              roti

            
              Manipur 
              27.072
              0.041
              27.113
              99.84878103
              0.151218972
              rice

            
              Meghalaya 
              18.825
              0.621
              19.446
              96.80654119
              3.193458809
              rice

            
              Mizoram 
              24.161
              0.37
              24.531
              98.49170437
              1.508295626
              rice

            
              Nagaland 
              25.644
              0.129
              25.773
              99.4994762
              0.500523804
              rice

            
              Odisha 
              20.939
              2.425
              23.364
              89.62078411
              10.37921589
              rice

            
              Punjab 
              2.013
              15.253
              17.266
              11.6587513
              88.3412487
              roti

            
              Rajasthan 
              0.818
              18.232
              19.05
              4.293963255
              95.70603675
              roti

            
              Sikkim 
              16.715
              1.53
              18.245
              91.61414086
              8.385859139
              rice

            
              Tamil Nadu 
              15.941
              1.256
              17.197
              92.69640053
              7.303599465
              rice

            
              Tripura 
              24.734
              0.583
              25.317
              97.69719951
              2.30280049
              rice

            
              Uttar Pradesh 
              6.898
              13.703
              20.601
              33.48381147
              66.51618853
              roti

            
              Uttarakhand 
              8.997
              13.34
              22.337
              40.27846175
              59.72153825
              roti

            
              West Bengal 
              16.166
              3.631
              19.797
              81.6588372
              18.3411628
              rice

## index.html
<html>
<header>
<title>Rice vs Roti</title>
</header>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
.roti {
  color: #FF9933;
}

.rice {
  color: #138808;
}

div.tooltip {
    position: absolute;
    text-align: center;
    width: 140px;
    height: 50px;
    padding: 2px;
    font: 12px sans-serif;
    background: lightblue;
    border: 0px;
    pointer-events: none;
}

</style>
</head>
<body>
  <div id = "postContents"; style="text-align:center;">
  <h1 align="center"><span class="roti">Team Roti</span> <span class="hr4">vs</span> <span class="rice">Team Rice</span></h1>
  <h2 align="center">(Per capita consumption differential by state)</h2>


  <script>
    let margin = {top: 10, right: 20, bottom: 10, left: 450};
    let width = 1200 - margin.left - margin.right;
    let height = 700 - margin.top - margin.bottom;

    let 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 + ")");

    svg.append("rect")
      .attr("width",width)
      .attr("height",height)
      .style("fill","green")
      .style("opacity", 0); //Background best practice

    let div = d3.select("body").append("div")
      .attr("class", "tooltip")
      .style("opacity", 0);

    Promise.all([
      d3.json("india-states.json"),
      d3.csv("consumption.csv")
    ]).then(function(data){
      let geoJsonData = data[0];
      let languageData = data[1];
      let projection = d3.geoMercator();
      projection.fitHeight(height-100,geoJsonData);
      let pathGenerator = d3.geoPath().projection(projection);

      <!-- Append map of India -->
      let india = svg.append('g');
      india.selectAll('path')
        .data(geoJsonData.features)
        .enter()
        .append('path')
          .attr('d', pathGenerator)
          .style("fill", function(d) {
            if(d.state == "Kerala") {
              return "red";
            }
            return "back";
          })
          .style("stroke", "black")
          .on("mouseover", function(d) {
            div.style("opacity", .9);
            div.html(d.state + "</br>"
            + d.rice_total + "kg Rice </br>"
            + d.wheat_total + "kg Wheat </br>")

            .style("left", (d3.event.pageX) + "px")
            .style("top", (d3.event.pageY - 28) + "px");
          })
          .on("mouseout", function(d) {
            div.style("opacity", 0);
          });

      console.log("Bout to go off");

      let colorScale = d3.scaleLinear()
        .domain([-18, 28])
        .range(['orange', 'green']);

      let orangeScale = d3.scaleLinear()
        .domain([50, 100])
        .range(['#FFFFFF','#FF9933']);

      let greenScale = d3.scaleLinear()
        .domain([50, 100])
        .range(['#FFFFFF','#138808']);


      india.selectAll('path')
        .data(languageData)
        .style("fill", function(d) {
          let rice = d.rice_percent;
          let wheat = d.wheat_percent;
          let team = d.team;
          if(team == "roti") {
            return orangeScale(d.wheat_percent);
          }
          return greenScale(d.rice_percent);
        });


      console.log("Went off");

    }) //End of Promise
  </script>

  </div>
  <h3 align="center">Source: http://mospi.nic.in/sites/default/files/publication_reports/Report_no558_rou68_30june14.pdf</h3>
</body>
</html>

## india-states.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              india-states.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
state	rice_total	wheat_total	total	rice_percent	wheat_percent	team
Andhra Pradesh	19.781	0.966	20.747	95.34390514	4.656094857	rice
Arunachal Pradesh	22.414	1.031	23.445	95.60247388	4.397526125	rice
Assam	21.443	1.304	22.747	94.26737592	5.732624082	rice
Bihar	11.41	11.096	22.506	50.69759175	49.30240825	rice
Chhattisgarh	19.949	3.01	22.959	86.8896729	13.1103271	rice
Delhi	3.524	11.551	15.075	23.37645108	76.62354892	roti
Goa	12.413	3.35	15.763	78.74770031	21.25229969	rice
Gujarat	3.877	8.692	12.569	30.84573156	69.15426844	roti
Haryana	1.776	15.75	17.526	10.13351592	89.86648408	roti
Himachal Pradesh	8.209	12.244	20.453	40.13592138	59.86407862	roti
Jammu & Kashmir	15.734	6.676	22.41	70.2097278	29.7902722	rice
Jharkhand	14.554	7.129	21.683	67.12170825	32.87829175	rice
Karnataka	10.835	2.082	12.917	83.88170628	16.11829372	rice
Kerala	13.979	1.613	15.592	89.65495126	10.34504874	rice
Madhya Pradesh	4.07	16.334	20.404	19.9470692	80.0529308	roti
Maharashtra	6.183	8.458	14.641	42.23072195	57.76927805	roti
Manipur	27.072	0.041	27.113	99.84878103	0.151218972	rice
Meghalaya	18.825	0.621	19.446	96.80654119	3.193458809	rice
Mizoram	24.161	0.37	24.531	98.49170437	1.508295626	rice
Nagaland	25.644	0.129	25.773	99.4994762	0.500523804	rice
Odisha	20.939	2.425	23.364	89.62078411	10.37921589	rice
Punjab	2.013	15.253	17.266	11.6587513	88.3412487	roti
Rajasthan	0.818	18.232	19.05	4.293963255	95.70603675	roti
Sikkim	16.715	1.53	18.245	91.61414086	8.385859139	rice
Tamil Nadu	15.941	1.256	17.197	92.69640053	7.303599465	rice
Tripura	24.734	0.583	25.317	97.69719951	2.30280049	rice
Uttar Pradesh	6.898	13.703	20.601	33.48381147	66.51618853	roti
Uttarakhand	8.997	13.34	22.337	40.27846175	59.72153825	roti
West Bengal	16.166	3.631	19.797	81.6588372	18.3411628	rice
	<html>
	<header>
	<title>Rice vs Roti</title>
	</header>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<style>
	.roti {
	color: #FF9933;
	}

	.rice {
	color: #138808;
	}

	div.tooltip {
	position: absolute;
	text-align: center;
	width: 140px;
	height: 50px;
	padding: 2px;
	font: 12px sans-serif;
	background: lightblue;
	border: 0px;
	pointer-events: none;
	}

	</style>
	</head>
	<body>
	<div id = "postContents"; style="text-align:center;">
	<h1 align="center"><span class="roti">Team Roti</span> <span class="hr4">vs</span> <span class="rice">Team Rice</span></h1>
	<h2 align="center">(Per capita consumption differential by state)</h2>


	<script>
	let margin = {top: 10, right: 20, bottom: 10, left: 450};
	let width = 1200 - margin.left - margin.right;
	let height = 700 - margin.top - margin.bottom;

	let 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 + ")");

	svg.append("rect")
	.attr("width",width)
	.attr("height",height)
	.style("fill","green")
	.style("opacity", 0); //Background best practice

	let div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	Promise.all([
	d3.json("india-states.json"),
	d3.csv("consumption.csv")
	]).then(function(data){
	let geoJsonData = data[0];
	let languageData = data[1];
	let projection = d3.geoMercator();
	projection.fitHeight(height-100,geoJsonData);
	let pathGenerator = d3.geoPath().projection(projection);

	<!-- Append map of India -->
	let india = svg.append('g');
	india.selectAll('path')
	.data(geoJsonData.features)
	.enter()
	.append('path')
	.attr('d', pathGenerator)
	.style("fill", function(d) {
	if(d.state == "Kerala") {
	return "red";
	}
	return "back";
	})
	.style("stroke", "black")
	.on("mouseover", function(d) {
	div.style("opacity", .9);
	div.html(d.state + "</br>"
	+ d.rice_total + "kg Rice </br>"
	+ d.wheat_total + "kg Wheat </br>")

	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY - 28) + "px");
	})
	.on("mouseout", function(d) {
	div.style("opacity", 0);
	});

	console.log("Bout to go off");

	let colorScale = d3.scaleLinear()
	.domain([-18, 28])
	.range(['orange', 'green']);

	let orangeScale = d3.scaleLinear()
	.domain([50, 100])
	.range(['#FFFFFF','#FF9933']);

	let greenScale = d3.scaleLinear()
	.domain([50, 100])
	.range(['#FFFFFF','#138808']);


	india.selectAll('path')
	.data(languageData)
	.style("fill", function(d) {
	let rice = d.rice_percent;
	let wheat = d.wheat_percent;
	let team = d.team;
	if(team == "roti") {
	return orangeScale(d.wheat_percent);
	}
	return greenScale(d.rice_percent);
	});


	console.log("Went off");

	}) //End of Promise
	</script>

	</div>
	<h3 align="center">Source: http://mospi.nic.in/sites/default/files/publication_reports/Report_no558_rou68_30june14.pdf</h3>
	</body>
	</html>