Test Block

Built with blockbuilder.org

About

forked from emilioalvarado's block: Grades block

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

.chart text {
    fill: black;
    font: 10px verdana;
    text-anchor: end;
  }
</style>

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

https://d3js.org/d3.v4.min.js