D3 Examples - square x

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:center;right:center;bottom:center;left:center; }
    .dot {
        stroke: #d3d3d3;
      }
    .line {
      fill: none;
      stroke: black;
      stroke-width: 2px;
    }
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    // Set the dimensions of the canvas / graph
    var margin = {top: 30, right: 40, bottom: 30, left: 50},
        width = 600 - margin.left - margin.right,
        height = 700 - margin.top - margin.bottom;
    
    
    var gdata = [ {x : 1 , y : 1},
                  {x : 2 , y : 4},
                  {x : 3 , y : 9},
                  {x : 4 , y : 16}, 
                  {x : 5 , y : 25},
                  {x : 6 , y : 36},
                  {x : 7 , y : 49},
                  {x : 8 , y : 64},
                  {x : 9 , y : 81}]
    
    var x = d3.scaleLinear()
              //.domain([0, d3.max(datax)])
              .range([0, width]);
    var y = d3.scaleLinear()
             // .domain([0, d3.max(datay)])
              .range([height, 0]);
    
    
    
    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+ ")");
    
    var g = svg.append("g")
        .attr("transform", "translate(0, 0)");
    
     x.domain(d3.extent(gdata, function(d) { return d.x; }));
     y.domain([0, d3.max(gdata, function(d) { return d.y; })]);
    // Define the line
         var valueline = d3.line()
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });
    
     var line = d3.line()
        .x(function(d) { return x(d.x); })
        .y(function(d) { return y(d.y); });
    
    
   svg.append("path")
        .attr("class", "line")
        .attr("d", valueline(gdata));
    
    
    svg.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," +height+ ")")
        .call(d3.axisBottom(x));
        
    svg.append('g')
        .attr('class', 'axis axis--y')
        .attr('transform', 'translate(0,0)')
        .call(d3.axisLeft(y));
        
     // Add the scatterplot
    svg.selectAll("dot")
        .data(gdata)
        .enter().append("circle")
        .attr("r", 5.5)
        .attr("cx", function(d) { return x(d.x); })
        .attr("cy", function(d) { return y(d.y); })
            .on("mouseover", function(d){
​
            d3.select(this).transition().duration(200).style("fill", "#d30715");
​
          g.selectAll("#tooltip").data([d]).enter().append("text")
            .attr("id", "tooltip")
            .text(function(d, i) { return d.y; })
            .attr("y", function(d) {return y(d.y) -12})
            .attr("x", function(d) { return x(d.x); })
​
          g.selectAll("#tooltip_path").data([d]).enter().append("line")
            .attr("id", "tooltip_path")
            .attr("class", "line")
            .attr("d", line)
            .attr("x1", function(d) {return x(d.x)})
            .attr("x2", function(d) {return x(d.x)})
            .attr("y1", height)
            .attr("y2", function(d) {return y(d.y)})
            .attr("stroke", "black")
            .style("stroke-dasharray", ("3, 7"));
        })
        .on("mouseout", function(d) {
          d3.select(this).transition().duration(500).style("fill", "#fcb0b5");
​
          g.selectAll("#tooltip").remove();
          g.selectAll("#tooltip_path").remove();
        });
        
     svg.append("text")
      .text("F(x)=x²")
      .attr("y", width/5.52)
      .attr("x", height/2)
      .attr("margin-left",margin.left)
      .attr("font-size", 36)
      .attr("font-family", "monospace")
        
      
   
   
         console.log(gdata);
     
     
    
    
​
  </script>
</body>
​
    