Thanaporn-sk/index.html

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

<body>
    <script src="http://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)'
                });

            function styleAxisNodes(axisNodes) {
                axisNodes.selectAll('.domain')
                    .attr({
                        fill: 'none',
                        'stroke-width': 1,
                        stroke: 'black'
                    });
                axisNodes.selectAll('.tick line')
                    .attr({
                        fill: 'none',
                        'stroke-width': 1,
                        stroke: 'black'
                    });
            }
        });


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

	<body>
	<script src="http://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)'
	});

	function styleAxisNodes(axisNodes) {
	axisNodes.selectAll('.domain')
	.attr({
	fill: 'none',
	'stroke-width': 1,
	stroke: 'black'
	});
	axisNodes.selectAll('.tick line')
	.attr({
	fill: 'none',
	'stroke-width': 1,
	stroke: 'black'
	});
	}
	});


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