d3intro_ex06

2015 Mozfest workshop - Intro to d3js

### Example06 - Scalable barChart

Built with blockbuilder.org

forked from jjelosua's block: d3intro_ex00

forked from jjelosua's block: d3intro_ex01

forked from jjelosua's block: d3intro_ex02

forked from jjelosua's block: d3intro_ex03

forked from jjelosua's block: d3intro_ex04

forked from jjelosua's block: d3intro_ex05

forked from jjelosua's block: d3intro_ex05b

forked from jjelosua's block: d3intro_ex06

<!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>
    
    <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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js