Test Block

<h3>D3 Tutorial part 2, step 300</h3>

​

<div id="chart"></div>

​

<style>

  .chart rect {

    fill: lightblue;

  }

​

  .chart text {

    fill: black;

    font: 10px verdana;

    text-anchor: end;

  }

</style>

​

<svg class="chart"></svg>

<script src="//d3js.org/d3.v4.min.js"></script>

<script>

​

var margin = {top: 20, right: 20, bottom: 30, left: 40},

    width = 200 - margin.left - margin.right,

    height = 500 - margin.top - margin.bottom;

​

var wScale = d3.scaleLinear()

    .range([0, width]);

​

var colScale = d3.scaleOrdinal(d3.schemeCategory20);

var BAR_HEIGHT = 20;

​

var svg = d3.select("#chart").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 + ")");

​

var xAxis = svg.append("g")

    .attr("class", "axis x--axis");

function update(myData, attr) {

​

    var fnAcc = function(d) { return d[attr]; }

    myData = myData.sort(function (a, b) {

    return d3.descending(a[attr], b[attr]);

  });

    wScale.domain([0, d3.max(myData, fnAcc) ]);

    var bars = svg.selectAll(".bars")

    .data(myData);

  //Enter

  var barsEnter = bars.enter()

    .append("rect")

    .attr("class", "bars")

    .attr("width", 0);

  //Exit

  bars.exit()

    .transition()

    .duration(1000)

    .attr("width", 0)

    .remove();

  //Update

  bars.merge(barsEnter)

    .attr("x", 0)

    .attr("y", function(d, i ) { return i * (BAR_HEIGHT+1);})

    .attr("height", BAR_HEIGHT)

    .style("fill", function(d,i) { return colScale(i); })

    .transition().duration(1000)

    .attr("width", function(d) { return wScale(fnAcc(d)); });

  xAxis

    .transition()

    .duration(1000)

    .call(d3.axisTop()

    .scale(wScale)

    .ticks(3));

}

​

var res="https://api.flickr.com/services/rest/?method=flickr.interestingness.getList&api_key=f11688d9fc777acfb94a22ddd0077381&extras=count_views%2C+count_faves%2C+count_comments&format=json&nojsoncallback=1&api_sig=db63d57735ecc57c074f4c962f21ae31";

​

d3.json(res, function(err, data) {

    if(err) {

    console.err(err);

    alert(err);

    return;

  }

  data.photos.photo.forEach(function (d) {

    d.count_views = +d.count_views;

    d.count_faves = +d.count_faves;

    d.count_comments = +d.count_comments;

  })

  console.log(data);

  update(data.photos.photo, "count_views");

});

​

</script>