Commit 8919c4a7 authored by Jorge Sola Asensio's avatar Jorge Sola Asensio

Version pro

parent e69a9611
# Practica moder visualization and exploration d3
# Práctica moder visualization and exploration d3
Explicación breve del desarrollo de la práctica.
Como se pedía en el enunciado, he dado visualización a número de propiedades que hay en función del número de camas.
En este caso, he creado una gráfica de barras verticales que indican en la parte superior de la cada barra el número de propiedades, mientras que en el eje x aparecen el rango de número de camas.
Por otro lado, he creado un mapa donde aparecen las distintas barrios de Madrid.
Al poner el cursor encima de una barrio, aparece la información principal de ese barrio, el nombre y el precio medio.
Si se hace click encima de un barrio, este queda destacado visualmente y a su vez, la gráfica de barras verticales se adapata a la información perteneciente a ese determinado barrio.
......@@ -25,6 +25,7 @@ var tooltip = d3.select("div").append("div")
function drawMap(featureCollection) {
console.log(featureCollection)
console.log(featureCollection.features)
var width = 700;
var height = 700;
......@@ -42,6 +43,31 @@ function drawMap(featureCollection) {
var data = featureCollection.features[0].properties.avgbedrooms
var mainData = featureCollection.features
var lenData = mainData.length
var priceInformation = featureCollection.features
var avgprice_list = []
for (i = 0; i < lenData; i++ ){
avgprice_list.push(priceInformation[i].properties.avgprice)
};
avgprice_list.forEach(function(item, i) { if (item === undefined) avgprice_list[i] = 1});
for(i=0; i< avgprice_list.length; i++){
console.log(avgprice_list[i])
if(avgprice_list[i] === undefined){
console.log(true)
}
};
var avgprice = avgprice_list.sort(function(a, b){return b-a});
console.log(data)
var xscale = d3.scaleBand()
.domain(data.map(function(d) {
......@@ -139,8 +165,19 @@ function drawMap(featureCollection) {
var pathProjection = d3.geoPath().projection(projection);
//console.log(pathProjection(featureCollection.features[0]))
var features = featureCollection.features;
var scaleColor = d3.scaleOrdinal(d3.schemeTableau10);
var nblegend = 10;
var widthRect = (width / nblegend) - 2;
var heightRect = 10;
var colors = ['#4e79a7', '#f28e2c', '#e15759', '#76b7b2', '#59a14f', '#edc949', '#af7aa1', '#ff9da7', '#9c755f', '#bab0ab']
var quantizeScale = d3.scaleQuantize()
.domain([0,280])
.range(colors);
var linearScale = d3.scaleLinear()
.domain([0, nblegend])
.range([0, width]);
var createdPath = svgMap.selectAll('path')
.data(features)
......@@ -150,44 +187,47 @@ function drawMap(featureCollection) {
.attr("opacity", function(d, i) {
d.opacity = 1
return d.opacity
});
})
.attr('stroke','black').attr('stroke-width',0.25)
.attr("transform", "translate(0," + 30 + ")")
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
features.map(function(d){
console.log(d.properties.name)
console.log(d.properties.avgprice)
})
createdPath.attr('fill', (d) => quantizeScale(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_range = []
for(i=0; i < colors.length; i++){
legend_range.push(`${i*(280/nblegend)}-${(i+1)*(280/nblegend)}€`)
}
console.log(legend_range)
var legend = svgMap.append("g")
.selectAll("rect")
.data(d3.schemeTableau10)
.data(colors)
.enter()
.append("rect")
.attr("width", widthRect)
.attr("height", heightRect)
.attr("x", (d, i) => scaleLegend(i)) // o (i * (widthRect + 2)) //No haria falta scaleLegend
.attr('x', (d,i) => linearScale(i))
.attr('width', widthRect)
.attr('height', heightRect)
.attr("fill", (d) => d);
var text_legend = svgMap.append("g")
.selectAll("text")
.data(d3.schemeTableau10)
.data(legend_range)
.enter()
.append("text")
.attr("x", (d, i) => scaleLegend(i)) // o (i * (widthRect + 2))
.attr("x", (d, i) => linearScale(i)+12) // o (i * (widthRect + 2))
.attr("y", heightRect * 2.5)
.text((d) => d)
.attr("font-size", 12)
.attr("font-size", 12);
//Captura de eventos Click
function handleClick(d,i) {
......@@ -237,7 +277,7 @@ function drawMap(featureCollection) {
function handleOut(d){
d3.select(this).attr('opacity', 1)
d3.selectAll('path').attr('opacity',1).attr('stroke','white').attr('stroke-width',0);
d3.selectAll('path').attr('opacity',1).attr('stroke','black').attr('stroke-width',0.25);
console.log(d.properties.name)
}
......
......@@ -14895,7 +14895,8 @@
"name": "El Pardo",
"cartodb_id": 44,
"avgbedrooms": [],
"properties": []
"properties": [],
"avgprice": 1
},
"geometry": {
"type": "MultiPolygon",
......@@ -34095,7 +34096,8 @@
"name": "El Goloso",
"cartodb_id": 51,
"avgbedrooms": [],
"properties": []
"properties": [],
"avgprice": 1
},
"geometry": {
"type": "MultiPolygon",
......@@ -41285,7 +41287,8 @@
"name": "Valdemarín",
"cartodb_id": 56,
"avgbedrooms": [],
"properties": []
"properties": [],
"avgprice": 1
},
"geometry": {
"type": "MultiPolygon",
......@@ -55812,7 +55815,8 @@
"name": "Horcajo",
"cartodb_id": 87,
"avgbedrooms": [],
"properties": []
"properties": [],
"avgprice": 1
},
"geometry": {
"type": "MultiPolygon",
......@@ -59957,7 +59961,8 @@
"name": "Atalaya",
"cartodb_id": 99,
"avgbedrooms": [],
"properties": []
"properties": [],
"avgprice": 1
},
"geometry": {
"type": "MultiPolygon",
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