Average_Price = d3.mean(Brussels, d => d.price)
Min_Max_price = d3.extent(Brussels, d => d.price)
Brussels_clean = Brussels.filter(d => d.price > 60 & d.price < 2000)
d3.extent(Brussels_clean, d => d.price)
d3.extent(Brussels_clean, d => d.minimum_nights)
barcode = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("overflow", "visible");
let o2 = d3
.scaleLinear()
.domain(d3.extent(Brussels_clean, (d) => d.price))
.range([0.4, 1]);
let y = d3
.scaleBand()
.domain(room)
.rangeRound([margin.top, height - margin.bottom])
.padding(0.08);
let color_tran = d3
.scaleLinear()
.domain(d3.extent(Brussels_clean, (d) => d.price)).nice()
.range(["#06d6a0", "#9EF211"]);
svg
.selectAll("rect")
.data(Brussels_clean)
.join("rect")
.attr("x", (d) => x(d.price))
.attr("y", (d) => y(d.room_type))
.attr("width", 1)
.attr("height", y.bandwidth())
.attr("fill", (d) => c2(d.room_type))
.attr("opacity", (d) => o2(d.price))
.transition()
.duration(10000)
.style("fill", (d) => color_tran(d.price));
svg
.append("g")
.selectAll("text")
.data(price_room)
.join("text")
.attr("x", 0)
.attr("y", (d) => y(d[0]))
.attr("dy", 18)
.attr("dx", 5)
.text((d) => d[0])
.attr("class", "text");
return svg.node();
}
chart_1 = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("overflow", "visible");
// SCALE
const x_scatter = d3
.scaleLinear()
.domain(d3.extent(Brussels_clean, (d) => d.price))
.range([margin.left, width - margin.right - margin.left]);
const y_scatter = d3
.scaleLinear()
.domain(d3.extent(Brussels_clean, (d) => d.number_of_reviews))
.range([height - margin.bottom, margin.top]);
const r_scatter = d3
.scaleSqrt()
.domain(d3.extent(Brussels_clean, (d) => d.reviews_per_month))
.range([1, 10]);
// AXIS
const x_axis_scatter = g => g
.attr("transform", `translate(0,${20})`)
.call(d3.axisTop(x_scatter));
const y_axis_scatter = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y_scatter));
svg.append("g")
.call(x_axis_scatter);
svg.append("g")
.call(y_axis_scatter)
let circles = svg
.selectAll("circle")
.data(Brussels_clean)
.join("circle")
.attr("cx", (d) => x_scatter(d.price))
.attr("cy", (d) => y_scatter(d.number_of_reviews))
.attr("r", 0) // Comenzamos con un radio de 0
.attr("fill", (d) => c2(d.room_type));
// Añadimos transiciones para que los círculos "aparezcan"
circles.transition()
.duration(2000)
.attr("r", (d) => r_scatter(d.reviews_per_month));
// legend
const legend = svg.append("g")
.attr("transform", `translate(${width-margin.left}, ${margin.top+50})`);
const legendItems = legend.selectAll("g")
.data(c2.domain())
.join("g")
.attr("transform", (d, i) => `translate(0, ${i * 20})`);
legendItems.append("rect")
.attr("width", 15)
.attr("height", 15)
.attr("fill", c2);
legendItems.append("text")
.attr("x", 20)
.attr("y", 10)
.text((d) => d);
return svg.node();
}
dataset = d3.csv("https://docs.google.com/spreadsheets/d/e/2PACX-1vQ8e9BXRIykuGnuMYSIEBuEobzZmjNXJgO2YRpq6Qi8MnSJWkebGAg37gVMzcwmU0MCM9GRZkJ9O6wU/pub?output=csv", (d => {
const { country, continent, ...rest} = d
return {
country: country,
continent: continent,
values: Object.values(rest).map(Number),
}
}))
data_life = ({ series: dataset, dates: dataset.columns.slice(2).map(Number) })
margin_2 = ({top: 30, right: 140, bottom: 30, left: 30})
height_2 = 450
x_scale = d3.scaleLinear()
.domain(d3.extent(data_life.dates))
.range([margin_2.left, width - margin_2.right])
y_scale = d3.scaleLinear()
.domain([0, 100])
.range([height_2 - margin_2.bottom, margin_2.top])
line = d3.line()
.curve(d3.curveBasis)
.defined(d => d > 0)
.x((d,i) => x_scale(data_life.dates[i]))
.y(d => y_scale(d));
function hover(svg, path) {
svg
.on("mousemove", moved)
.on("mouseenter", entered)
.on("mouseleave", left);
const dot = svg.append("g")
.attr("display", "none");
dot.append("text")
.attr("font-size", 12)
.attr("text-anchor", "start")
.attr("y", 0);
function moved(event) {
event.preventDefault();
const pointer = d3.pointer(event, this);
const xm = x_scale.invert(pointer[0]);
const ym = y_scale.invert(pointer[1]);
const i = d3.bisectCenter(data_life.dates, xm);
const s = d3.least(data_life.series, d => Math.abs(d.values[i] - ym));
path.attr("stroke", d => d === s ? "#022859" : "##0000FF")
.attr("stroke-opacity", d => d === s ? 1 : 0.4)
.attr("stroke-width", d => d === s ? 1.4 : 0.3)
.filter(d => d === s)
.raise();
dot.attr("transform", `translate(${width - margin_2.right +5},${y_scale(s.values[300])})`);
dot.select("text")
.html(`\ ${s.country + " |"} \ ${s.values[i]} \ `);
}
function entered() {
path.style("mix-blend-mode", null)
.attr("stroke", "#0000FF");
dot.attr("display", null);
}
function left() {
path.style("mix-blend-mode", "normal")
.attr("stroke", "##0000FF")
.attr("stroke-opacity", 0.3)
.attr("stroke-width", 0.6);
dot.attr("display", "none");
}
}
x_axis = g => g
.attr("transform", `translate(0,${height_2 - margin_2.bottom - 10})`)
.attr("class","x-axis")
.call(d3.axisBottom(x_scale))
y_axis = g => g
.attr("transform", `translate(${margin_2.left-20},0)`)
.attr("class","y-axis")
.call(d3.axisLeft(y_scale))
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height_2])
.style("overflow", "visible");
const path = svg.append("g")
.attr("fill", "none")
.attr("stroke", "#0000FF")
.attr("stroke-width", 0.6)
.attr("stroke-opacity", 0.3)
.selectAll("path")
.data(data_life.series)
.join("path")
.style("mix-blend-mode", "normal")
.attr("d", d => line(d.values));
svg.append("g")
.call(y_axis);
svg.append("g")
.call(x_axis);
svg.call(hover, path);
return svg.node();
}
chart676 = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height_2])
.style("overflow", "visible");
const tooltip = d3.select("body").append("div")
.style("position", "absolute")
.style("visibility", "hidden")
.style("background", "white")
.style("border", "solid")
.style("border-width", "1px")
.style("border-radius", "5px")
.style("padding", "10px");
const path = svg.append("g")
.attr("fill", "none")
.attr("stroke", "#0000FF")
.attr("stroke-width", 0.6)
.attr("stroke-opacity", 0.3)
.selectAll("path")
.data(data_life.series)
.join("path")
.style("mix-blend-mode", "normal")
.attr("d", d => line(d.values))
.on("mouseover", function(event, d) {
tooltip.style("visibility", "visible")
.text(`País: ${d.country}`);
d3.select(this).raise(); // Mueve la línea seleccionada al frente
d3.selectAll('path') // Selecciona todas las líneas
.transition()
.duration(200)
.style("opacity", 0.1); // Oscurece todas las líneas
d3.select(this)
.transition()
.duration(200)
.style("opacity", 1) // Hace la línea seleccionada completamente opaca
.attr("stroke-width", 2); // Aumenta el ancho de la línea seleccionada
})
.on("mousemove", function(event) {
tooltip.style("top", (event.pageY-10)+"px")
.style("left",(event.pageX+10)+"px");
})
.on("mouseout", function() {
tooltip.style("visibility", "hidden");
d3.selectAll('path')
.transition()
.duration(200)
.style("opacity", 0.3) // Vuelve todas las líneas a su opacidad normal
.attr("stroke-width", 0.6); // Vuelve todas las líneas a su ancho normal
});
svg.append("g")
.call(y_axis);
svg.append("g")
.call(x_axis);
svg.call(hover, path);
return svg.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
