如何可视化 D3 中的事件时间线？

Question

我想使用如下所示的可视化方式可视化我数据中事件的时间戳：

我想这可以通过几种不同的方式完成，并且由于我缺乏使用 D3 的经验，我想听听有关好的方法的建议。也许它可以通过以复杂的方式操纵一些常见的可视化来实现？

编辑： 根据 ee2Dev 的反馈，我将做 4 行而不是 2 行，分别捕获传入和传出 calls/texts。关于粒度，最好是可视化能够以 5 分钟的间隔捕获一周的数据（一条短信相当于 5 分钟的通话时间，48 分钟的通话将四舍五入为 50 分钟的通话）。这将达到 7*24*12 = 2016 个可能的间隔，这似乎有些合理。也许 10 分钟的间隔比 5 分钟的间隔更合适，但我想代码可以很容易地为此调整。我没有展示的是午夜应该如何标记以显示哪些天是活动的，哪些不是。

下面是我的代码和示例数据：

// Data:
timestamp (yyyy-MM-dd HH:mm),type
1/1/2015 10:12,inc_call
1/2/2015 10:12,inc_call
1/2/2015 10:12,out_text
1/3/2015 10:12,out_call
1/4/2015 10:12,inc_text
1/5/2015 10:12,inc_text


// Code
<!DOCTYPE html>
<meta charset="utf-8">
<style>

</style>
<body>
<script type="text/javascript" src="d3/d3.js"></script>
<script type="text/javascript" src="papaparse.js"></script> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.tipsy.js"></script>
<link href="tipsy.css" rel="stylesheet" type="text/css" />
<script>

var width = 1000;
var height = 500;

var events;

var results = Papa.parse("events.csv", {
    header: true,
    download: true, // is needed even for local files as this interprets the input value as a path instead of simply the data
    dynamicTyping: true,
    delimiter: ",",
    skipEmptyLines: true,
    complete: function(results) {
        events = results.data;  
        CreateVisualizationFromData();
      }
});


var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);

var total_interactions;

function CreateVisualizationFromData()
{

    total_interactions = events.length;
    console.log(total_interactions);

    svg
      .append("marker")
      .attr("id", "arrowhead")
      .attr("refX", 6 + 7)
      .attr("refY", 2)
      .attr("markerWidth", 6)
      .attr("markerHeight", 4)
      .attr("orient", "auto")
      .append("path")
      .attr("d", "M 0,0 V 4 L6,2 Z");


 }

Answer 1

为了给您一个起点，请使用此代码并从那里开始。

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 60},
    width = 960 - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;

var colorOf = d3.scale.category10();

var y = d3.scale.ordinal()
    .rangeRoundBands([height, 0], 0.3);

var x = d3.time.scale()
    .range([5, width]);

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

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

var parseDate = d3.time.format("%m/%d/%Y %H:%M").parse;

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 + ")");

d3.csv("timeseries.csv", type, function(error, data) {
  y.domain(data.map(function(d) { return d.type; }));
  x.domain(d3.extent(data, function(d) { return d.time; }));
  colorOf.domain(data.map(function(d) { return d.type; }));

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

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

  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("y", function(d) { return y(d.type); })
      .attr("height", y.rangeBand())
      .attr("x", function(d) { return x(d.time); })
      .attr("width", 1)
      .style("fill", function(d) { return colorOf(d.type); })
});

function type(d) {
  d.time = parseDate(d.time);
  return d;
}

</script>

这里是文件 timeseries.csv

time,type
1/1/2015 10:12,inc_call
1/2/2015 10:12,inc_call
1/2/2015 10:12,out_text
1/3/2015 10:12,out_call
1/4/2015 10:12,inc_text
1/5/2015 10:12,inc_text

这是一个 JSFiddle：http://jsfiddle.net/ee2todev/6u0a0qnw/ 您可能想要删除 y 轴，将其替换为标签，格式化 x 轴...调整颜色等。

如何可视化 D3 中的事件时间线？

How to visualize an event timeline in D3?

javascript

d3.js

visualization

data-visualization

temporal