Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Aug 20th, 2012  |  syntax: None  |  size: 2.19 KB  |  hits: 5  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. d3.json("https://out.bitdeli.com/v1/data/s-04ba8cdd3ee197-2a7bff2d/groups?latest&max=50", function(json){
  2. //console.log(json)
  3. var now = new Date()
  4. var change_mins = function(date, dmin) {
  5.     return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes() + dmin, 0);
  6. }
  7. /*
  8. var items = [
  9.     {"name":"Montgomery", "estimate":change_mins(now, 5) },
  10.     {"name":"Embarcadero", "estimate":change_mins(now, -5) }
  11. ]*/
  12. //lets just try one train
  13. var stations = _.map(json.items, function(item) {
  14.     return item.object  
  15. })
  16. //lets just do Montgomery for now
  17. //console.log(stations)
  18. var station = _.find(stations, function(station) {
  19.     //console.log(station)
  20.     return station.station === "Montgomery St."
  21. })
  22.  
  23. var trains = _.map(station.trains, function(train) {
  24.     train['time'] = change_mins(now, parseInt(train.minutes))
  25.     return train;
  26. })
  27. //console.log("trains",trains)
  28. //get the width and height of the svg
  29. var sw = parseInt(d3.select("svg").style("width"))
  30. var sh = parseInt(d3.select("svg").style("height"))
  31.    
  32. var x = d3.time.scale()
  33. .domain([
  34.     d3.min(trains, function(d) {return d.time}),
  35.     d3.max(trains, function(d) { return d.time})
  36.     ])
  37. .range([0, sw]);
  38.  
  39. var xDateAxis = d3.svg.axis()
  40.     .scale(x)
  41.     /*
  42.     .orient('top')
  43.         //.ticks(d3.time.mondays, (x.domain()[1] - x.domain()[0]) > 15552e6 ? 2 : 1)
  44.         //.tickFormat(d3.time.format('%d'))
  45.         .tickSize(6, 0, 0)
  46. */
  47.  
  48. var svg = d3.select("svg")
  49.  
  50. //lets draw a small box accross the top of the screen
  51. svg.append("rect")
  52. .attr("width", "100%")
  53. .attr("height", 20)
  54. .attr("fill", "#000000")
  55. .attr("opacity", .3)
  56. //lets make a second box for south bound
  57. svg.append("rect")
  58. .attr("transform", "translate(0, 25)")
  59. .attr("width", "100%")
  60. .attr("height", 20)
  61. .attr("fill", "#000000")
  62. .attr("opacity", .3)
  63.  
  64. console.log("asdf")
  65. svg.append("g")
  66. .attr("id", "xaxis")
  67. .attr("transform", "translate(0,60)")
  68. .call(xDateAxis)
  69.  
  70. //lets draw a rectangle for each item
  71. svg.selectAll("g.item")
  72. .data(trains)
  73. .enter()
  74. .append("circle")
  75. .attr("cx", function(d,i) {
  76.     //console.log("d", d, d.time, x(d.time))
  77.     return x(d.time)
  78. })
  79. .attr("cy", 10)
  80. .attr("r", 5)
  81. .attr("fill", function(d,i) { return d.hexcolor})
  82. .attr("opacity", 0.9)
  83. })
  84. console.log("sup")
create a new version of this paste RAW Paste Data