Question

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

enter image description here

我想这可以通过几种不同的方式完成，由于我缺乏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");


 }

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中可视化事件时间线？

1 个答案: