D3 Examples - sample1

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> <!-- for color scales -->
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-hsv.v0.1.min.js"></script>
<style>   
  body {font-family: garamond;} 
  .axis {font: 14px garamond;}
  .label {font: 16px garamond;}
</style>
​
<body>
  <h1>Films adapted from 'Literature'</h1>
  <div><svg id="chart" width="650" height="400"></svg></div>
​
<script>
​
var svg = d3.select("#chart"), 
    margin = {top: 50, right: 50, bottom: 50, left: 90},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;
    
​
var x = d3.scaleBand().rangeRound([0, width]).padding(0.3),
    y = d3.scaleLinear().rangeRound([height, 0]); 
​
​
var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var colorScale = d3.scaleOrdinal(d3.schemeCategory20);
​
 d3.csv("average.csv", function(d) {
  d.Number = +d.Number;
  d.Votes = +d.Votes;
  d.Voters = +d.Voters;
  d.Runtime = +d.Runtime;
  return d;
}, function(error, data) {
  if (error) throw error;
​
  
  x.domain(data.map(function(d) { return d.Type; }));  
  
  y.domain([0, d3.max(data, function(d) { return d.Number; })]); 
  
  g.append("g")
    .attr("class", "axis x-axis")
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x));
  
  g.append("g")
    .attr("class", "axis y-axis")
    .call(d3.axisLeft(y).ticks(15, "#"));
​
  
  g.append("text")
    .attr("class", "label")
    .attr("x", 0-margin.left)      
    .attr("y", 0-margin.top/2)          
    .style("text-anchor", "start") 
    .text ("Number of films adapted from novels")
  
  g.selectAll(".bar")
    .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { console.log ("Type: " + d.Type + ", x: " + x(d.Type)); return x(d.Type); })
      .attr("y", function(d) { console.log ("Number: " + d.Number + ", y: " + y(d.Number)); return y(d.Number); })
      .attr("width", x.bandwidth()) 
      .attr("height", function(d) { return height - y(d.Number); })
        .style("fill", function(d) {return colorScale(d.Type); }) 
  ;
});
 </script>
</body>
</html>