Files for module-06 #knightd3 #dvd3course

<!DOCTYPE html>
<html>
    
	<head>
		<meta charset="utf-8">
		<title>Road Traffic Accidents in Minsk</title>
        <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
	</head>
    
    <style>
        body {font-family: 'Open Sans', sans-serif;}
        
        .annotation {margin: 50px 0 75px 50px; width: 800px;}
        h1 {font-size: 2.5em; font-weight: 300;}
        .textRed {color: red; font-weight: 700;}
        .textSteelBlue {color: steelblue; font-weight: 700;}
        .source {font-size: 0.75em; font-style: italic; color: gray;}
        a, a:visited {color: black;}
        a:hover {color: red;}
        
        .axis path, .axis line {
            fill: none;
            stroke: rgb(245, 245, 245);
            stroke-width: 1;
            shape-rendering: crispEdges;
        }
        .y path, .x path {display: none;}
        .y g:first-child line {stroke: rgb(200, 200, 200);}
        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }
        
        path {
            fill: none;
            stroke: rgb(200, 200, 200);
            stroke-width: 1;
            shape-rendering: geometricPrecision;
            opacity: 0.75;
        }
        g path:hover {stroke-width: 2;}
        
        g.highlight path {stroke-width: 2;}
        g.red path {stroke: red;}
        g.steelblue path {stroke: steelblue;}
        g.highlight path:hover {stroke-width: 3;}
        
        .tick text {font-size: 9px;}
        
    </style>

<body>

<div class="annotation">
            <h1>Road Traffic Accidents in Minsk, 2015</h1>
            <p>This line chart shows some data from <a href="https://gaiminsk.by/svodka">daily reports</a> by gaiminsk.by, such as the number of <span class="textSteelBlue">Road&nbsp;traffic&nbsp;accidents</span> and <span class="textRed">Accidents&nbsp;with&nbsp;victims</span>.</p>
                <p>It is not final version yet, but a practical part for module 6 <a href="https://twitter.com/hashtag/knightd3">#knightD3 </a>.</p>

</div>
		<script type="text/javascript">

var w = 900,
                h = 600,
                padding = {top:20, right:20, bottom:50, left:50};

var dateFormat = d3.time.format("%x");
            
            var xScale = d3.time.scale()
                                .range([padding.left, w - padding.right - padding.left]),
                yScale = d3.scale.linear()
                                .range([padding.top, h - padding.bottom]);

var xAxis = d3.svg.axis()
                            .scale(xScale)
                            .orient("bottom")
                            .ticks(8)
                            .tickSize(-(h - padding.top))
                            .tickPadding(10)
                            .tickFormat(function(d) {
                                return dateFormat(d);
                            }),
                yAxis = d3.svg.axis()
                            .scale(yScale)
                            .orient("left")
                            .tickSize(-(w - padding.left - padding.right - 50))
                            .tickPadding(10)
                            .ticks(10);

var categories = [/*"date",*/ "numRTA", "drunkRTA", "numRTAwithVictims", "numDead", "numWounded", "numDrunkDr", "numUnlicensedDr", /*"numSpeedingDr", "numPedestriansViolatingRules",*/ "numDrProsecuted"]

dataset = []
                
                for (i = 0; i < categories.length; i++) {
                    dataset[i] = {
						catName: categories[i],
						accidents: []
					};
                    
					for (var j = 0; j < data.length; j++) {
							dataset[i].accidents.push({
								day: data[j].date,
								amount: data[j][categories[i]]
                            });
					}
                    
                }
                
                xScale.domain([
                    d3.min(data, function(d) {
                        return dateFormat.parse(d.date);
                    }),
                    d3.max(data, function(d) {
                        return dateFormat.parse(d.date);
                    })
                ]);
                
                yScale.domain([
                    d3.max(dataset, function(d) {
                            
                        if (d.catName == "numPedestriansViolatingRules" || d.catName == "numSpeedingDr") {
                            return false;
                        } else {
                            return d3.max(d.accidents, function(d) {
                                return +d.amount;
                            });
                        }
                    }),
                    0
                ]);

// here goes axes
                svg.append("g")
                    .attr("class", "axis x")
                    .attr("transform", "translate(0 ," + (h - padding.bottom) + ")")
                    .call(xAxis)
//                    .append("text")
//                    .attr("text-anchor", "start")
//                    .attr({
//                        class: "xlabel",
//                        y: 15,
//                        x: -padding.left,
//                    })
//                    .text("Date")
//                    .style({
//                        "font-size": 12,
//                        "font-style": "italic"
//                    });
                
                svg.append("g")
                    .attr("class", "axis y")
                    .attr("transform", "translate(" + (padding.left) + ", 0)")
                    .call(yAxis);
//                    .append("text")
//                    .attr("text-anchor", "start")
////                    .attr("transform", "rotate(-90)")
////                    .attr("text-anchor", "middle")
//                    .attr({
//                        class: "ylabel",
//                        y: padding.top,
//                        x: -25,
//                    })
//                    .text("Number of accidents")
//                    .style({
//                        "font-size": 12,
//                        "font-style": "italic"
//                    });

var groups = svg.selectAll(".line")
					.data(dataset)
					.enter()
					.append("g")
					.attr("class", function(d) {

if (d.catName == "numRTA") {
							return "highlight steelblue";
						} else if (d.catName == "numRTAwithVictims") {
							return "highlight red";
						} else {
							return "";
						}
                        
                    });

groups.append("title")
					.text(function(d) {
						return d.catName;
					});
                
				var catLine = groups.selectAll("path")
					.data(function(d) {
						return [ d.accidents ];
					})
					.enter()
					.append("path")
					.attr("class", "line")
					.attr("d", line);
//                    .style("opacity", 0);
                
                catLine.transition()
                    .delay (500)
                    .duration(2000)
                    .attr("d", line2);
//                    .style("opacity", 0.5);
                
                
            });
            
            
		</script>
 
    </body>
</html>

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

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