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>
        
    var margin = {top:20, right:20, bottom:70, left:40}
    var width = 600-margin.left-margin.right
    var height = 400-margin.top-margin.bottom
    
    var x=d3.scale.linear().range([width,0])
    var y=d3.scale.linear().range([height,0])
    
    var xAxis = d3.svg.axis()
                                    .scale(x)
                                    .orient("bottom")
                                    .ticks(10);
    var yAxis = d3.svg.axis()
                                    .scale(y)
                                    .orient("left")
                                    .ticks(10);   
    
    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 + ")")
    
    
    
    
    
    
    </script>
</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>
​
    