ijxsid/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Improving over this

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Dimple.js Pie Chart (Streaming TV Rivals)</title>
  <script src="http://d3js.org/d3.v4.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.3.0.min.js"></script>
  <style>
    #chart {
      width: 100%;
    }
    #chart h2 {
      width: 600px;
      text-align: center;
      font-family: "Helvetica Neue", sans-serif;
      font-size: 1.3em;
      margin: 35px 0px 5px;
    }
    #chart p {
      width: 600px;
      text-align: center;
      font-family: "Helvetica Neue", sans-serif;
      font-size: 0.8em;
      color: #666;
      margin-top: 0;
    }
  </style>
</head>
<body>
  <div id="chart"></div>

  <script type="text/javascript">
    function drawBarChart (data) {
      const margin = 25;
      const width =  600;
      const height = 400;

      const chart = d3
        .select("#chart");
      chart
        .append("h2")
        .text("Streaming TV Rivals");
      chart
        .append("p")
        .text("Source: Market Share data by comscore.com (March 2016)")
      /*
      Dimple.js Chart construction code
      */
      var svg = dimple.newSvg("#chart", width, height);

      const myChart = new dimple.chart(svg, data);
      myChart.setBounds(margin, margin, width - 2 * margin, height- 2 * margin);
      myChart.addMeasureAxis("p", "Market Share");
      myChart.addSeries("Device", dimple.plot.pie);
      myChart.addLegend(width - 5 * margin, margin, 90, 300, "left");
      myChart.defaultColors = [
          new dimple.color("#3498db", "#2980b9", 1), // blue
          new dimple.color("#e74c3c", "#c0392b", 1), // red
          new dimple.color("#2ecc71", "#27ae60", 1), // green
          new dimple.color("#9b59b6", "#8e44ad", 1), // purple
          new dimple.color("#95a5a6", "#7f8c8d", 1), // gray

      ];

      myChart.draw();

    }

    d3.csv("streaming.csv", drawBarChart);

  </script>

</body>
</html>

## streaming.csv

          
            Device
            Market Share

            
              Roku
               49%

            
              Amazon Fire TV
               16%

            
              Google Chromecast
               22%

            
              Apple TV
               12%

            
              Others
               1%
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Dimple.js Pie Chart (Streaming TV Rivals)</title>
	<script src="http://d3js.org/d3.v4.min.js"></script>
	<script src="http://dimplejs.org/dist/dimple.v2.3.0.min.js"></script>
	<style>
	#chart {
	width: 100%;
	}
	#chart h2 {
	width: 600px;
	text-align: center;
	font-family: "Helvetica Neue", sans-serif;
	font-size: 1.3em;
	margin: 35px 0px 5px;
	}
	#chart p {
	width: 600px;
	text-align: center;
	font-family: "Helvetica Neue", sans-serif;
	font-size: 0.8em;
	color: #666;
	margin-top: 0;
	}
	</style>
	</head>
	<body>
	<div id="chart"></div>

	<script type="text/javascript">
	function drawBarChart (data) {
	const margin = 25;
	const width = 600;
	const height = 400;

	const chart = d3
	.select("#chart");
	chart
	.append("h2")
	.text("Streaming TV Rivals");
	chart
	.append("p")
	.text("Source: Market Share data by comscore.com (March 2016)")
	/*
	Dimple.js Chart construction code
	*/
	var svg = dimple.newSvg("#chart", width, height);

	const myChart = new dimple.chart(svg, data);
	myChart.setBounds(margin, margin, width - 2 * margin, height- 2 * margin);
	myChart.addMeasureAxis("p", "Market Share");
	myChart.addSeries("Device", dimple.plot.pie);
	myChart.addLegend(width - 5 * margin, margin, 90, 300, "left");
	myChart.defaultColors = [
	new dimple.color("#3498db", "#2980b9", 1), // blue
	new dimple.color("#e74c3c", "#c0392b", 1), // red
	new dimple.color("#2ecc71", "#27ae60", 1), // green
	new dimple.color("#9b59b6", "#8e44ad", 1), // purple
	new dimple.color("#95a5a6", "#7f8c8d", 1), // gray

	];

	myChart.draw();

	}

	d3.csv("streaming.csv", drawBarChart);

	</script>

	</body>
	</html>
	Device	Market Share
	Roku	49%
	Amazon Fire TV	16%
	Google Chromecast	22%
	Apple TV	12%
	Others	1%