D3 Examples - D3: Map Timeline

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
    <title>D3 Mapping Timeline</title>
<meta charset="utf-8">
<link rel="stylesheet" href="d3.slider.css" />
<style>
​
path {
  fill: none;
  stroke: #333;
  stroke-width: .5px;
}
​
.land-boundary {
  stroke-width: 1px;
}
​
.county-boundary {
  stroke: #ddd;
}
​
.site {
    stroke-width: .5px;
  stroke: #333;
  fill: #9cf;
}
​
#slider3 {
  margin: 20px 0 10px 20px;
  width: 900px;
}
​
</style>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="d3.slider.js"></script>
</head>
​
​
<body>
​
<div id="slider3"></div>
​
​
<script>
​
var width = 960,
    height = 600;
​
var mapPath = "/cmdoptesc/raw/4714c586f69425043ae3/us.json";
​
var projection = d3.geo.albersUsa()
    .scale(1280)
    .translate([width / 2, height / 2]);
​
var path = d3.geo.path()
    .projection(projection);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
d3.json(mapPath, function(error, us) {
  if (error) return console.error(error);
​
  svg.append("path")
      .datum(topojson.feature(us, us.objects.land))
      .attr("d", path)
      .attr("class", "land-boundary");
​
  svg.append("path")
      .datum(topojson.mesh(us, us.objects.counties, function(a, b) { return a !== b && (a.id / 1000 | 0) === (b.id / 1000 | 0); }))
      .attr("d", path)
      .attr("class", "county-boundary");
​
  svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("d", path)
      .attr("class", "state-boundary");
​
​
  d3.tsv("rest_777.txt")
    .row(function(d) {
      return {
        permalink: d.permalink,
        lat: parseFloat(d.lat),
        lng: parseFloat(d.long),
        city: d.city,
        created_at: moment(d.created_at,"YYYY-MM-DD HH:mm:ss").unix()
      };
    })
    .get(function(err, rows) {
        if (err) return console.error(err);
​
      window.site_data = rows;
    });
});
​
var displaySites = function(data) {
  var sites = svg.selectAll(".site")
      .data(data, function(d) {
        return d.permalink;
      });
​
  sites.enter().append("circle")
      .attr("class", "site")
      .attr("cx", function(d) {
        return projection([d.lng, d.lat])[0];
      })
      .attr("cy", function(d) {
        return projection([d.lng, d.lat])[1];
      })
      .attr("r", 1)
      .transition().duration(400)
        .attr("r", 5);
​
  sites.exit()
    .transition().duration(200)
      .attr("r",1)
      .remove();
};
​
var minDateUnix = moment('2014-07-01', "YYYY MM DD").unix();
var maxDateUnix = moment('2015-07-21', "YYYY MM DD").unix();
var secondsInDay = 60 * 60 * 24;
​
d3.select('#slider3').call(d3.slider()
  .axis(true).min(minDateUnix).max(maxDateUnix).step(secondsInDay)
  .on("slide", function(evt, value) {
    var newData = _(site_data).filter( function(site) {
      return site.created_at < value;
    })
    // console.log("New set size ", newData.length);
​
    displaySites(newData);
  })
);
​
</script>
</body>
​
    