var margin = {top: 20, right: 10, bottom: 100, left: 40};
var width = 700 - margin.right - margin.left;
var height = 500 - margin.top - margin.bottom;
// o g para agrupar objetos juntos, agrupar as barras
var svg = d3.select('body')
.append('svg')
.attr({"width" : width + margin.right + margin.left,
"height" : height + margin.top + margin.bottom
})
.append("g")
.attr("transform", "translate(" + margin.left +"," + margin.right + ")");
//definição do eixo xx e yy
var x_scale = d3.scale.ordinal()
.rangeRoundBands([0, width], 0.2, 0.2);
var y_scale = d3.scale.linear()
//.range([height, 0]);
.range([height, 8]);
//axis
var x_axis = d3.svg.axis()
.scale(x_scale)
.orient("bottom");
var y_axis = d3.svg.axis()
.scale(y_scale)
.orient("left");
//ficheiro csv dos distritos
d3.csv("melhoresLisboa.csv", function(error, data){
if(error) console.log("Erro no ficheiro csv");
data.forEach(function(d){
d.media = +d.media;
d.escola = d.escola;
console.log(d.media);
});
//"gerir" os eixos, o dominio e contradominio
x_scale.domain(data.map(function(d){return d.escola;}));
y_scale.domain([0, d3.max(data, function(d){ return d.media;})]);
//grafico (representação dos valores)
svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr("height", 0)
.attr("y", height)
.transition().duration(3000)
.delay(function(d,i) {return i * 200;})
.attr({
'x': function(d){ return x_scale(d.escola);},
'y': function(d){ return y_scale(d.media);},
"width": x_scale.rangeBand(),
"height": function(d) { return height - y_scale(d.media);}
})
//para termos um gradiente de cor
.style("fill", function(d,i) { return 'rgb(20, 20, ' + ((i*30) + 100) + ')'});
//apresenta em cada bar a media para cada distrito, de forma que seja mais fácil entender
svg.selectAll('text')
.data(data)
.enter()
.append('text')
.text(function(d) { return d.media;})
.attr('x', function(d) { return x_scale(d.escola) + x_scale.rangeBand()/2; })
.attr('y', function(d) { return y_scale(d.media) + 12; })
.style("fill", "white")
.style("text-anchor", "middle")
.style("font-size", "12px");
//desenhar os eixos (axis x e y)
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(x_axis)
//colocar o nome do distrito numa posição mais favoravel
.selectAll('text')
.attr("transform", "rotate(-60)")
.attr("dx", "-.8em")
.attr("dy", ".25em")
.style("text-anchor", "end")
.style("font-size", "14px");
svg.append("g")
.attr("class", "y axis")
.call(y_axis)
.style("font-size", "14px");
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
/* The navigation menu links */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 11px;
color: #818181;
display: inline;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}
svg{
/*background-color: rgb(160, 204, 189); */
margin-left: auto;
margin-right: auto;
display: block;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
h1 {
color: #069;
}
<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<ul>
<li><a href="index.html">Ranking das escolas de Portugal: </a></li>
<li><a href="mapa.html">Mapa de Portugal</a></li>
<li><a href="barras.html">Gráfico de Barras</a></li>
</ul>
<!-- Side navigation -->
<div class="sidenav">
<a href="barrasPorto.html">Porto</a>
<a href="barrasCoimbra.html">Coimbra</a>
<a href="barrasLisboa.html">Lisboa</a>
<a href="barrasBraga.html">Braga</a>
<a href="barrasSetubal.html">Setúbal</a>
<a href="barrasVilaReal.html">Vila Real</a>
<a href="barrasAveiro.html">Aveiro</a>
<a href="barrasSantarem.html">Santarém</a>
<a href="barrasLeiria.html">Leiria</a>
<a href="barrasFaro.html">Faro</a>
<a href="barrasViseu.html">Viseu</a>
<a href="barrasBeja.html">Beja</a>
<a href="barrasCasteloBranco.html">Castelo Branco</a>
<a href="barrasVianaCastelo.html">Viana do Castelo</a>
<a href="barrasGuarda.html">Guarda</a>
<a href="barrasEvora.html">Évora</a>
<a href="barrasAcores.html">Açores</a>
<a href="barrasBraganca.html">Bragança</a>
<a href="barrasMadeira.html">R.A. Madeira</a>
<a href="barrasPortalegre.html">Portalegre</a>
</div>
<body><br><br>
<h1 style="text-align: center">Visão geral da média mais alta dos distritos</h1>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
</script>
</body>
</html>
I have this code that should go to the file below indicated the school and the average. Better fileLisboa:
escola;tipo;concelho;media;
Colégio do Sagrado Coração de Maria;Particular e Cooperativo;Lisboa;14,2;
Escola Técnica e Liceal Salesiana Santo António, Estoril;Particular e Cooperativo;Cascais;14,0;
Colégio São João de Brito;Particular e Cooperativo;Lisboa;14,0;
Colégio Moderno;Particular e Cooperativo;Lisboa;13,7;
Colégio Valsassina;Particular e Cooperativo;Lisboa;13,7;
But you are not going to get those values. What's wrong?