D3 Examples - Bar Chart with Scales and Axes

Bar Chart with Scales and Axes
This code example is the result of the Module 4's exercise from the course “Data Visualization and Infographics with D3,” taught by Alberto Cairo and Scott Murray, and offered through the Knight Center for Journalism in the Americas at UT Austin.
It is a simple horizontal bar chart with scales and axes. The bar chart represents seismic events, the magnitude of which is mapped to the width of each rectangle.
xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Exercise 4 - Horizontal Bar Chart with Scales and Axes</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
​
            body {
                font-family: sans-serif;
                color: #636363;
            }
​
            h4, p {
                width: 940px;
                margin: 5px 20px;
            }
​
            p {
                font-size: 13px;
                line-height: 1.1em;
            }
​
            svg {
                background-color: #fff;
            }
​
            a {
                text-decoration: none;
                color: #bcbd22;
                font-weight: bold;
            }
​
            a:hover {
                color: #17becf;
            }
​
            rect.bar {
                fill: #bcbd22;
            }
​
            rect.bar:hover {
                fill: #17becf;
            }
​
            text {
                fill: #000;
            }
​
            .axis path,
            .axis line {
                fill: none;
                stroke: #636363;
                shape-rendering: crispEdges;
            }
​
            .axis text {
                font-size: 11px;
                fill: #636363;
            }
​
            .y.axis path,
            .y.axis line {
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <h4>Seismic Events reported on March 20, 2015</h4>
​
        <p>The data of the seismic events (mostly of type <i>earthquake</i>) was taken from a
            <a href="https://earthquake.usgs.gov/earthquakes/feed/v1.0/csv.php" target="_blank">real-time feed</a>
            (including hourly, daily, weekly, and monthly feeds) provided by the website of
            <a href="https://earthquake.usgs.gov/" target="_blank">US Geological Survey (USGS)</a>. The bar chart is a subset
            filtered by time to represent the events that occured between midnight
            and 8 a.m. sorted by <a href="https://earthquake.usgs.gov/learn/glossary/?term=magnitude" target="_blank">magnitude</a>.</p>
​
        <script type="text/javascript">
            var margin,
                width,
                height,
                xScale,
                yScale,
                xAxis,
                yAxis,
                svg,
                bars,
                xAxisGroup,
                yAxisGroup
                ;
​
            margin = {
                top: 5,
                right: 10,
                bottom: 30,
                left: 280
            };
​
            width = 960 - margin.left - margin.right;
            height = 430 - margin.top - margin.bottom;
​
            xScale = d3.scale.linear()
                                .range([0, width]);
​
            yScale = d3.scale.ordinal()
                                .rangeBands([0, height], 0.1);
​
            xAxis = d3.svg.axis()
                                .scale(xScale)
                                .orient("bottom");
​
            yAxis = d3.svg.axis()
                                .scale(yScale)
                                .orient("left");
​
            svg = d3.select("body")
                .append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
            // Filters the dataset by time to include only data points between
            // midnight and 8 a.m.
            function filterByTime(time) {
                var start,
                    end,
                    t;
​
                // Start at midnight
                start = new Date(2015, 2, 20, 0, 0, 0).getTime();
                // End at 8 a.m.
                end = new Date(2015, 2, 20, 8, 0, 0).getTime();
                // Time the event occured
                t = new Date(time.time).getTime();
​
                return start <= t && t <= end;
            }
​
            d3.csv("earthquakes_all_day.csv", function(data) {
                var filteredByTime;
​
                filteredByTime = data.filter(filterByTime);
​
                filteredByTime.sort(function(a, b) {
                    return d3.descending(a.mag, b.mag);
                });
​
                xScale.domain([0, d3.max(filteredByTime, function(d) {
                    return +d.mag;
                })]);
​
                yScale.domain(filteredByTime.map(function(d) {
                    return d.place;
                }));
​
                bars = svg.selectAll("rect.bar")
                    .data(filteredByTime, function(d, i) {
                        return d.id;
                    })
                    .enter()
                    .append("rect");
​
                bars
                    .attr("class", "bar")
                    .attr("x", 0)
                    .attr("y", function(d, i) {
                        return yScale(d.place);
                    })
                    .attr("width", function(d) {
                        return xScale(d.mag);
                    })
                    .attr("height", yScale.rangeBand())
                    .append("title")
                    .text(function(d) {
                        var dateTime;
                        dateTime = new Date(d.time);
                        return "At " + dateTime.toTimeString() + " on " + dateTime.toDateString() +
                            " a seismic event of type " + d.type.toUpperCase() + " with a magnitude of " + d.mag +
                            " occured in " + d.place;
                    });
​
                xAxisGroup = svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0, " + (height) + ")")
                    .call(xAxis);
​
                yAxisGroup = svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(0,0)")
                    .call(yAxis);
​
            });
​
        </script>
​
    </body>
</html>
​
    