D3 Examples - d3intro

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Concentration time series plotting</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>
      body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
      .existing {color: blue;}
      .new {color: green;}
    </style>
  </head>
  <body>
    <h1>Gene concentrations</h1>
    <!--<p> previous paragraph</p>-->
    <script type="text/javascript">
        //loading a csv file
      d3.csv("evolved1.csv", function(data) {       
                //Gene1
        //Width and height
        var w = 800;
        var h = 200;
        var barPadding = 1;
        
        //Create SVG element
        var svg4 = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);
        //Bind data
        var rect4 = svg4.selectAll("rect")
                                        .data(data);
                                            
            //For every new created rectangle visualize
        rect4.enter()
             .append("rect")
                 .attr("x", function(d,i) {return i+1; })
             .attr("y", function(d) {return h-(100+80*d.gene4);})
             .attr("width", function(d) {return w/data.length;})
             .attr("height", function(d,i) {return 100+80*d.gene4;})
             .style("fill",function(d,i) {
                 if (i > 1) {
                    return "#ff005d";
                 }
                 else {
                      return "#5605f9";
                 }
                });
        }); //end of csv method
    </script>
  </body>
</html>
​
    
d3intro_ex06

2015 Mozfest workshop - Intro to d3js
