D3 Examples - final_vis1

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <style>
  .tooltip {
    position: absolute;
    min-width: 10px;
    background: #ffffff;
    padding: 8px;
    text-align: center;
  }
​
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
​
    input {
      height: 30px;
      width: 200px;
      /* horizontal*/
      -webkit-appearance: slider-horizontal;
  }
    </style>
</head>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<p><input id="slider" type="range" min="112970" max="167793" step="1" value="0" orient="horizontal" list="ticks"></p>
<datalist id="ticks">
    <option>112970</option>
    <option>126675</option>
    <option>140380</option>
    <option>153800</option>
    <option>167793</option>
</datalist>
<script>
var margin = {top: 20, right: 20, bottom: 70, left: 60},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;
​
// parse the date from the csv
var DataTrans = d3.time.format("%Y").parse;
​
// x and y scaler
var x = d3.scale.ordinal().rangeRoundBands([0, width], 0.25);
var y = d3.scale.linear().range([height, 0]);
​
// x and y axis
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(d3.time.format("%Y"));
​
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 + ")");
​
// declare the tooltip
var tooltip = d3.select("body").append("div")
    .attr("class", "tooltip");
​
d3.csv("final_vis1_barchart.csv", function(error, data) {
  data.forEach(function(d) {
    d.Year = DataTrans(d.Year);
    d.Qty = +d.Qty;
  });
    
  x.domain(data.map(function(d) { return d.Year; }));
  y.domain([0, d3.max(data, function(d) { return d.Qty; })]);
​
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "0.01em")
      .attr("dy", "0.51em")
      .attr("transform", "rotate(-50)");
​
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(0)")
      .attr("y", -20)
      .attr("dy", ".71em")
      .style("text-anchor", "start")
      .text("Qty in 1000 tonnes");
​
  // declare the transition
  var t = d3.transition().duration(1000);
​
  svg.selectAll("bar")
      .data(data)
      .enter().append("rect")
      .attr("fill", function(d) {
          return "rgb(50, 100, " + Math.round(d.Qty / 1000) + ", 0.7)";
      })
      .attr("x", function(d) { return x(d.Year); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.Qty); })
      .attr("height", function(d) { return height - y(d.Qty); })
      .on("mousemove", function(d){
            tooltip
              .style("left", d3.event.pageX - 50 + "px")
              .style("top", d3.event.pageY - 70 + "px")
              .style("display", "inline-block")
              .style("opacity", 0.8)
              .html(d.Qty);
      })
      .on("mouseout", function(d){ tooltip.style("display", "none");});
​
  d3.select("input")
      .on("change", function() {
          var threshold = +d3.select(this).node().value;
          console.log("thres:", threshold);
          svg.selectAll("rect")
            .attr("fill", function(d) {
              return "rgb(50, 100, " + Math.round(d.Qty / 1000) + ", 0.7)";
            })
            .filter(function(d) {
              return d.Qty <= threshold;
            })
            //.remove();
            .transition(t)
            .attr("fill", "#f4cccc");
     });
});
</script>
</body>
    