D3 Examples - Portuguese companies with more than 10 employees with website (2003-2014)

xxxxxxxxxx
 
<!doctype html>
<html>
​
<head>
    <meta charset="UTF-8">
    <title>Data Visualization and Infographics with D3 :: Module 3 Exercise</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>
        body {
            background-color: rgba(170, 170, 170, 0.37);
            font-family: arial;
        }
        
        svg {
            background-color: rgba(205, 248, 185, 0.4);
        }
        
        text {
            fill: black;
            font-family: arial;
            font-weight: bold;
            fill: white;
        }
        
        rect {
            fill: teal;
        }
        
        rect:hover {
            fill: rgba(0, 128, 128, 0.58);
        }
    </style>
</head>
​
<body>
​
​
    <h3>Portuguese companies with website (2003-2014)</h3>
    <svg>
​
    </svg>
​
​
​
    <script>
        var w = 500;
        var h = 400;
        var barPadding = 1;
​
        var svg = d3.select("svg")
            .attr("width", w)
            .attr("height", h);
​
​
        d3.csv("websitesEuro18.csv", function (data) {
​
            svg.selectAll("rect")
                .data(data)
                .enter()
                .append("rect")
                .attr("x", 0)
                .attr("y", function (d, i) {
                    return i * (h / data.length);
                })
                .attr("width", function (d) {
                    return d.portugal * 5;
                })
                .attr("height", h / data.length - barPadding)
                .append("title")
                .text(function (d) {
                    return d.years;
                });
​
            svg.selectAll("text")
                .data(data)
                .enter()
                .append("text")
                .text(function (d) {
                    return d.portugal + "%";
                })
                .attr("x", function (d) {
                    return (d.portugal * 5) - 35;
                })
                .attr("y", function (d, i) {
                    return i * (h / data.length) + ((h / data.length) / 2) + 2;
                });
​
​
​
​
        });
    </script>
​
​
​
​
</body>
​
</html>
    