D3 Examples

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .line {
      fill: none;
      stroke: black;
      stroke-width: 1.5px;
    }
  </style>
</head>
​
<body>
  <script>
        
    //Make the SVG container
    var svgContainer = d3.select("body").append("svg")
                                                                            .attr("width",960)
                                                                            .attr("height",540);
                                
    //Draw the xAxis
    var xAxis = svgContainer.append("line")
                                                            .attr("x1",0)
                                                            .attr("y1",280)
                                                            .attr("x2",900)
                                                        .attr("y2",280)
                                                            .attr("stroke-width",2)
                                                            .attr("stroke","black");
        //Draw the yAxis
    var yAxis = svgContainer.append("line")
                                                            .attr("x1",270)
                                                            .attr("y1",0)
                                                            .attr("x2",270)
                                                        .attr("y2",540)
                                                            .attr("stroke-width",2)
                                                            .attr("stroke","black");
​
    svgContainer.append("circle")
                        .attr("r",5)
                        .attr("cx",50)
                            .attr("cy",50)
                            .attr("fill","green")
                            .on("mouseover",function(d){
                                    d3.select(this).style("fill","red")
                      svgContainer.append("text")
                                            .text("the dot")
                                            .attr("id","tooltip")
                                            .attr("x",50+5)
                                            .attr("y",50-10)
                                })
                            .on("mouseout",function(d){
                                    d3.select(this).style("fill","lightgreen")
                      svgContainer.select("#tooltip").remove()
                                })                          
​
    //to load the data from the csv file
    d3.csv("flowers.csv",function(data){
      data.forEach(function(d){
                var x= +d.sepal_length*50;
        var y= +d.sepal_width*50;
        var color;
        switch(d.species){
          case "setosa": {color="lightgreen";break;}
          case "versicolor": {color="lightblue";break;}
          case "virginica": {color="yellow";break;}
        }
        svgContainer.append("circle")
                        .attr("r",5)
                        .attr("cx",x)
                            .attr("cy",y)
                .attr("fill",color)
                        .attr("stroke","#EEE")
                        .on("mouseover",function(dd){
                                d3.select(this).style("fill","red")
                                svgContainer.append("text")
                                            .text(d.species)
                                            .attr("id","tooltip")
                                            .attr("x",x+5)
                                            .attr("y",y-10)
                                })
                        .on("mouseout",function(dd){
                                d3.select(this).style("fill",color)
                      svgContainer.select("#tooltip").remove()
                                })
                            
      })
    });
​
  </script>
</body>
​
    