D3 Examples - Some files for module-04 #knightd3 #dvd3course

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>Road Traffic Accidents in Minsk</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
    </head>
    
    <style>
        body {margin: 75px 50px 100px; font-family: sans-serif; font-size: 18px;}
        .axis path {opacity:0;}
        .axis line {
            fill: none;
            stroke: rgba(10, 20, 50, 0.1);
            shape-rendering: crispEdges;
        }
        g:first-child line {stroke: rgba(10, 20, 50, 0.5);}
​
        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }   
        .axis.y line {opacity:0;}
        rect.rta:hover {fill: rgb(0, 140, 210);}
        h1 {font-family: serif; font-size: 42px; font-style: italic;}
        #legend {font-size: 14px; font-style: italic;}
        #legend span {display: block; width: 12px; height: 12px; border-radius: 6px; float: left; margin: 3px 5px 0 0;}
        #totalRTA {background: #069;}
        #victimsRTA {background: #046;}
    </style>
​
    <body>
​
​
        
        <h1>Road Traffic Accidents<br />in Minsk in 2015</h1>
        <p>This chart shows the number of road traffic accidents a day in Minsk, source: <a href="https://gaiminsk.by/svodka">gaiminsk.by</a></p>
        <div id="legend">
            <span id="totalRTA"></span> — total number of accidents<br />
            <span id="victimsRTA"></span> — accidents with victims
        </div>
            
        <script type="text/javascript">     
            
            var dataset;
            var w = 800;
            var h = 1500;
            
            var svg = d3.select("body")
                .append("svg")
                .attr({
                    width: w,
                    height: h
                });
            
            var padding = [15, 10, 20, 75];
 
            var xScale = d3.scale.linear()
                                .range([ 0 , w - padding[1] - padding[3]]);  
            var yScale = d3.scale.ordinal()
                                .rangeRoundBands([ padding[0], h - padding[0] - padding[2]], 0.05);
​
            
            var xAxis = d3.svg.axis()
                            .scale(xScale)
                            .orient("bottom")
                            .ticks(100)
                            .ticks(15)     // huh, not 15 but 14 only, well, d3 knows better :)
                            .tickSize(-h + padding[0] + padding[2] + 50, -h + padding[0] + padding[2] + 50);
            var yAxis = d3.svg.axis()
                            .scale(yScale)
                            .orient("left");
            
            
            //Load in contents of CSV file
            d3.csv("data-gaiminsk-2015.csv", function(data) {
                
                dataset = data;
                
                
                xScale.domain([0, d3.max(dataset, function(d) {
                    return +d.RTA + 3;   // Add 7 here for a round value
                })]);
                yScale.domain(dataset.map(function(d) { return d.date; })); // mapping labels
​
​
                
                // here goes axes
                // put it here to make :hover-effect and title-tags work in chart
                svg.append("g")
                    .attr("class", "axis y")
                    .attr("transform", "translate(" + padding[3] + ", 0)")
                    .call(yAxis);
                svg.append("g")
                    .attr("class", "axis x")
                    .attr("transform", "translate(" + padding[3] + "," + (h - padding[2] - padding[0] - 15) + ")")
                    .call(xAxis);
                
                    
                // all RTA
                svg.selectAll(".rta")
                    .data(data)
                    .enter()
                    .append("rect")
                    .attr("class", "rta")
                    .attr({
                        x: padding[3],
                        y: function(d) {
                            return yScale(d.date);
                            },
                        width: function(d) {
                            return xScale(d.RTA);
                            },
                        height: yScale.rangeBand(),
                        fill: "#069"
                    })
​
                    // title elements with some information
                    .append("title") // would not work if axes lines goes over rects
                    .text(function(d) {
                        return "There were " + d.RTA + " acccidents at " + d.date + " and " + d.victims + " accidents were with victims";
                    });
​
                
                // bar with Victims
                svg.selectAll(".victims")
                    .data(data)
                    .enter()
                    .append("rect")
                    .attr("class", "victims")
                    .attr({
                        x: padding[3],
                        y: function (d) {
                            return yScale(d.date);
                            },
                        width: function(d) {
                            return xScale(d.victims);
                            }, 
                        height: yScale.rangeBand(),
                        fill: "#046"
                    });
​
            });
        </script>
 
    </body>
</html>
    