Skip to content

Instantly share code, notes, and snippets.

@nadinesk

nadinesk/README.md

Last active April 11, 2023 18:16
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nadinesk/52ea78139b9652934ea6ed0934def667 to your computer and use it in GitHub Desktop.
Save nadinesk/52ea78139b9652934ea6ed0934def667 to your computer and use it in GitHub Desktop.
Download ZIP
RHOBH viewership - multiple line chart
Raw
README.md

This example shows viewership of the Real Housewives of Beverly Hills in millions, by season and by episode (along with the embarassing fact that I'm a big enough fan of this show to create this chart, having watched all episodes of all six seasons). Episodes are shown along the x-axis, and views are shown along the y-axis, with each line representing one of the six seasons. Some seasons had fewer episodes than others, and in those cases, the average views were used rather than null values. (Average values were used for Season 1, Episodes 18-23; Season 3, Episodes 23; and Season 6, episode 23 tbd). I removed Episode 24 since this was only shown during Season 2. Season 2 had the highest average viewrship at 2.2 million, and Season 6 has had the lowest average viewership so far, excluding the final episode which is TBD, with 1.8 million households watching.

The final episode of Season 6 aired last night, and during the reunion, there was controversy over a cast member possibly angling other cast members to create a more interesting storyline (probably to generate more views). I've read that the viewership has been declining, and I wanted to see what that looked like. This data is from Nielsen ratings' Live viewing (after doing some research, I believe Live ratings include TV and DVR playback on the same day, from 3am-3am. Also from Nielsen, Live viewing, "...ratings are the percentage of TV homes in the U.S. tuned into television." I'm not an expert on tv ratings, but it looks like this dataset does not take into account cross-platorm views, and since more and more people are watching tv shows on their computers and phones, I wonder if this has a signficant effect on the decline in these numbers.

Raw
data.tsv
date S01 S02 S03 S04 S05 S06
E01 1.53 2.18 1.80 1.59 2.00 1.91
E02 1.42 1.55 1.99 1.71 1.35 1.77
E03 1.23 1.70 1.87 1.77 1.99 1.53
E04 1.86 1.87 2.35 1.62 1.85 1.59
E05 1.74 1.96 2.31 1.90 1.71 1.78
E06 1.81 1.91 2.19 1.84 1.38 1.78
E07 2.02 2.10 2.09 2.01 1.64 1.81
E08 1.91 2.10 1.94 1.72 1.84 1.85
E09 2.17 1.68 1.93 2.00 1.85 1.82
E10 1.81 2.13 1.98 1.82 1.89 1.90
E11 2.16 2.31 2.04 1.80 2.14 1.81
E12 2.31 2.06 2.07 1.78 1.73 1.90
E13 2.75 2.26 1.85 1.95 1.86 1.79
E14 2.55 2.19 1.93 1.91 1.78 1.67
E15 2.69 2.34 1.89 1.91 1.60 1.66
E16 1.59 2.43 1.79 1.71 1.81 1.70
E17 1.12 2.59 1.56 1.80 1.96 1.83
E18 1.92 2.50 1.60 1.83 1.81 1.83
E19 1.92 2.76 2.05 1.95 1.88 1.76
E20 1.92 3.02 2.29 1.71 2.27 1.98
E21 1.92 2.85 2.11 1.96 2.13 2.03
E22 1.92 2.39 1.57 1.81 1.97 1.88
E23 1.92 2.14 1.96 1.37 1.30 1.80
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;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 80, bottom: 70, left: 50},
width = 960 - margin.left - margin.right,
height = 520 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y%m%d").parse;
var x = d3.scale.ordinal()
.rangeRoundBands([1, width]);
var y = d3.scale.linear()
.range([height, 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()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.temperature); });
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("data.tsv", function(error, data) {
if (error) throw error;
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
var cities = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {date: d.date, temperature: +d[name]};
})
};
});
x.domain(data.map(function(d) { return d.date; }));
y.domain([
d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", 265 )
.attr("y", 31 )
.style("text-anchor", "middle")
.text("Episode");
svg.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("Views (millions)");
var city = svg.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
city.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.temperature) + ")"; })
.attr("x", 3)
.attr("dy", ".55em")
.text(function(d) { return d.name; });
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment