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

primera version practica moder visualization

parent e21cce54
.rectwarning {
fill: rgb(255, 120, 120);
}
#mapid {
width: 800px;
height: 400px;
}
\ No newline at end of file
<!DOCTYPE html>
<head>
<title>D3</title>
<link rel="stylesheet" href="main.css">
<!--Importamos los estilos CSS asociados a Leaflet-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css">
<!--Importamos Leaflet -->
<script src='https://unpkg.com/leaflet@1.4.0/dist/leaflet-src.js'></script>
<!--Importamos D3.js -->
<script src="https://d3js.org/d3.v5.min.js"></script>
</link>
</head>
<body>
<div></div>
<div id="mapid"></div>
<script src="prueba.js">
</script>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
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
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
d3.json('practica_airbnb.json')
.then((featureCollection) => {
console.log(featureCollection.features)
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 height_barchar = 500;
var width_barchar = 500;
var marginbottom = 100;
var margintop = 50;
var svgBarchart = d3.select('div')
.append('svg')
.attr('width', width_barchar)
.attr('height', height_barchar + marginbottom + margintop)
.append("g")
.attr("transform", "translate( 0," + margintop + ")")
.style('visibility','hidden');
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,i) {
d3.selectAll('path').attr('opacity',0.5);
d3.select(this).attr('stroke','black').attr('stroke-width',3).attr('opacity',1)
// 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){
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