Files for module-05 #knightd3 #dvd3course

<!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: 14px;}
        .axis path {display: none;}
        .axis line {
            fill: none;
            stroke: rgb(200, 200, 200);
            shape-rendering: crispEdges;
        }
        .axis line {opacity: 0.5;}
        .axis g:first-child line {stroke: rgba(10, 20, 50, 0.75);}

.axis text {
            font-family: sans-serif;
            font-size: 11px;
        }   
        /*.axis.y line {opacity:0;}*/
        circle.rta:hover {fill: rgb(255, 180, 60);}
        h1 {font-family: serif; font-size: 42px; font-style: italic;}
        #legend {font-size: 14px; font-style: italic;visibility: hidden;}
        #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 scatter plot shows the number of road traffic accidents a day (yAxis)<br />
            and the number of drivers, prosecuted for violation of traffic rules (xAxis) in Minsk</p>
        <p>Actually, they have no connections and it was made just for practice</p>
        <p>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 padding = [15, 10, 20, 75];
            var padding = {top:30, right:10, bottom:40, left:28}; // oh, it's a brilliant idea to use object instead of array for increase code readability
            var w = 800;
            var h = 600;
            
            var svg = d3.select("body")
                .append("svg")
                .attr({
                    width: w,
                    height: h
                });            
 
            var xScale = d3.scale.linear()
                                .range([ 0 , w - padding.right - padding.left]);  
            var yScale = d3.scale.linear()
                                .range([ padding.top, h - padding.bottom]);
       
            var xAxis = d3.svg.axis()
                            .scale(xScale)
                            .orient("bottom")
                            .tickSize(-(h - padding.top - padding.bottom))
                            .tickPadding(10);
            
            var yAxis = d3.svg.axis()
                            .scale(yScale)
                            .orient("left")
                            .tickSize(-(w - padding.left - padding.right))
                            .tickPadding(10);

//Load in contents of CSV file
            d3.csv("data-gaiminsk.csv", function(data) {
                
                dataset = data;
                    
                xScale.domain([0, d3.max(dataset, function(d) {
                    return +d.prosecuted + 10;
                })]);
                yScale.domain([
                    d3.max(dataset, function(d) {
                        return +d.RTA + 10;
                    }),
                    0
                ]);

// axes go here
                // put them here to make :hover-effect and title-tags work in chart
                svg.append("g")
                    .attr("class", "axis y")
                    .attr("transform", "translate(" + padding.left + ", 0)")
                    .call(yAxis)
                    // label for yAxis
                    .append("text")
                    .attr("text-anchor", "start")
                    .attr({
                        class: "ylabel",
                        y: 15,
                        x: -padding.left,
                    })
                    .text("Number of RTA")
                    .style({
                        "font-size": 12,
                        "font-style": "italic"
                    });
                
                svg.append("g")
                    .attr("class", "axis x")
                    .attr("transform", "translate(" + padding.left + "," + (h - padding.bottom) + ")")
                    .call(xAxis)
                    // label for xAxis
                    .append("text")
                    .attr("text-anchor", "end")
                    .attr({
                        class: "xlabel",
                        y: 38,
                        x: w - padding.left - padding.right,
                    })
                    .text("Number of drivers, which were prosecuted for violation of traffic rules")
                    .style({
                        "font-size": 12,
                        "font-style": "italic"
                    });
                
                    
                // drawing circles
                var circles = svg.selectAll(".rta")
                    .data(data)
                    .enter()
                    .append("circle");
                
                circles
                    .attr("class", "rta")
                    .attr({
                        cx: function(d) {
                            return xScale(d.prosecuted) + padding.left;
                            },
                        cy: function(d) {
                            return yScale(d.RTA);
                            },
                        r: 0.1,
                        fill: "#069"
                    })
                    // title elements with some information
                    // would not work if axes lines goes over circles
                    .append("title")
                    .text(function(d) {
                        return "There were " + d.RTA + " acccidents at " + d.date + " and " + d.victims + " accidents were with victims. " + d.prosecuted + " drivers were prosecuted for violation of traffic rules.";
                    });
                
                //transitions
                circles
                    .sort(function(a, b) {
                        return d3.ascending(+a.prosecuted, +b.prosecuted);
                    })
                    .transition()
                    .delay (function(d, i) {
                        return i * 5;
                    })
                    .duration(500)
                    .attr({
                        r: 3,
                    });

});
		</script>
 
    </body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js