Commit cad63b36 authored by Jorge Sola Asensio's avatar Jorge Sola Asensio

segunda version de la practica de moder visualization

parent a372b74a
......@@ -19,7 +19,7 @@
<div></div>
<div id="mapid"></div>
<script src="prueba.js">
<script src="prueba_2.js">
</script>
</body>
......
......@@ -37,8 +37,68 @@ function drawMap(featureCollection) {
.attr('width', width_barchar)
.attr('height', height_barchar + marginbottom + margintop)
.append("g")
.attr("transform", "translate( 0," + margintop + ")")
.style('visibility','hidden');
.attr("transform", "translate( 0," + margintop + ")");
var data = featureCollection.features[0].properties.avgbedrooms
console.log(data)
var xscale = d3.scaleBand()
.domain(data.map(function(d) {
return d.bedrooms;
}))
.range([0, width_barchar])
.padding(0.1);
var yscale = d3.scaleLinear()
.domain([0, d3.max(data, function(d) {
return d.total;
})])
.range([height_barchar, 0]);
var xaxis = d3.axisBottom(xscale);
//Creacion de los rectangulos
var rect = svgBarchart.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr("fill", "#93CAAE");
rect.attr('class', (d) => {
if (d.value > 10) {
return 'rectwarning';
}
});
rect
.attr("x", function(d) {
console.log(d)
return xscale(d.bedrooms);
})
.attr('y', d => {
return yscale(d.total)
})
.attr("width", xscale.bandwidth())
.attr("height", function(d) {
return height_barchar - yscale(d.total); //Altura real de cada rectangulo.
});
//Añadimos el texto correspondiente a cada rectangulo.
var text = svgBarchart.selectAll('text')
.data(data)
.enter()
.append('text')
.text(d => d.total)
.attr("x", function(d) {
return xscale(d.bedrooms) + xscale.bandwidth() / 2;
})
.attr('y', d => {
return yscale(d.total)
});
svgBarchart.append("g")
.attr("transform", "translate(0," + height_barchar + ")")
.call(xaxis)
var svg = d3.select('div')
......@@ -120,71 +180,15 @@ function drawMap(featureCollection) {
function handleClick(d,i) {
d3.selectAll('path').attr('opacity',0.5);
d3.select(this).attr('stroke','black').attr('stroke-width',3).attr('opacity',1)
rect.attr('y', d => {
console.log(d)
return yscale(d.total)
})
.attr("height", function(d) {
return height_barchar - yscale(d.total); //Altura real de cada rectangulo.
});
// Creación de los barcharts.
var data = d.properties.avgbedrooms
console.log(data)
var xscale = d3.scaleBand()
.domain(data.map(function(d) {
return d.bedrooms;
}))
.range([0, width_barchar])
.padding(0.1);
var yscale = d3.scaleLinear()
.domain([0, d3.max(data, function(d) {
return d.total;
})])
.range([height_barchar, 0]);
var xaxis = d3.axisBottom(xscale);
//Creacion de los rectangulos
var rect = svgBarchart
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr("fill", "#93CAAE");
rect.attr('class', (d) => {
if (d.value > 10) {
return 'rectwarning';
}
});
rect
.attr("x", function(d) {
console.log(d)
return xscale(d.bedrooms);
})
.attr('y', d => {
return yscale(d.total)
})
.attr("width", xscale.bandwidth())
.attr("height", function(d) {
return height_barchar - yscale(d.total); //Altura real de cada rectangulo.
});
//Añadimos el texto correspondiente a cada rectangulo.
var text = svgBarchart.selectAll('text')
.data(data)
.enter()
.append('text')
.text(d => d.total)
.attr("x", function(d) {
return xscale(d.bedrooms) + xscale.bandwidth() / 2;
})
.attr('y', d => {
return yscale(d.total)
});
svg.append("g")
.attr("transform", "translate(0," + height_barchar + ")")
.call(xaxis)
.attr('visibility','visible');
};
function handleOver(d){
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment