25:["$","title",null,{"children":"ACTIVIDAD 3.1: VISUALIZACIÓN DINÁMICA II | visualizacion | Observable"}] 49:T96b,scatter_color = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); let o = d3 .scaleLinear() .domain(d3.extent(data, (d) => d.reviews_per_month)) .range([0.5, 1]); let x = d3 .scaleLinear() .domain(d3.extent(data, (d) => d.reviews_per_month)) .range([margin.left, width - margin.right - margin.left]); let w = d3 .scaleLinear() .domain(d3.extent(data, (d) => d.reviews_per_month)) .range([0.5, 8]); let y = d3 .scaleBand() .domain(neighbourhood) .rangeRound([margin.top, height - margin.bottom]) .padding(0.1); let c2 = d3 .scaleOrdinal() .domain(["Entire home/apt", "Private room", "Hotel room", "Shared room"]) .range(["#3040D1", "#D15A5D", "#D1AE30", "#3BD163"]); /* Para generar la transición de color se establece la opacidad a 0 y el blanco como color base . A continuación, se agrega una transición para que modifique el color de manera gradual con un retardo en la aparición de cada rectángulo */ svg .selectAll("rect") .data(data) .join("rect") .attr("x", (d) => x(d.reviews_per_month)) .attr("y", (d) => y(d.neighbourhood_group)) .attr("width", (d) => w(d.reviews_per_month)) .attr("height", y.bandwidth()) .style("opacity", 0) .attr("fill", "white") .transition() .duration(1000) .delay((d, i) => i * 4) .style("opacity", (d) => o(d.reviews_per_month)) .attr("fill", (d) => c2(d.room_type)); svg .append("g") .selectAll("text") .data(price_neighbourhoud) .join("text") .attr("x", 5) .attr("y", (d) => y(d[0])) .attr("dy", 18) .attr("dx", -5) .text((d) => d[0]) .attr("class", "text"); const legend = svg.append("g") .attr("class", "legend") .attr("transform", "translate(" + (width - margin.right - margin.left) + ", 0)"); function drawLegend() { const legendItems = legend.selectAll(".legend-item") .data(c2.domain()) .enter() .append("g") .attr("class", "legend-item") .attr("transform", (d, i) => "translate(0," + (i * 20) + ")"); legendItems.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 15) .attr("height", 15) .attr("fill", c2); legendItems.append("text") .attr("x", 20) .attr("y", 10) .text(d => d); } drawLegend(); return svg.node(); } 4a:T78a,chart2 = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible"); let x = d3 .scaleLinear() .domain(d3.extent(data, (d) => d.availability_365)) .range([margin.left, width - margin.right - margin.left]); let y = d3 .scaleLinear() .domain(d3.extent(data, (d) => d.price)) .nice() .range([height - margin.bottom, margin.top]); let c2 = d3 .scaleOrdinal() .domain(["Entire home/apt", "Private room", "Hotel room", "Shared room"]) .range(["#3040D1", "#D15A5D", "#D1AE30", "#3BD163"]); svg .selectAll("text") .data(data) .join("text") .attr("x", 0) .attr("y", 100) .attr("opacity", 0) .text("Precio por noche en función de la disponibilidad anual") .transition() .delay(5000) .duration(2000) .attr("opacity", 1); svg .selectAll("rect") .data(data) .join("rect") .attr("x", (d) => x(d.availability_365)) .attr("y", 0) .attr("width", 1) .attr("height", 40) .style("fill", (d) => c2(d.room_type)) .transition() .duration(5000) .attr("y", (d) => y(d.price)) .attr("height", 3) .attr("width", 3) .attr("rx", 3) .attr("ry", 3); const legend = svg.append("g") .attr("class", "legend") .attr("transform", "translate(" + (width - margin.right - margin.left) + ", 0)"); function drawLegend() { const legendItems = legend.selectAll(".legend-item") .data(c2.domain()) .enter() .append("g") .attr("class", "legend-item") .attr("transform", (d, i) => "translate(0," + (i * 20) + ")"); legendItems.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 15) .attr("height", 15) .attr("fill", c2); legendItems.append("text") .attr("x", 20) .attr("y", 10) .text(d => d); } drawLegend(); return svg.node(); }4b:Ta30,scatter_y = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); let o = d3 .scaleLinear() .domain(d3.extent(data, (d) => d.reviews_per_month)) .range([0.5, 1]); let x = d3 .scaleLinear() .domain(d3.extent(data, (d) => d.reviews_per_month)) .range([margin.left, width - margin.right - margin.left]); let w = d3 .scaleLinear() .domain(d3.extent(data, (d) => d.reviews_per_month)) .range([0.5, 8]); let y = d3 .scaleBand() .domain(neighbourhood) .rangeRound([margin.top, height - margin.bottom]) .padding(0.1); let c2 = d3 .scaleOrdinal() .domain(["Entire home/apt", "Private room", "Hotel room", "Shared room"]) .range(["#3040D1", "#D15A5D", "#D1AE30", "#3BD163"]); /* Inicialmente se establece que la posición Y de los círculos está en el margen inferior. A continuación se define la transición que cambia la posición en Y gradualmente con una duración que no sea excesiva y con un retardo en la aparición de cada rectángulo que no haga pesada la espera a la carga de los datos. */ svg .selectAll("circle") .data(data) .join("circle") .attr("cx", (d) => x(d.reviews_per_month)) .attr("cy", height - margin.bottom) // Inicialmente establecemos la posición en Y en el margen inferior .attr("r", (d) => w(d.reviews_per_month)) .style("opacity", (d) => o(d.reviews_per_month)) .attr("fill", (d) => c2(d.room_type)) .transition() .duration(800) .delay((d, i) => i * 4) .attr("cy", (d) => y(d.neighbourhood_group) + y.bandwidth() / 2); // Nueva posición en Y según los datos svg .append("g") .selectAll("text") .data(price_neighbourhoud) .join("text") .attr("x", 5) .attr("y", (d) => y(d[0]) + y.bandwidth() / 2) .attr("dy", 0.35 + "em") .attr("dx", -5) .text((d) => d[0]) .attr("class", "text"); const legend = svg.append("g") .attr("class", "legend") .attr("transform", "translate(" + (width - margin.right - margin.left) + ", 0)"); function drawLegend() { const legendItems = legend.selectAll(".legend-item") .data(c2.domain()) .enter() .append("g") .attr("class", "legend-item") .attr("transform", (d, i) => "translate(0," + (i * 20) + ")"); legendItems.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 15) .attr("height", 15) .attr("fill", c2); legendItems.append("text") .attr("x", 20) .attr("y", 10) .text(d => d); } drawLegend(); return svg.node(); } 4c:T5cb,style = html``4d:[] 29:{"id":"87c125e93e20ccb5","slug":null,"title":"ACTIVIDAD 3.1: VISUALIZACIÓN DINÁMICA II","thumbnail":"e3f352113a283a93c381dd7ccd90d954221e110e214db2d86b0c3eed52fcc64b","access_level":"public","create_time":"$D2023-06-21T17:59:11.886Z","update_time":"$D2023-06-27T18:54:17.856Z","view_time":null,"first_public_time":"$D2023-06-27T16:25:32.213Z","has_unpublished_edits":null,"fork":{"id":"ec92858a6c039dfb","slug":null,"title":"ACTIVIDAD 2.1: VISUALIZACIÓN DINÁMICA","owner":{"id":"338702764ce803e8","login":"visualizacion-uem","name":"visualizacion"}},"stars":0,"starred":false,"owner":{"type":"team","id":"338702764ce803e8","login":"visualizacion-uem","name":"visualizacion","avatar_url":"https://avatars-next.observableusercontent.com/e9553444dc9faf31d389a9bf318be6a2a3174b561d470b0594663b85967bcab6","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":855,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"edbeff1be049984c","login":"gmcanete","name":"GERARD M CAÑETE","avatar_url":"https://avatars-next.observableusercontent.com/a97e4db5d9bc1384f1b333b7a9fe1ffdf25a35c1ff394acc5345bb4758991538","tier":null,"bio":"","followed_by_you":false,"follows_you":false},{"type":"individual","id":"3938e120d8371703","login":"ramon-melendez","name":"Ramon Melendez","avatar_url":"https://avatars-next.observableusercontent.com/3007d9e65f213040fde4a37579201ceb322ce72f732e1efdc942bf4706a1288f","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"edbeff1be049984c","login":"gmcanete","name":"GERARD M CAÑETE","avatar_url":"https://avatars-next.observableusercontent.com/a97e4db5d9bc1384f1b333b7a9fe1ffdf25a35c1ff394acc5345bb4758991538","tier":null,"role":"editor"},{"type":"individual","id":"3938e120d8371703","login":"ramon-melendez","name":"Ramon Melendez","avatar_url":"https://avatars-next.observableusercontent.com/3007d9e65f213040fde4a37579201ceb322ce72f732e1efdc942bf4706a1288f","tier":null,"role":"editor"},{"type":"team","id":"338702764ce803e8","login":"visualizacion-uem","name":"visualizacion","avatar_url":"https://avatars-next.observableusercontent.com/e9553444dc9faf31d389a9bf318be6a2a3174b561d470b0594663b85967bcab6","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"ACTIVIDAD 3.1: VISUALIZACIÓN DINÁMICA II","cells":[{"id":0,"value":"# ACTIVIDAD 3.1: VISUALIZACIÓN DINÁMICA II\n## Gráfico de código de barras con animación\n\nGrupo 2 \nMartínez Cañete, Gerard \nMeléndez Sampalo, Ramón \nCerezo San Frutos, Diego \n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"Para esta primera parte se va a continuar a partir de la entrega anterior, en la que se generó un código de barras a partir de la utilización de un dataset de AirBnB, con datos de alojamientos de Sevilla (Marzo 2023)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":739,"value":"## Gráfico con transición de color","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":834,"value":"En este primer apartado se ha modificado el gráfico de barras creado en la tarea anterior de modo que se ha añadido una animación con transición de color.
\nPara conseguir esto, se establece la opacidad a 0 y se escoge el color blanco como base.
A continuación, se agrega una transición para que modifique el color de manera gradual con un retardo en la aparición de cada rectángulo\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":729,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"## Gráfico con transición de la posición Y","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":838,"value":"En este segundo apartado se generado un gráfico utilizando el mismo dataset, pero en este caso se han utilizado las diferentes variables:
\n

Color encoding: Tipo de habitación

Eje X: Disponibilidad anual

Eje Y: Precio por noche

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":793,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"## Gráfico extra con animación (Gráfico de barras \"redondeado\")","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":850,"value":"A modo de prueba se ha hecho una variante del gráfico de barras inicial al que se le ha añadido una animación en el que los datos van apareciendo gradualmente desde el margen inferior hasta su posición final.
\nEste no se propone como parte de la entrega para la tarea porque lo generado sigue siendo un gráfico de barras y no un gráfico de dispersión, sin embargo, como nos ha gustado el resultado, hemos decidido mantenerlo aquí como extra.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":765,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"data = data_raw.filter((d) => (d.price > 5) & (d.price < 1500) & (d.minimum_nights < 30))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data_raw = d3.csv(\n \"https://docs.google.com/spreadsheets/d/e/2PACX-1vT2TBgp7Zw9Wdx2fmymFZTAMzOO2sdbn5cxWD3z-8quHGWnJ4hyD_GhZVrwQCQpA45whxnGPgrIqHBu/pub?gid=471412445&single=true&output=csv\",\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"data_raw","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":117,"value":"neighbourhood = data.map((d) => d.neighbourhood_group).sort()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"price_neighbourhoud = d3\n .rollups(\n data,\n (v) => d3.mean(v, (d) => d.reviews_per_month),\n (d) => d.neighbourhood_group\n )\n .sort()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"extent = d3.extent(data_raw, (d) => d.minimum_nights)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"extent2 = d3.extent(data_raw, (d) => d.price)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"---\n## Appendix ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"d3tip = require(\"d3-tip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"margin = ({ top: 0, right: 0, bottom: 0, left: 170 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null