D3Tutorialv2

forked from davidgutierrez's block: D3Tutorialv2

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
rect {
  fill: steelblue;
}
.points {
  opacity: 0.7;
}
.label {
  fill:red;
}
  </style>
</head>
<h3>D3 Tutorial part 2, step 300</h3>

<div id="chart"></div>
<div id="details"></div>
<body>
  <script>
  var myData=[12, 15, 20, 50];

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 200 - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;

var xScale = d3.scaleLinear()
	.range([0, width]);
var yScale = d3.scaleLinear()
	.range([0, height]);

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

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")
  .attr("transform", "translate(0, " + height + ")");
xAxis.append("text")
	.attr("class", "label")
  .attr("transform", "translate(" +width + ", " + 20 + ")");;
var yAxis = svg.append("g")
	.attr("class", "axis y--axis");
yAxis.append("text")
	.attr("class", "label")
  .attr("transform", "translate(-30,0) rotate(-90)");  
  
  
function update(myData, attrX, attrY) {

function onMouseOver(d) {
	d3.select("#details").text(d.title);
  d3.select(this)
  	.transition()
    .duration(500)  
  	.attr("r", CIRCLE_R*5);
}

function onMouseOut(d) {
  d3.select(this)
  	.transition()
    .duration(500)
  	.attr("r", CIRCLE_R);
}
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", "count_faves");
});

</script>
</body>

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