Я хочу визуализировать временные метки событий в моих данных, используя визуализацию, как показано ниже:
Я предполагаю, что это можно сделать несколькими различными способами, и, учитывая отсутствие у меня опыта работы с 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");
}
