D3byEX 5.10: Walking Dead Viewership

<!DOCTYPE html>
<html>
<head>
    <meta name="description" content="D3byEX 5.10" />
    <meta charset="utf-8">
</head>

<body>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script>
        var url = "https://gist.githubusercontent.com/d3byex/e5ce6526ba2208014379/raw/8fefb14cc18f0440dc00248f23cbf6aec80dcc13/walking_dead_s5.json";
        d3.json(url, function (error, data) {
            var viewership = data.map(function (d) {
                return d.USViewers;
            });

var maxViewers = d3.max(viewership);

var margin = { top: 10, right: 10, bottom: 260, left: 85 };

var graphWidth = 500, graphHeight = 300;

var totalWidth = graphWidth + margin.left + margin.right;
            var totalHeight = graphHeight + margin.top + margin.bottom;

var axisPadding = 3;

var svg = d3.select('body')
                .append('svg')
                .attr({ width: totalWidth, height: totalHeight });

var mainGroup = svg
                            .append('g')
                            .attr('transform', 'translate(' + margin.left + ',' +
                            margin.top + ")");

var bands = d3.scale.ordinal()
                .domain(viewership)
                .rangeBands([0, graphWidth], 0.05);

var yScale = d3.scale
                .linear()
                .domain([0, maxViewers])
                .range([0, graphHeight]);

function translator(d, i) {
                return "translate(" + bands.range()[i] + "," +
                                        (graphHeight - yScale(d)) + ")";
            }

var barGroup = mainGroup.selectAll('g')
                .data(viewership)
                .enter()
                .append('g')
                .attr('transform', translator);

barGroup.append('rect')
                .attr({
                    fill: 'steelblue',
                    width: bands.rangeBand(),
                    height: function(d) { return yScale(d); }
                });

barGroup.append('text')
                .text(function(d) { return d; })
                .style('text-anchor', 'start')
                .attr({
                    dx: 10,
                    dy: -10,
                    transform: 'rotate(90)',
                    fill: 'white'
                });

var leftAxisGroup = svg.append('g');
            leftAxisGroup.attr({
                transform: 'translate(' + (margin.left - axisPadding) + ',' +
                                            margin.top + ')'
            });

var yAxisScale = d3.scale
                .linear()
                .domain([maxViewers, 0])
                .range([0, graphHeight]);

var leftAxis = d3.svg.axis()
                .orient('left')
                .scale(yAxisScale);

var leftAxisNodes = leftAxisGroup.call(leftAxis);
            styleAxisNodes(leftAxisNodes);

var titles = data.map(function(d) { return d.Title; });
            var bottomAxisScale = d3.scale.ordinal()
                .domain(titles)
                .rangeBands([axisPadding, graphWidth + axisPadding]);

var bottomAxis = d3.svg
                .axis()
                .scale(bottomAxisScale)
                .orient("bottom");

var bottomAxisX = margin.left - axisPadding;
            var bottomAxisY = totalHeight - margin.bottom + axisPadding;

var bottomAxisGroup = svg.append("g")
                .attr({ transform: 'translate(' + bottomAxisX + ',' + bottomAxisY + ')' });

var bottomAxisNodes = bottomAxisGroup.call(bottomAxis);
            styleAxisNodes(bottomAxisNodes);

bottomAxisNodes.selectAll("text")
                .style('text-anchor', 'start')
                .attr({
                    dx: 10,
                    dy: -5,
                    transform: 'rotate(90)'
                });

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js