D3 Examples - D3Tutorialv2

xxxxxxxxxx
 
<!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) {
​
    var fnAccX = function(d) { return d[attrX]; };
  var fnAccY = function(d) { return d[attrY]; };
     
    xScale.domain([0, d3.max(myData, fnAccX) ]);
  yScale.domain([0, d3.max(myData, fnAccY) ]);
  
    var points = svg.selectAll(".points")
    .data(myData);
  
  //Enter
  var pointsEnter = points.enter()
    .append("circle")
    .attr("class", "points")
    .attr("r", 0);
  
  //Exit
  points.exit()
    .transition()
    .duration(1000)
    .attr("r", 0)
    .remove();
 
  //Update
  points.merge(pointsEnter)
    .attr("cx", function(d) { return xScale(fnAccX(d)); })
    .attr("cy", function(d) { return yScale(fnAccY(d)); })
    .attr("r", CIRCLE_R)
    .style("fill", function(d,i) { return colScale(i); })
    .on("mouseover", onMouseOver)
    .on("mouseout", onMouseOut);
    
  xAxis
    .transition()
    .duration(1000)
    .call(d3.axisBottom()
    .scale(xScale)
    .ticks(3));
    
  xAxis.select(".label").text(attrX);
  yAxis.select(".label").text(attrY);    
  
  
  yAxis
    .transition()
    .duration(1000)
    .call(d3.axisLeft()
        .scale(yScale)
        .ticks(3)
     );
    
}
​
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>
​
    