Skip to content

GitLab

P
Practica moder visualization and exploration d3
Commit e69a9611 authored by Jorge Sola Asensio's avatar Jorge Sola Asensio
Browse files
Options

Ultima version desarrollo

parent cad63b36
Hide whitespace changes
Inline Side-by-side
Showing with 52 additions and 146 deletions
main.html
View file @ e69a9611
......@@ -2,6 +2,7 @@
<head>
<title>D3</title>
<h1>Practice of visualization and exploration with d3</h1>
<link rel="stylesheet" href="main.css">
<!--Importamos los estilos CSS asociados a Leaflet-->
......@@ -19,7 +20,7 @@
<div></div>
<div id="mapid"></div>
<script src="prueba_2.js">
<script src="practica.js">
</script>
</body>
......
prueba_2.js → practica.js
View file @ e69a9611
......@@ -21,14 +21,15 @@ var tooltip = d3.select("div").append("div")
.style("border-width", "1px")
.style("border-radius", "5px");
function drawMap(featureCollection) {
console.log(featureCollection)
console.log(featureCollection.features)
var width = 800;
var height = 800;
var width = 700;
var height = 700;
var height_barchar = 500;
var width_barchar = 500;
var height_barchar = 700;
var width_barchar = 700;
var marginbottom = 100;
var margintop = 50;
......@@ -38,6 +39,7 @@ function drawMap(featureCollection) {
.attr('height', height_barchar + marginbottom + margintop)
.append("g")
.attr("transform", "translate( 0," + margintop + ")");
var data = featureCollection.features[0].properties.avgbedrooms
console.log(data)
......@@ -79,8 +81,10 @@ function drawMap(featureCollection) {
})
.attr("width", xscale.bandwidth())
.attr("height", function(d) {
return height_barchar - yscale(d.total); //Altura real de cada rectangulo.
});
return height_barchar - yscale(d.total);//Altura real de cada rectangulo.
})
.on('mouseover',handleOverBarchart)
.on('mouseout',handleOutBarchar);
//Añadimos el texto correspondiente a cada rectangulo.
......@@ -93,20 +97,28 @@ function drawMap(featureCollection) {
return xscale(d.bedrooms) + xscale.bandwidth() / 2;
})
.attr('y', d => {
return yscale(d.total)
return yscale(d.total + 10)
});
svgBarchart.append("text")
.attr("transform",
"translate(" + (width_barchar / 2) + " ," +
(height_barchar + 60) + ")")
.style("text-anchor", "middle")
.style("font-size",20)
.text("Número de habitaciones");
svgBarchart.append("g")
.attr("transform", "translate(0," + height_barchar + ")")
.call(xaxis)
var svg = d3.select('div')
var svgMap = d3.select('div')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g');
.append('g')
var center = d3.geoCentroid(featureCollection); //Encontrar la coordenada central del mapa (de la featureCollection)
//var center_area = d3.geoCentroid(featureCollection.feature[0]); //Encontrar la coordenada central de un area. (de un feature)
......@@ -130,7 +142,7 @@ function drawMap(featureCollection) {
var scaleColor = d3.scaleOrdinal(d3.schemeTableau10);
var createdPath = svg.selectAll('path')
var createdPath = svgMap.selectAll('path')
.data(features)
.enter()
.append('path')
......@@ -156,7 +168,7 @@ function drawMap(featureCollection) {
.range([0, width]);
var legend = svg.append("g")
var legend = svgMap.append("g")
.selectAll("rect")
.data(d3.schemeTableau10)
.enter()
......@@ -166,13 +178,14 @@ function drawMap(featureCollection) {
.attr("x", (d, i) => scaleLegend(i)) // o (i * (widthRect + 2)) //No haria falta scaleLegend
.attr("fill", (d) => d);
var text_legend = svg.append("g")
var text_legend = svgMap.append("g")
.selectAll("text")
.data(d3.schemeTableau10)
.enter()
.append("text")
.attr("x", (d, i) => scaleLegend(i)) // o (i * (widthRect + 2))
.attr("y", heightRect * 2.5)
.text((d) => d)
.attr("font-size", 12)
......@@ -180,14 +193,23 @@ 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)
console.log('HOLA')
var data_click = d.properties.avgbedrooms
var yscale = d3.scaleLinear()
.domain([0, d3.max(data_click, function(d) {
return d.total;
})])
.range([height_barchar, 0]);
rect.data(data_click).attr('y', d => {
return yscale(d.total)
})
.attr("height", function(d) {
return height_barchar - yscale(d.total); //Altura real de cada rectangulo.
});
text.data(data_click).text(d => d.total).attr('y', d => {return yscale(d.total) - 10
});
};
......@@ -202,11 +224,22 @@ function drawMap(featureCollection) {
.style("top", (d3.event.pageY - 30) + "px")
.text(`Neighborhood: ${d.properties.name},
Price: ${d.properties.avgprice} Eur`)
};
function handleOverBarchart(d){
d3.select(this).attr('fill','#FEFA04')
};
function handleOutBarchar(d){
d3.select(this).attr("fill", "#93CAAE")
};
function handleOut(d){
d3.select(this).attr('opacity', 1)
d3.selectAll('path').attr('opacity',1).attr('stroke','white').attr('stroke-width',0);
console.log(d.properties.name);
console.log(d.properties.name)
}
};
......
prueba.js deleted 100644 → 0
View file @ cad63b36
d3.json('practica_airbnb.json')
.then((featureCollection) => {
drawMap(featureCollection);
});
var tooltip = d3.select("div").append("div")
.attr("class", "tooltip")
.style("position", "absolute") //Para obtener la posicion correcta sobre los circulos
.style("pointer-events", "none") //Para evitar el flicker
//.style("opacity", 0)
.style("visibility", "hidden")
.style("background-color", "white")
.style("border", "solid")
.style("border-width", "1px")
.style("border-radius", "5px");
function drawMap(featureCollection) {
console.log(featureCollection)
console.log(featureCollection.features)
var width = 800;
var height = 800;
var svg = d3.select('div')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g');
var center = d3.geoCentroid(featureCollection); //Encontrar la coordenada central del mapa (de la featureCollection)
//var center_area = d3.geoCentroid(featureCollection.feature[0]); //Encontrar la coordenada central de un area. (de un feature)
console.log(center)
//Para transformar geo coordinates[long,lat] en X,Y coordinates.
var projection = d3.geoMercator()
.fitSize([width, height], featureCollection) // equivalente a .fitExtent([[0, 0], [width, height]], featureCollection)
//.scale(1000)
//Si quiero centrar el mapa en otro centro que no sea el devuelto por fitSize.
//.center(center) //centrar el mapa en una long,lat determinada
//.translate([width / 2, height / 2]) //centrar el mapa en una posicion x,y determinada
console.log(projection)
//Para crear paths a partir de una proyección
var pathProjection = d3.geoPath().projection(projection);
//console.log(pathProjection(featureCollection.features[0]))
var features = featureCollection.features;
var scaleColor = d3.scaleOrdinal(d3.schemeTableau10);
var createdPath = svg.selectAll('path')
.data(features)
.enter()
.append('path')
.attr('d', (d) => pathProjection(d))
.attr("opacity", function(d, i) {
d.opacity = 1
return d.opacity
});
createdPath.on('mouseover',handleOver)
createdPath.on('mouseout',handleOut)
createdPath.on('click', handleClick)
//Asignamos un color a cada path a traves de nuestra escala de colores
createdPath.attr('fill', (d) => scaleColor(d.properties.avgprice)); //Cambiar d.properties.name por d.properties.avgprice
//Creacion de una leyenda
var nblegend = 10;
var widthRect = (width / nblegend) - 2;
var heightRect = 10;
var scaleLegend = d3.scaleLinear()
.domain([0, nblegend])
.range([0, width]);
var legend = svg.append("g")
.selectAll("rect")
.data(d3.schemeTableau10)
.enter()
.append("rect")
.attr("width", widthRect)
.attr("height", heightRect)
.attr("x", (d, i) => scaleLegend(i)) // o (i * (widthRect + 2)) //No haria falta scaleLegend
.attr("fill", (d) => d);
var text_legend = svg.append("g")
.selectAll("text")
.data(d3.schemeTableau10)
.enter()
.append("text")
.attr("x", (d, i) => scaleLegend(i)) // o (i * (widthRect + 2))
.attr("y", heightRect * 2.5)
.text((d) => d)
.attr("font-size", 12)
//Captura de eventos Click
function handleClick(d) {
d3.selectAll('path').attr('opacity',0.5);
d3.select(this).attr('stroke','black').attr('stroke-width',3).attr('opacity',1);
};
function handleOver(d){
d3.select(this).attr('opacity', 0.5)
tooltip.transition()
.duration(200)
.style("visibility", "visible")
// .style("opacity", .9)
.style("left", (d3.event.pageX + 20) + "px")
.style("top", (d3.event.pageY - 30) + "px")
.text(`Neighborhood: ${d.properties.name},
Price: ${d.properties.avgprice} Eur`)
};
function handleOut(d){
d3.select(this).attr('opacity', 1)
d3.selectAll('path').attr('opacity',1).attr('stroke','white').attr('stroke-width',0);
console.log(d.properties.name);
}
};
// Dato curioso: Si quisiesemos unir dos archivos Geojson
// npm install -g topojson (Primero instalar node.js) => solo para uniones
// topojson spain.json canarias.json -o full_spain.json
\ No newline at end of file
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