American Chess - Resize

Bar Chart: Top 10 Countries Transfered Chess Players Origional From

Description: This dataset is can be consider as a subset of the story [American Chess Is Great Again: A wealthy patron and a trio of grandmasters are coming for Bobby Fischer’s legacy] from 538. Chess players change nationality, with great talents all around the world came to the U.S it supports the opinion the American chess will have a bright future.

URL

Download Data (CSV)

Forked From: d3noob’s Block

GUP Resize forked from Curran's Block

forked from connieGao0819's block: American Chess

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.bar {
    fill: steelblue;
}

svg {
  padding-top: 10px;  
  padding-left: 30px;
}

</style>
<body>
<div id="chart"></div>

<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var chartDiv = document.getElementById("chart");
    var svg = d3.select(chartDiv).append("svg");

var g = svg.append("g");
    var xAxisG = svg.append("g");
    var yAxisG = svg.append("g");

function redraw() {

// set the dimensions and margins of the graph
        var chartDivWidth = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth,
            chartDivHeight = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;

var margin = {top: 20, right: 30, bottom: 20, left: 20},
            width = chartDivWidth - margin.left - margin.right,  // 960
            height = chartDivHeight - margin.top - margin.bottom; // 500

// set the ranges
        var x = d3.scaleBand()
            .range([0, width])
            .padding(0.1);
        var y = d3.scaleLinear()
            .range([height, 0]);

svg
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");

// get the data
        d3.csv("country_count.csv", function (error, data) {
            if (error) throw error;

// format the data
            data.forEach(function (d) {
                d.count = +d.count;
            });

// Scale the range of the data in the domains
            x.domain(data.map(function (d) {
                return d.country;
            }));
            y.domain([0, d3.max(data, function (d) {
                return d.count;
            })]);

var bars = svg.selectAll(".bar")
                .data(data)

bars.exit().remove();
            g.exit().remove();

// append the rectangles for the bar chart
            bars
                .enter().append("rect").merge(bars)
                .attr("class", "bar")
                .attr("x", function (d) {
                    return x(d.country);
                })
                .attr("width", x.bandwidth())
                .attr("y", function (d) {
                    return y(d.count);
                })
                .attr("height", function (d) {
                    return height - y(d.count);
                });

// add the x Axis
            xAxisG
                .merge(xAxisG)
                .attr("transform", "translate(0," + height + ")")
                .call(d3.axisBottom(x));

// add the y Axis
            yAxisG
                .merge(yAxisG)
                .call(d3.axisLeft(y));

});
    }

redraw();

window.addEventListener("resize", redraw);

</script>
</body>

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