Public
Edited
Jun 6, 2023
Insert cell
Insert cell
Insert cell
data_raw = d3.csv(
"https://docs.google.com/spreadsheets/d/e/2PACX-1vTx5D7KkDnhGMGdJSp4d83AY7bJ-UfYu-mAxKXtnRDVnxsXQLhGjmRmhSOrEH1ZPu-AJz-fxiTGlP4F/pub?gid=269443395&single=true&output=csv")

Insert cell
Insert cell
Barcelona = d3.csv(
"https://docs.google.com/spreadsheets/d/e/2PACX-1vTx5D7KkDnhGMGdJSp4d83AY7bJ-UfYu-mAxKXtnRDVnxsXQLhGjmRmhSOrEH1ZPu-AJz-fxiTGlP4F/pub?gid=269443395&single=true&output=csv",
d3.autoType
)
Insert cell
Insert cell
Insert cell
barcode = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, 200])

svg
.selectAll("rect")
.data(Barcelona)
.join("rect")
.attr("x", (d) => d.price)
.attr("y", (d) => d.number_of_reviews)
.attr("width", 0.3)
.attr("height", 200);

return svg.node();
}
Insert cell
scatter = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, 400])
.style("overflow", "visible");

svg
.selectAll("circle")
.data(Barcelona)
.join("circle")
.attr("cx", (d) => d.price)
.attr("cy", (d) => d.number_of_reviews * 0.5)
.attr("r", 1.5);

return svg.node();
}
Insert cell
extent = d3.extent(Barcelona, d => (d.price))
Insert cell
data_filtrado = d3.filter(Barcelona, d => (d.price>0) & (d.price<5000))
Insert cell
extent_nights= d3.extent(Barcelona, d => (d.minimum_nights))
Insert cell
data_filtrado_2 = d3.filter(Barcelona, d => (d.minimum_nights>0) & (d.minimum_nights<180))
Insert cell
x = d3
.scaleLinear()
.domain(d3.extent(data_filtrado, (d) => d.price))
.range([0, 1000])
Insert cell
x(1000)
Insert cell
extent_3 = d3.extent(Barcelona, d => (d.number_of_reviews))
Insert cell
y = d3
.scaleLinear()
.domain(d3.extent(data_filtrado, (d) => d.number_of_reviews))
.range([0, 1000])
Insert cell
y(1000)
Insert cell
barcode_scaled = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, 200])

svg
.selectAll("rect")
.data(Barcelona)
.join("rect")
.attr("x", (d) => x(d.price))
.attr("y", (d) => y(d.number_of_reviews))
.attr("width", 1)
.attr("height", 200);

return svg.node();
}
Insert cell
c = d3
.scaleLinear()
.domain(d3.extent(data_filtrado, (d) => d.price))
.range(["#06d6a0", "#f20666"])
Insert cell
barcode2 = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, 200]);

svg
.selectAll("rect")
.data(Barcelona)
.join("rect")
.attr("x", (d) => x(d.price))
.attr("y", (d) => y(d.number_of_reviews))
.attr("width", 1)
.attr("height", 200)
.attr("fill", (d) => c(d.price));

return svg.node();
}
Insert cell
scatter_scaled_coloured = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, 400]);

svg
.selectAll("circle")
.data(Barcelona)
.join("circle")
.attr("cx", (d) => x(d.price))
.attr("cy", (d) => y(d.number_of_reviews))
.attr("r", 1.5)
.attr("fill", (d) => c(d.price));

return svg.node();
}
Insert cell
xAxis = (g) =>
g
.attr("class", "x-axis")
.attr("transform", `translate(0, ${Barcelona.top})`)
.call(d3.axisTop().scale(x))
Insert cell
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, 200]);

// Añadir ejes
const xAxis = d3.axisBottom(x);
const yAxis = d3.axisLeft(y);

svg.append("g")
.attr("transform", `translate(0, ${height})`)
.call(xAxis);

svg.append("g")
.call(yAxis);

svg
.selectAll("rect")
.data(Barcelona)
.join("rect")
.attr("x", (d) => x(d.price))
.attr("y", (d) => y(d.number_of_reviews))
.attr("width", 1)
.attr("height", 200)
.attr("fill", (d) => c(d.price));

return svg.node();
Insert cell

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.
Learn more