-
Notifications
You must be signed in to change notification settings - Fork 1
/
analise.html
112 lines (96 loc) · 3.29 KB
/
analise.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
---
layout: default
title: Análise dos dados de criminalidade na cidade de São Paulo
---
<style> /* set the CSS */
.bar { fill: steelblue; }
</style>
<div class="container-fluid">
<div class="jumbotron">
<div class="row">
<!-- <div class="col-sm-6 col-xs-12"></div> -->
<div class="col-sm-8 col-xs-6">
<h2><b>Período do dia que ocorreram os crimes</b></h2>
<svg width="576" height="300" id="periodo"></svg>
</div>
<div class="col-sm-8 col-xs-6">
<h2><b>Furto de veículos - Tipos de veículos</b></h2>
<svg width="576" height="300" id="furto_veiculo"></svg>
</div>
</div>
</div>
</div>
<script>
var svg = d3.select("svg#periodo"),
margin = { top: 30, right: 20, bottom: 30, left: 50 },
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var svgVeiculo = d3.select("svg#furto_veiculo"),
margin = { top: 30, right: 20, bottom: 30, left: 50 },
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleBand()
.range([40, width])
.padding(0.1);
var y = d3.scaleLinear()
.range([height, 0]);
var yLog = d3.scaleLog()
.range([height,0]);
d3.csv("./data/homicidio.csv", function (d) {
d.quantidade = +d.quantidade;
return d;
}, function (error, data) {
if (error) throw error;
// Scale the range of the data in the domains
x.domain(data.map(function(d) { return d.periodo; }));
y.domain([0, d3.max(data, function(d) { return d.quantidade + 60; })]);
svg.selectAll("#periodo.bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.periodo); })
.attr("width", x.bandwidth())
.attr("y", function(d) { return y(d.quantidade); })
.attr("height", function(d) { return height - y(d.quantidade); });
// add the x Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// add the y Axis
svg.append("g")
.attr("transform", "translate(40, 0)")
.call(d3.axisLeft(y));
});
d3.csv("./data/furto-veiculo.csv", function(d) {
d.quantidade = +d.quantidade;
return d;
}, function (error, data) {
if (error) throw error;
// Scale the range of the data in the domains
x.domain(data.map(function(d) { return d.tipo_veiculo; }));
yLog.domain([0, d3.max(data, function(d) { return d.quantidade + 60; })]);
svgVeiculo.selectAll("#furto_veiculo.bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.tipo_veiculo); })
.attr("width", x.bandwidth())
.attr("y", function(d) { return yLog(d.quantidade); })
.attr("height", function(d) { return height - yLog(d.quantidade); });
// add the x Axis
svgVeiculo.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-35)");
// add the y Axis
svgVeiculo.append("g")
.attr("transform", "translate(40, 0)")
.call(d3.axisLeft(yLog));
});
</script>