pierre-haessig/daily_power.tsv

## daily_power.tsv

          
            hour
            power

            
              00
              5.88

            
              01
              5.51

            
              02
              5.94

            
              03
              6.84

            
              04
              6.10

            
              05
              5.80

            
              06
              6.26

            
              07
              4.64

            
              08
              3.71

            
              09
              3.30

            
              10
              2.87

            
              11
              2.09

            
              12
              3.42

            
              13
              4.85

            
              14
              3.59

            
              15
              3.12

            
              16
              3.95

            
              17
              3.96

            
              18
              4.53

            
              19
              4.54

            
              20
              4.40

            
              21
              4.76

            
              22
              4.58

            
              23
              3.74

## daily_power_D3js.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body {
          font-family: sans-serif;
        }

        svg {
            font-size: 10px;
        }

        .axis path,
        .axis line {
          fill: none;
          stroke: #000;
          shape-rendering: crispEdges;
        }

        rect.bar {
          stroke: #8AB;
          fill: steelblue;
        }
        rect.bar:hover {
          stroke: #ACD;
          fill: #5aa2df;
        }
        text.bar {
          fill: white;
        }


        .x.axis path {
          //display: none;
        }

    </style>
    <script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>

<h1> Consommation électrique de la journée </h1>

<p>(exprimée en puissance moyenne horaire)</p>


    <script>

    var margin = {top: 20, right: 20, bottom: 30, left: 40},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var formatY = d3.format(".1f");

    var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .0);

    var y = d3.scale.linear()
        .range([height, 0]);

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

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

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

    d3.tsv("daily_power.tsv", function(error, data) {

      data.forEach(function(d) {
        d.power = +d.power;
      });

      x.domain(data.map(function(d) { return d.hour; }));
      y.domain([0, d3.max(data, function(d) { return d.power*1.1; })]);
      y.domain([0, 10.0 ]);

      // axe X : heure
      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis)
         .append("text")
          .attr("x", width/2)
          .attr("y", 6)
          .attr("dy", "2em")
          .style("text-anchor", "middle")
          .text("heure de la journée");

      // axe Y : puissance
      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis)
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("Puissance (kW)");

      // graphiques en barres
      svg.selectAll(".bar")
          .data(data)
        .enter().append("rect")
          .attr("class", "bar")
          .attr("x", function(d) { return x(d.hour); })
          .attr("width", x.rangeBand())
          .attr("y", function(d) { return y(d.power); })
          .attr("height", function(d) { return height - y(d.power); });

     // annotation des barres
     svg.selectAll("text.bar")
          .data(data)
        .enter().append("text")
         .attr("class", "bar")
         .attr("x", function(d) { return x(d.hour)+x.rangeBand()/2; })
         .attr("y", function(d) { return y(d.power); })
         .attr("dx", 0)
         .attr("dy", "1.2em") // vertical-align: middle
         .attr("text-anchor", "middle") //horizontal align: middle
         .text(function(d) { return formatY(d.power); });
    });

    </script>

    <p>Exercice d'entrainement à D3.js, Pierre H. -- <em>30 janvier 2013</em></p>
    <p>D'après
       <a href="http://mbostock.github.com/d3/tutorial/bar-1.html">A Bar Chart, Part 1 Tutorial</a> et
       <a href="http://bl.ocks.org/3885304">Bar Chart demo from D3 gallery</a>
   </p>

   <p>Pour faire un tracé dynamique (basé sur des données temps réel) :
       <a href="http://mbostock.github.com/d3/tutorial/bar-2.html">A Bar Chart, Part 2 Tutorial</a>
   </p>

   <h3>Pour générer les données (en Python)</h3>

   <p>(fichier <em>daily_power.tsv</em>)</p>

   <pre>
In [1]: import random

In [2]: p = random.uniform(-1,1)
   ...: for h in range(24):
   ...:     p = 0.7*random.uniform(-1,1) + 0.2*p
   ...:     print('%02d\t%.2f' % (h, (p+1)*5))
00      2.40
01      5.35
02      3.65
03      4.10
04      7.68
05      2.78
06      5.09
07      5.75
08      2.45
09      4.89
10      7.23
11      6.48
12      8.34
13      7.92
14      2.11
15      4.17
16      6.07
17      2.35
18      3.56
19      8.14
20      8.66
21      2.79
22      4.80
23      6.05
   </pre>
</body>
</html>
	hour	power
	00	5.88
	01	5.51
	02	5.94
	03	6.84
	04	6.10
	05	5.80
	06	6.26
	07	4.64
	08	3.71
	09	3.30
	10	2.87
	11	2.09
	12	3.42
	13	4.85
	14	3.59
	15	3.12
	16	3.95
	17	3.96
	18	4.53
	19	4.54
	20	4.40
	21	4.76
	22	4.58
	23	3.74
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style>
	body {
	font-family: sans-serif;
	}

	svg {
	font-size: 10px;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	rect.bar {
	stroke: #8AB;
	fill: steelblue;
	}
	rect.bar:hover {
	stroke: #ACD;
	fill: #5aa2df;
	}
	text.bar {
	fill: white;
	}


	.x.axis path {
	//display: none;
	}

	</style>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	</head>
	<body>

	<h1> Consommation électrique de la journée </h1>

	<p>(exprimée en puissance moyenne horaire)</p>


	<script>

	var margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var formatY = d3.format(".1f");

	var x = d3.scale.ordinal()
	.rangeRoundBands([0, width], .0);

	var y = d3.scale.linear()
	.range([height, 0]);

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

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

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

	d3.tsv("daily_power.tsv", function(error, data) {

	data.forEach(function(d) {
	d.power = +d.power;
	});

	x.domain(data.map(function(d) { return d.hour; }));
	y.domain([0, d3.max(data, function(d) { return d.power*1.1; })]);
	y.domain([0, 10.0 ]);

	// axe X : heure
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.append("text")
	.attr("x", width/2)
	.attr("y", 6)
	.attr("dy", "2em")
	.style("text-anchor", "middle")
	.text("heure de la journée");

	// axe Y : puissance
	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Puissance (kW)");

	// graphiques en barres
	svg.selectAll(".bar")
	.data(data)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", function(d) { return x(d.hour); })
	.attr("width", x.rangeBand())
	.attr("y", function(d) { return y(d.power); })
	.attr("height", function(d) { return height - y(d.power); });

	// annotation des barres
	svg.selectAll("text.bar")
	.data(data)
	.enter().append("text")
	.attr("class", "bar")
	.attr("x", function(d) { return x(d.hour)+x.rangeBand()/2; })
	.attr("y", function(d) { return y(d.power); })
	.attr("dx", 0)
	.attr("dy", "1.2em") // vertical-align: middle
	.attr("text-anchor", "middle") //horizontal align: middle
	.text(function(d) { return formatY(d.power); });
	});

	</script>

	<p>Exercice d'entrainement à D3.js, Pierre H. -- <em>30 janvier 2013</em></p>
	<p>D'après
	<a href="http://mbostock.github.com/d3/tutorial/bar-1.html">A Bar Chart, Part 1 Tutorial</a> et
	<a href="http://bl.ocks.org/3885304">Bar Chart demo from D3 gallery</a>
	</p>

	<p>Pour faire un tracé dynamique (basé sur des données temps réel) :
	<a href="http://mbostock.github.com/d3/tutorial/bar-2.html">A Bar Chart, Part 2 Tutorial</a>
	</p>

	<h3>Pour générer les données (en Python)</h3>

	<p>(fichier <em>daily_power.tsv</em>)</p>

	<pre>
	In [1]: import random

	In [2]: p = random.uniform(-1,1)
	...: for h in range(24):
	...: p = 0.7random.uniform(-1,1) + 0.2p
	...: print('%02d\t%.2f' % (h, (p+1)*5))
	00 2.40
	01 5.35
	02 3.65
	03 4.10
	04 7.68
	05 2.78
	06 5.09
	07 5.75
	08 2.45
	09 4.89
	10 7.23
	11 6.48
	12 8.34
	13 7.92
	14 2.11
	15 4.17
	16 6.07
	17 2.35
	18 3.56
	19 8.14
	20 8.66
	21 2.79
	22 4.80
	23 6.05
	</pre>
	</body>
	</html>