Skip to content

Instantly share code, notes, and snippets.

@erwaller

erwaller/README.md

Last active December 22, 2015 18:18
Download ZIP
No one uses older versions of Internet Explorer by choice
Raw
README.md

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)!

Raw
combined.tsv
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
Raw
index.html
<!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