Skip to content

Instantly share code, notes, and snippets.

@erwaller
Last active Dec 22, 2015
Embed
What would you like to do?
No one uses older versions of Internet Explorer by choice

While doing my occasional SeatGeek google analytics review to see if we can drop IE 8 yet, I came across some pretty interesting data. Older versions of IE show a much stronger dropoff in usage over the weekend. This fits the narrative that these old versions tend to hang around for awhile in corporate deployments quite nicely, I just never expected the effect to be so stark.

Notes

  • IE 8 is the last version to support Windows XP. My guess is that's why we get more traffic from IE 8 than from IE 9.
  • The "Desirability Coefficient" is a ratio of the daily weekend usage to the daily weekday usage.
  • Safari's pattern looks a lot like IE 10: little visually perceptible weekend dropoff. Chrome and firefox both show a bit of weekend dropoff, but nowhere near as much as either IE 8 or IE 9.

Think this is interesting?

We're hiring a Frontend Developer at SeatGeek to work with awesome web technologies (ie. the kind found in IE > 9)!

date IE 8 IE 9 IE 10
8/9/13 0.718101301 0.466371436 0.964710767
8/10/13 0.280929975 0.276086355 0.802795461
8/11/13 0.259064489 0.263492942 0.783697758
8/12/13 0.700941046 0.487683366 0.9119845
8/13/13 0.695820648 0.468585663 0.848325491
8/14/13 0.654442292 0.447688901 0.855798505
8/15/13 0.691253806 0.474674785 0.90063659
8/16/13 0.658732355 0.441738168 0.870744534
8/17/13 0.266537503 0.273872128 0.792554664
8/18/13 0.254220869 0.264323277 0.847218378
8/19/13 0.792693053 0.528923332 0.998477719
8/20/13 0.714779961 0.487406587 0.856213673
8/21/13 0.673124827 0.44782729 0.859535012
8/22/13 0.691115417 0.477857736 0.913230003
8/23/13 0.649460282 0.466924993 0.882646001
8/24/13 0.289648492 0.282175477 0.885413784
8/25/13 0.25574315 0.286188763 0.884168281
8/26/13 0.786050374 0.538057016 0.987960144
8/27/13 0.714641572 0.49183504 0.893717133
8/28/13 0.693329643 0.484500415 0.874342652
8/29/13 0.743149737 0.510655965 0.956269029
8/30/13 0.660254636 0.453639635 0.927899253
8/31/13 0.269582065 0.28508165 0.932189316
9/1/13 0.233877664 0.266675893 0.793384999
9/2/13 0.278162192 0.288956546 0.825214503
9/3/13 0.645170219 0.439523941 0.811929145
9/4/13 0.653335179 0.455023526 0.795322447
9/5/13 0.64004982 0.452532521 0.843481871
9/6/13 0.757127041 0.553418212 0.995433158
9/7/13 0.291032383 0.317049543 1
9/8/13 0.237199004 0.279684473 0.986022696
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke-width: 2px;
}
.bar-chart line {
shape-rendering: crispEdges;
stroke-width: 1px;
}
.bar {
shape-rendering: crispEdges;
}
svg {
border: 1px solid #ddd;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
var margin = {top: 20, right: 40, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
lineChartHeight = 360,
barChartHeight = height - lineChartHeight;
var parseDate = d3.time.format("%m/%d/%Y").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([lineChartHeight, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.value); });
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.tsv("combined.tsv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
data.forEach(function(d) {
d.date = parseDate(d.date);
});
var browsers = color.domain().map(function (name) {
var wkends = data.filter(function (d) { return d.date.getDay() == 0 || d.date.getDay() == 6; }),
wkdays = data.filter(function (d) { return d.date.getDay() >= 1 && d.date.getDay() <= 5; });
return {
name: name,
values: data.map(function (d) {
return { date: d.date, value: +d[name] };
}),
ratio: d3.mean(wkends, function (d) { return +d[name]; }) / d3.mean(wkdays, function (d) { return +d[name]; })
};
});
// Line Chart
x.domain(d3.extent(data, function(d) { return d.date; }))
y.domain([0, 1]);
var lineChart = svg.append("g")
.attr("class", "line-chart");
lineChart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (lineChartHeight) + ")")
.call(xAxis);
lineChart.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Normalized Visits");
var browser = lineChart.selectAll(".browser")
.data(browsers)
.enter().append("g")
.attr("class", "browser");
browser.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function (d) { return color(d.name); });
browser.append("text")
.datum(function (d) { return { name: d.name, value: d.values[d.values.length - 1] }; })
.attr("transform", function (d) { return "translate(" + x(d.value.date) + "," + y(d.value.value) + ")"; })
.attr("x", 3)
.attr("dy", ".35em")
.text(function (d) { return d.name; });
// Bar Chart
var barChart = svg.append("g")
.attr("class", "bar-chart")
.attr("transform", "translate(0, " + (lineChartHeight + 60) + ")");
var maxWidth = x(browsers[0].values[browsers[0].values.length - 1].date),
normCoef = 1 / d3.max(browsers, function (d) { return d.ratio; }),
scale = function (d) { return d * normCoef * maxWidth; };
var browser = barChart.selectAll(".browser")
.data(browsers)
.enter().append("g")
.attr("class", "browser");
browser.append("rect")
.attr("class", "bar")
.attr("y", function (d, i) { return i * 15; })
.attr("width", function (d) { return scale(d.ratio); })
.attr("height", 10)
.style("fill", function (d) { return color(d.name); });
browser.append("text")
.attr("transform", function (d, i) { return "translate(" + scale(d.ratio) + "," + (i * 15) + ")"; })
.attr("x", 3)
.attr("dy", ".8em")
.text(function (d) { return d.name; });
barChart.append("line")
.attr("y1", 0)
.attr("y2", 40)
.style("stroke", "#000");
barChart.append("text")
.attr("dy", "-0.5em")
.text("Desirability Coefficient");
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment