valex · November 5, 2017 23:03
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
 </head>

 <body>
    <script src="http://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-selection-multi.v1.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')
            .attrs({ width: totalWidth, height: totalHeight });

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

        var bands = d3.scaleBand()
            .domain(viewership)
            .padding(0.05)
            .range([0, graphWidth]);

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

        function translator(d, i) {
            return "translate(" + i*bands.step() + "," +
                (graphHeight - yScale(d)) + ")";
        }

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

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

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

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

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

        var leftAxis = d3.axisLeft(yAxisScale);

        var leftAxisNodes = leftAxisGroup.call(leftAxis);


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

        var bottomAxis = d3.axisBottom(bottomAxisScale);

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

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

        var bottomAxisNodes = bottomAxisGroup.call(bottomAxis);

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

    });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	</head>

	<body>
	<script src="http://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-selection-multi.v1.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')
	.attrs({ width: totalWidth, height: totalHeight });

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

	var bands = d3.scaleBand()
	.domain(viewership)
	.padding(0.05)
	.range([0, graphWidth]);

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

	function translator(d, i) {
	return "translate(" + i*bands.step() + "," +
	(graphHeight - yScale(d)) + ")";
	}

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

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

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

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

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

	var leftAxis = d3.axisLeft(yAxisScale);

	var leftAxisNodes = leftAxisGroup.call(leftAxis);


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

	var bottomAxis = d3.axisBottom(bottomAxisScale);

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

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

	var bottomAxisNodes = bottomAxisGroup.call(bottomAxis);

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

	});
	</script>
	</body>
	</html>
No results found