I want to visualize the timestamps of events in my data using a visualization as shown below:
I guess this can be done in several different ways and with my lack of experience with D3, I'd like to hear a recommendation for a good approach. Perhaps it can achieved by manipulating some common visualization in an intricate way?
EDIT: Based on feedback from ee2Dev, I will do 4 lines instead of 2, capturing incoming and outgoing calls/texts separately. Regarding granularity, it would be best if the visualization could capture one week of data in 5 minute intervals (one text message will equal to 5 min of talking and a 48 minute call will be rounded up to a 50 minute call). That will amount to 7*24*12 = 2016 possible intervals, which seems somewhat reasonable. Perhaps 10 min intervals would be more suitable than 5 min intervals, but I guess the code can be easily adjusted for that. Something that I haven't shown is how midnight should be marked to show which days are active, and which are not.
Below is my code and my sample data:
// 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");
}
To give you a starting point use this code and go from there.
<!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>
and here the file 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
And here is a JSFiddle: http://jsfiddle.net/ee2todev/6u0a0qnw/ You might want to remove the y axis, replace it with labels, format the x axis...adjust the colors, etc..
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.