04_lineChart.html

<html>
  <head>
    <meta charset="utf-8">
    <script src="js/d3.min.js" charset="utf-8"></script>
  </head>
  <body>
    <h3>Grafico de linha:</h3>
    <script>
      var w = 300;
      var h = 100;

      var data = [
        {"x":10, "y":30},
        {"x":20, "y":10},
        {"x":30, "y":27},
        {"x":40, "y":5},
        {"x":50, "y":22},
        {"x":60, "y":40},
        {"x":70, "y":10},
        {"x":80, "y":50}
      ];

      function KPIColor(d){
        if(d>30){ return "blue"; }
        else if(d<=30){ return "red";}
      }
      // Area de plotagem
      var svg = d3.select("body")
                  .append("svg")
                    .attr("width", w)
                    .attr("height", h);

      // Função auxiliar do d3 para criar os dados do path svg
      var lineObject = d3.line()
                         .x(function(d) { return d.x*3; })
                         .y(function(d) { return h-d.y; })
                         .curve(d3.curveStep);
                         //curveLinear curveNatural curveStepAfter curveStepBefore

      // Adiciona um elemento path ao svg e atribui a saida da função line do d3
      // ao atributo d da tag path
      svg.append("path")
            .attr("d", lineObject(data))
            .attr("stroke", "blue")
            .attr("stroke-width", 2)
            .attr("fill", "none");

      // Adiciona os rótulos
      svg.selectAll("text")
         .data(data)
         .enter()
         .append("text")
            .text(function(d) { return d.y; })
            .attr("x", function(d) { return d.x*3-20; })
            .attr("y", function(d) { return h-d.y; })
            .attr("text-anchor", "end")
            .attr("dy", ".35em")
            .attr("fill", function(d){ return KPIColor(d.y); });
    </script>
  </body>