Skip to content

Instantly share code, notes, and snippets.

@erwaller

erwaller/README.md

Last active December 22, 2015 18:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save erwaller/6511564 to your computer and use it in GitHub Desktop.
Save erwaller/6511564 to your computer and use it in GitHub Desktop.
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