circle transitions example for @hectorleon

as discussed on the d3js #learning-d3 and #help slack channels on 2015/12/03

an 'anonymoyus' block from micahstubbs

Built with blockbuilder.org

forked from anonymous's block: fresh block

forked from anonymous's block: circle transitions example for @hectorleon

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<section class="row-1">
    <article id="chart--01"></article>
  </section>
  <script>
  
var dataset = [
  {datetime: "2013-01-01T11:56:00+00:00", amount: 200, pageViews: 412, enabled: true},
  {datetime: "2013-03-10T12:34:00+00:00", amount: 50,  pageViews: 412, enabled: true},
  {datetime: "2013-05-21T13:00:00+00:00", amount: 1250, pageViews: 412, enabled: true},
  {datetime: "2013-06-23T17:00:00+00:00", amount: 300, pageViews: 3500, enabled: true},
  {datetime: "2013-10-25T19:00:00+00:00", amount: 600.456, pageViews: 412, enabled: true},
  {datetime: "2013-12-29T21:15:00+00:00", amount: 550, pageViews: 412, enabled: true},
  {datetime: "2013-12-30T23:11:00+00:00", amount: 233, pageViews: 412, enabled: true},
];

var dataset2 = [
  {datetime: "2012-01-21T11:56:00+00:00", amount: 0, pageViews: 200, enabled: true},
  {datetime: "2013-03-17T12:34:00+00:00", amount: 150,  pageViews: 200, enabled: true},
  {datetime: "2013-06-21T13:56:00+00:00", amount: 50, pageViews: 800, enabled: true},
  {datetime: "2015-10-01T17:00:00+00:00", amount: 1300, pageViews: 3500, enabled: true},
  {datetime: "2015-10-05T19:56:00+00:00", amount: 400.456, pageViews: 1500, enabled: true},
  {datetime: "2015-11-29T21:56:00+00:00", amount: 10, pageViews: 700, enabled: true},
  {datetime: "2015-12-30T23:11:00+00:00", amount: 233, pageViews: 4000, enabled: true},
];

var margin       = {top: 35, right: 40, bottom: 50, left: 50};
  svgWidth       = 920, // 320,
  svgHeight      = 480, // 200,
  contentWidth   = svgWidth - margin.left - margin.right,
  contentHeight  = svgHeight - margin.top  - margin.bottom;

svg = d3.select("#chart--01")
              .append("svg")
                .attr("class", "chart sample-chart")
                .attr("width", svgWidth)
                .attr("height", svgHeight)
              .append('g')
                .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');   // Centering

var parseDate  = d3.time.format.utc("%Y-%m-%dT%H:%M:%S+00:00").parse;

dataset.forEach(function (d) {
  d.datetime  = parseDate(d.datetime);
  d.amount    = +d.amount;
  d.pageViews = +d.pageViews;
});

var xScale     = d3.time.scale.utc().range([0, contentWidth]),
    yScale     = d3.scale.linear().range([contentHeight, 0]),
    yScale1    = d3.scale.linear().range([contentHeight, 0]),
    xAxis      = d3.svg.axis().scale(xScale).orient("bottom").ticks(5),
    yAxisLeft  = d3.svg.axis().scale(yScale).orient("left"  ).ticks(5).tickFormat(d3.format("s")),
    yAxisRight = d3.svg.axis().scale(yScale1).orient("right").ticks(5).tickFormat(d3.format("s"));

function xGrid() { return d3.svg.axis().scale(xScale).orient("bottom").ticks(5); }
function yGrid() { return d3.svg.axis().scale(yScale).orient("left"  ).ticks(5); }

var valueline = d3.svg.line()
                  .interpolate("cardinal")
                  .x(function (d) { return xScale(d.datetime); })
                  .y(function (d) { return yScale(d.amount);   });

var valueline2 =d3.svg.line()
                  .interpolate("cardinal")
                  .x(function (d) { return xScale(d.datetime);  })
                  .y(function (d) { return yScale1(d.pageViews);});

var div = d3.select("body").append("div") 
            .attr("class", "tooltip")       
            .style("opacity", 0);

var year        = d3.time.format("%Y"),
    dayOfMonth  = d3.time.format("%d %b"),
    time        = d3.time.format("%H:%M");

// AutoUpdate
var inter = setInterval(function() { updateData(); }, 4000);

xScale.domain(d3.extent(dataset,  function (d) { return d.datetime; }));
yScale.domain([0, d3.max(dataset, function (d) { return Math.max(d.amount, d.pageViews); })]);
yScale1.domain([0, d3.max(dataset, function (d) { return Math.max(d.amount, d.pageViews); })]);
xScale.nice(d3.time.month);

svg.append("path")
      .attr("class", "line")
      .attr("d", valueline(dataset));

svg.append("path")
      .attr("class", "line line2")
      .attr("id", "line2")
      .attr("d", valueline2(dataset));

svg.selectAll("circle")
      .data(dataset)
      .enter()
      .append("circle")
        .attr("class", "scatter-dots")
        .attr("r", 3.5)
        .attr("cx", function(d) { return xScale(d.datetime); })
        .attr("cy", function(d) { return yScale(d.amount); })
        .on("mouseover", function(d) {    
          div.transition()    
              .duration(100)    
              .style("opacity", 0.95);    
          div.html("<span>" + dayOfMonth(d.datetime) + "</span> - " + 
                   "<span>" + time(d.datetime) + "</span><br/>" + 
                   "<span>" + d.amount + "</span>")  
              .style("left", (d3.event.pageX + 5 ) + "px")   
              .style("top",  (d3.event.pageY - 40) + "px");  
          })          
        .on("mouseout", function(d) {   
          div.transition()    
              .duration(500)    
              .style("opacity", 0); 
        });

svg.append("g")
      .attr("class", "axis x")
      .attr("transform", "translate(0, " + contentHeight + ")")
      .call(xAxis);

svg.append("g")
      .attr("class", "axis y left")
      .call(yAxisLeft);

svg.append("g") 
      .attr("class", "axis y right y1")
      .attr("transform", "translate(" + contentWidth + " ,0)")
      .call(yAxisRight);

svg.append("g")
    .attr("class", "grid")
    .attr("transform", "translate(0," + contentHeight + ")")
    .call(xGrid()
      .tickSize(-contentHeight, 0, 0)
      .tickFormat("")
    );

svg.append("g")            
    .attr("class", "grid")
    .call(yGrid()
      .tickSize(-contentWidth, 0, 0)
      .tickFormat("")
    );

// ******* UPDATING DATA ******* //

function updateData() {
  
  dataset2.forEach(function (d) {
    d.datetime  = parseDate(d.datetime);
    d.amount    = +d.amount;
    d.pageViews = +d.pageViews;
  });

xScale.domain (d3.extent(dataset2 , function (d) { return d.datetime; }));
  yScale.domain ([0, d3.max(dataset2, function (d) { return Math.max(d.amount, d.pageViews); })]);
  yScale1.domain([0, d3.max(dataset2, function (d) { return Math.max(d.amount, d.pageViews); })]);

var svg = d3.select("body").select("svg");

svg.select(".line")
   		.transition()
      .duration(750)
      .attr("d", valueline(dataset2));

svg.select(".line2")
      .transition()
      .duration(750)
      .attr("d", valueline2(dataset2));

svg.select(".axis.x")
      .transition()
      .duration(750)
      .call(xAxis);

svg.select(".axis.y.left")
      .transition()
      .duration(750)
      .call(yAxisLeft);

svg.select(".axis.y.right")
      .transition()
      .duration(750)
      .call(yAxisRight);

var circle = svg.selectAll("circle")
       .data(dataset2);
  
   circle.exit().remove();

circle.enter().append("circle")
      .attr("r", 3.5);
    
  
  	circle
       .transition()
       .duration(750)
       .attr("cx", function(d) { return xScale(d.datetime); })
       .attr("cy", function(d) { return yScale(d.amount); })
}
    </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js