subbu/README.md

## README.md

      
    Raw
  

              README.md
            
          
    SimplyGuest houses come with a fully functional kitchen. As part of it, we provide a gas stove and provide unlimited LPG.
We have one LPG connection per house. Over the last one year we have replaced 77 cylinders. That's 3.3 cylinders per house. A cylinder purchased every 5 days. Some houses have never exhausted their very first cylinder, while one particular house consumes one complete cylinder every month.
Are exits linked anyway to LPG usage?

LPG usage is an indication of how close the flatmates have become. Its difficult to cook for just oneself. So most people, even the ones who love cooking, often eat outside or get food delivered home. The following chart shows house-wise usage of LPG and their exits. Bars in the chart are rarely balanced, they are heavier one one side most of the time. Houses that use up more LPG have fewer exits. The opposite is also true. That's good news for us. Customer acquisition cost is a lot higher than LPG cylinder cost.
We see many flatmates hire an external cook. This is more common than we thought. Obviously, wherever there is a cook, LPG usage is also higher.
Some houses use so little LPG, they still have the same cylinder we provided them in the beginning.
Read the full article at: https://blog.simplyguest.com/insights/lpg-usage.html

  
## index.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>LPG Usage</title>
    <meta name="description" content="SimplyGuest houses come with a fully functional kitchen. As part of it, we provide a gas stove and provide unlimited LPG. Our guests just have to call us whe...">
    <style>
      body {
        font-family: "Open Sans",sans-serif;
      }
      text {
        font-size: 10px;
      }
      .axis path,
      .axis line {
        fill: none;
        stroke: #f2dede;
        shape-rendering: crispEdges;
      }
    </style>
  </head>
  <body>
    <div id="figure" style="margin-bottom: 50px;"></div>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script src="lpg.js"></script>

  </body>
</html>

## lpg-usage.csv

          
            House
            1
            2
            tcount
            sex

            
              Sumukha Greenville 210
              3
              3
              3
              women

            
              Sumukha Elegance 300
              4
              2
              3
              women

            
              Oudumbara Studio 1BHK
              0
              2
              2
              men

            
              Natasha Villa
              4
              2
              4
              women

            
              Oudumbara Third Floor
              2
              12
              5
              men

            
              Sumukha Greenville 206(Duplex)
              9
              6
              5
              women

            
              SPP 202
              1
              1
              2
              men

            
              Royal Palace 105
              4
              1
              3
              men

            
              Royal Palace 205
              5
              1
              2
              men

            
              Kiran 1
              2
              4
              5
              men

            
              Sumukha Greenville 402
              0
              3
              0
              women

            
              Royal Palace 110
              1
              1
              3
              men

            
              Royal Palace 101
              3
              1
              3
              men

            
              SPP 201
              3
              2
              1
              men

            
              Pruthvi Paradise 302
              4
              3
              4
              men

            
              Sumukha Greenville 407 (Duplex)
              3
              1
              5
              women

            
              Kiran 4
              5
              3
              4
              women

            
              Kiran 2
              6
              2
              5
              women

            
              Aishwarya Splendour 201
              2
              7
              6
              women

            
              Oudumbara First Floor
              10
              2
              4
              men

            
              Oudumbara Second Floor
              7
              5
              2
              men

            
              Srinivasa A2
              0
              3
              4
              men

            
              Sumukha Greenville 406
              0
              3
              5
              women

            
              Aditi
              2
              2
              7
              women

## lpg.js
var screenW = d3.min([window.screen.availWidth, 700]),
    screenH = 800;

var margin = {top: 50, right: 20, bottom: 10, left: 165},
    width = screenW - margin.left - margin.right,
    height = screenH - margin.top - margin.bottom;

var y = d3.scale.ordinal()
    .rangeRoundBands([0, height], .3);

var x = d3.scale.linear()
    .rangeRound([0, width]);

var color = d3.scale.ordinal()
    .range(["#92c6db", "#ff6347"]);

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

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

var svg = d3.select("#figure").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .attr("id", "d3-plot")
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  color.domain(["Number of Exits", "Number of Cylinders"]);

  d3.csv("lpg-usage.csv", function(error, data) {

      data.forEach(function(d) {
        // calc percentages
        d["Number of Exits"] = +d[1];
        d["Number of Cylinders"] = +d[2];
        var x0 = -d["Number of Exits"];
        var idx = 0;
        d.boxes = color.domain().map(function(name) { return {name: name, x0: x0, x1: x0 += +d[name], n: +d[idx += 1]}; });
      });

      var min_val = d3.min(data, function(d) {
              return d.boxes["1"].x0;
              });

      var max_val = d3.max(data, function(d) {
            return +(d.boxes["1"].x1) + 2;
        });

      x.domain([-15, max_val]).nice();
      y.domain(data.map(function(d) { return d.House; }));

      svg.append("g")
          .attr("class", "x axis")
          .call(xAxis);

      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis)

      var vakken = svg.selectAll(".question")
          .data(data)
        .enter().append("g")
          .attr("class", "bar")
          .attr("transform", function(d) { return "translate(0," + y(d.House) + ")"; });

      var bars = vakken.selectAll("rect")
          .data(function(d) { return d.boxes; })
        .enter().append("g").attr("class", "subbar");

      bars.append("rect")
          .attr("height", y.rangeBand())
          .attr("x", function(d) { return x(d.x0); })
          .attr("width", function(d) { return x(d.x1) - x(d.x0); })
          .style("fill", function(d) { return color(d.name); });

      bars.append("text")
          .attr("x", function(d) { return d.name == "Number of Cylinders" ? x(d.x1) - 18 : x(d.x0); })
          .attr("y", y.rangeBand()/2)
          .attr("dy", "0.4em")
          .attr("dx", "0.5em")
          .style("font" ,"9px sans-serif")
          .style("text-anchor", "begin")
          .text(function(d) { return d.n });

      vakken.insert("rect",":first-child")
          .attr("height", y.rangeBand())
          .attr("x", "1")
          .attr("width", width)
          .attr("fill-opacity", "0.5")
          .style("fill", "#F5F5F5")
          .attr("class", function(d,index) { return index%2==0 ? "even" : "uneven"; });

      svg.append("g")
          .attr("class", "y axis")
      .append("line")
          .attr("x1", x(0))
          .attr("x2", x(0))
          .attr("y2", height);

      var startp = svg.append("g").attr("class", "legendbox").attr("id", "mylegendbox");
      // this is not nice, we should calculate the bounding box and use that
      var legend_tabs = [0, 200, 100, 175, 150];
      var legend = startp.selectAll(".legend")
          .data(color.domain().slice())
        .enter().append("g")
          .attr("class", "legend")
          .attr("transform", function(d, i) { return "translate(" + legend_tabs[i] + ",-45)"; });

      legend.append("rect")
          .attr("x", 0)
          .attr("width", 18)
          .attr("height", 18)
          .style("fill", color);

      legend.append("text")
          .attr("x", 22)
          .attr("y", 9)
          .attr("dy", ".35em")
          .style("text-anchor", "begin")
          .style("font" ,"10px sans-serif")
          .text(function(d) { return d; });

      d3.selectAll(".axis path")
          .style("fill", "none")
          .style("stroke", "#000")
          .style("shape-rendering", "crispEdges")

      d3.selectAll(".axis line")
          .style("fill", "none")
          .style("stroke", "#f2dede")
          .style("shape-rendering", "crispEdges")

      var movesize = width/2 - startp.node().getBBox().width/2;
      d3.selectAll(".legendbox").attr("transform", "translate(" + movesize  + ",0)");


});

## thumbnail.png

      
    Raw
  

              thumbnail.png

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>LPG Usage</title>
	<meta name="description" content="SimplyGuest houses come with a fully functional kitchen. As part of it, we provide a gas stove and provide unlimited LPG. Our guests just have to call us whe...">
	<style>
	body {
	font-family: "Open Sans",sans-serif;
	}
	text {
	font-size: 10px;
	}
	.axis path,
	.axis line {
	fill: none;
	stroke: #f2dede;
	shape-rendering: crispEdges;
	}
	</style>
	</head>
	<body>
	<div id="figure" style="margin-bottom: 50px;"></div>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="lpg.js"></script>

	</body>
	</html>
House	1	2	tcount	sex
Sumukha Greenville 210	3	3	3	women
Sumukha Elegance 300	4	2	3	women
Oudumbara Studio 1BHK	0	2	2	men
Natasha Villa	4	2	4	women
Oudumbara Third Floor	2	12	5	men
Sumukha Greenville 206(Duplex)	9	6	5	women
SPP 202	1	1	2	men
Royal Palace 105	4	1	3	men
Royal Palace 205	5	1	2	men
Kiran 1	2	4	5	men
Sumukha Greenville 402	0	3	0	women
Royal Palace 110	1	1	3	men
Royal Palace 101	3	1	3	men
SPP 201	3	2	1	men
Pruthvi Paradise 302	4	3	4	men
Sumukha Greenville 407 (Duplex)	3	1	5	women
Kiran 4	5	3	4	women
Kiran 2	6	2	5	women
Aishwarya Splendour 201	2	7	6	women
Oudumbara First Floor	10	2	4	men
Oudumbara Second Floor	7	5	2	men
Srinivasa A2	0	3	4	men
Sumukha Greenville 406	0	3	5	women
Aditi	2	2	7	women
	var screenW = d3.min([window.screen.availWidth, 700]),
	screenH = 800;

	var margin = {top: 50, right: 20, bottom: 10, left: 165},
	width = screenW - margin.left - margin.right,
	height = screenH - margin.top - margin.bottom;

	var y = d3.scale.ordinal()
	.rangeRoundBands([0, height], .3);

	var x = d3.scale.linear()
	.rangeRound([0, width]);

	var color = d3.scale.ordinal()
	.range(["#92c6db", "#ff6347"]);

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

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

	var svg = d3.select("#figure").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.attr("id", "d3-plot")
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	color.domain(["Number of Exits", "Number of Cylinders"]);

	d3.csv("lpg-usage.csv", function(error, data) {

	data.forEach(function(d) {
	// calc percentages
	d["Number of Exits"] = +d[1];
	d["Number of Cylinders"] = +d[2];
	var x0 = -d["Number of Exits"];
	var idx = 0;
	d.boxes = color.domain().map(function(name) { return {name: name, x0: x0, x1: x0 += +d[name], n: +d[idx += 1]}; });
	});

	var min_val = d3.min(data, function(d) {
	return d.boxes["1"].x0;
	});

	var max_val = d3.max(data, function(d) {
	return +(d.boxes["1"].x1) + 2;
	});

	x.domain([-15, max_val]).nice();
	y.domain(data.map(function(d) { return d.House; }));

	svg.append("g")
	.attr("class", "x axis")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)

	var vakken = svg.selectAll(".question")
	.data(data)
	.enter().append("g")
	.attr("class", "bar")
	.attr("transform", function(d) { return "translate(0," + y(d.House) + ")"; });

	var bars = vakken.selectAll("rect")
	.data(function(d) { return d.boxes; })
	.enter().append("g").attr("class", "subbar");

	bars.append("rect")
	.attr("height", y.rangeBand())
	.attr("x", function(d) { return x(d.x0); })
	.attr("width", function(d) { return x(d.x1) - x(d.x0); })
	.style("fill", function(d) { return color(d.name); });

	bars.append("text")
	.attr("x", function(d) { return d.name == "Number of Cylinders" ? x(d.x1) - 18 : x(d.x0); })
	.attr("y", y.rangeBand()/2)
	.attr("dy", "0.4em")
	.attr("dx", "0.5em")
	.style("font" ,"9px sans-serif")
	.style("text-anchor", "begin")
	.text(function(d) { return d.n });

	vakken.insert("rect",":first-child")
	.attr("height", y.rangeBand())
	.attr("x", "1")
	.attr("width", width)
	.attr("fill-opacity", "0.5")
	.style("fill", "#F5F5F5")
	.attr("class", function(d,index) { return index%2==0 ? "even" : "uneven"; });

	svg.append("g")
	.attr("class", "y axis")
	.append("line")
	.attr("x1", x(0))
	.attr("x2", x(0))
	.attr("y2", height);

	var startp = svg.append("g").attr("class", "legendbox").attr("id", "mylegendbox");
	// this is not nice, we should calculate the bounding box and use that
	var legend_tabs = [0, 200, 100, 175, 150];
	var legend = startp.selectAll(".legend")
	.data(color.domain().slice())
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d, i) { return "translate(" + legend_tabs[i] + ",-45)"; });

	legend.append("rect")
	.attr("x", 0)
	.attr("width", 18)
	.attr("height", 18)
	.style("fill", color);

	legend.append("text")
	.attr("x", 22)
	.attr("y", 9)
	.attr("dy", ".35em")
	.style("text-anchor", "begin")
	.style("font" ,"10px sans-serif")
	.text(function(d) { return d; });

	d3.selectAll(".axis path")
	.style("fill", "none")
	.style("stroke", "#000")
	.style("shape-rendering", "crispEdges")

	d3.selectAll(".axis line")
	.style("fill", "none")
	.style("stroke", "#f2dede")
	.style("shape-rendering", "crispEdges")

	var movesize = width/2 - startp.node().getBBox().width/2;
	d3.selectAll(".legendbox").attr("transform", "translate(" + movesize + ",0)");


	});