从时间戳数组创建D3条形图

Question

I am looking for some insight on best practices/how to get started here. I have a json object with 1000 timestamps from a given day. I want to build the x-axis as a 24 hour time frame with a tick for 4 hour periods...12am - 4am, 4am - 8am, etc. I then want to build the y-axis based on volume. So that each bar for the 4-hour periods will be populated based on the number of timestamps in that period. My json looks like this (except with many more entries):

[
{"Time":"2017-02-07 16:14:06"},
{"Time":"2017-02-07 16:58:49"},
{"Time":"2017-02-07 17:07:11"},
{"Time":"2017-02-07 18:13:19"},
{"Time":"2017-02-07 13:56:06"},
{"Time":"2017-02-07 19:07:57"},
{"Time":"2017-02-07 12:08:58"},
{"Time":"2017-02-07 01:41:00"},
{"Time":"2017-02-07 11:56:49"},
{"Time":"2017-02-07 02:45:29"}
]

I have been doing a lot of reading on D3, specifically about how to use the built in 'time' method but I am hoping to get some pointers on how to get started. The end result that I would want would look something like the image attached here (disregard the black bars as those will come from another source). Any help/pointers are much appreciated.

Answer 1

This is not a pure D3 solution but what I would do is parse that JSON object and then create a new one that has a totals count for each time interval and then feed that into the d3 graph.

Not sure what you have tried yet, but this should get you on the right path.

https://jsfiddle.net/9f2vp8gp/

var margin = {
    top: 20,
    right: 20,
    bottom: 70,
    left: 40
  },
  width = 600 - margin.left - margin.right,
  height = 300 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%m").parse;

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .tickFormat(d3.time.format("%m"));

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .ticks(10);

var svg = d3.select("body").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 data = [{
  "date": "1",
  "value": 44
}, {
  "date": "2",
  "value": 24
} ,{
  "date": "3",
  "value": 31
},{
  "date": "4",
  "value": 38
},{
  "date": "5",
  "value": 46
},{
  "date": "6",
  "value": 23
}];

data.forEach(function(d) {
  d.date = parseDate(d.date);
  d.value = +d.value;
});

x.domain(data.map(function(d) {
  return d.date;
}));
y.domain([0, d3.max(data, function(d) {
  return d.value;
})]);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .selectAll("text")
  .style("text-anchor", "end")
  .attr("dx", "-.8em")
  .attr("dy", "-.55em")
  .attr("transform", "rotate(-90)");

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Value ($)");

svg.selectAll("bar")
  .data(data)
  .enter().append("rect")
  .style("fill", "steelblue")
  .attr("x", function(d) {
    return x(d.date);
  })
  .attr("width", x.rangeBand())
  .attr("y", function(d) {
    return y(d.value);
  })
  .attr("height", function(d) {
    return height - y(d.value);
  });