如何在 D3 中可视化事件时间线？答案

【问题标题】：How to visualize an event timeline in D3?如何在 D3 中可视化事件时间线？
【发布时间】：2015-05-08 11:47:30
【问题描述】：

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

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

编辑：根据 ee2Dev 的反馈，我将做 4 行而不是 2 行，分别捕获传入和传出的呼叫/文本。关于粒度，如果可视化能够以 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");


 }

【问题讨论】：

首先：可视化的选择似乎不太好：来电和去电或者文字都是按照相同的顺序绘制的，首先我建议你把它们分开有四个序列.如果一天有大量的来电和去电，算法应该如何选择绘制。用浅蓝色填充一半区域，用深蓝色填充下半部分？将光与深蓝色交错？其次，确保向观众展示描绘的时间：我看不到 2015 年 1 月 1 日在哪里结束或 2015 年 1 月 5 日从哪里开始？中间是第 2 到第 4 天还是我们只展示 2 天？
您可以选择 4 个单独的图表，因为它确实更合适。另一种方法是使用四个 calendarView 可视化bl.ocks.org/mbostock/4063318，而不是用一种颜色填充一整天，而是将每日正方形设为 24x24，并为每小时绘制 1 条垂直线，如果小时离散化足够细化
感谢 cmets。我完全同意。最终结果应该是 4 行。数据将显示连续天数，因此它将是第 1 天到第 5 天。我一直在考虑如何说明几天内的变化（例如，在穿过午夜时用黑线表示），但我仍在集思广益，以使其适合整体可视化。我会相应地更新原文。
你想描绘什么时间粒度？每小时打电话是/否？每 30 分钟？
查看更新的文本。您是否认为一周间隔 5 分钟过于雄心勃勃？

标签： javascript d3.js visualization data-visualization temporal

【解决方案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 轴...调整颜色等。

【讨论】：

谢谢，这似乎是一个很好的起点 :) 您能否简要介绍一下这 3 行代码的作用？ 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; }));
在这之前的几行，我定义了三个变量：colorOf、x 和 y。每个变量都指向一个函数，特别是一个尺度函数。尺度是从输入域映射到输出范围的函数。上面已经设置了每个比例的范围 - 所以在这三行中我设置了正确的域。
所以第一行将域设置为来自数据的不同类型的数组（['inc_call', 'out_text', 'out_call', 'inc_text']。您要映射的这些值到不同的 y 坐标。第二行将时间的最小值和最大值指定为 x 的域。最后一个将所有类型映射到颜色。请注意，y 和 colorOf 具有相同的域（不同类型的数组）但范围不同（ y 坐标或颜色）
您可以查看 d3 scales 的文档，然后您可以轻松调整它。