Skip to content

GitLab

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

primera version practica moder visualization

parent e21cce54
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 81442 additions and 0 deletions
main.css 0 → 100644
View file @ a372b74a
.rectwarning {
fill: rgb(255, 120, 120);
}
#mapid {
width: 800px;
height: 400px;
}
\ No newline at end of file
main.html 0 → 100644
View file @ a372b74a
<!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
practica_airbnb.json 0 → 100644
View file @ a372b74a
This diff is collapsed.
prueba.js 0 → 100644
View file @ a372b74a
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
prueba_2.js 0 → 100644
View file @ a372b74a
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
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