data_raw = d3.csv(
"https://docs.google.com/spreadsheets/d/e/2PACX-1vTx5D7KkDnhGMGdJSp4d83AY7bJ-UfYu-mAxKXtnRDVnxsXQLhGjmRmhSOrEH1ZPu-AJz-fxiTGlP4F/pub?gid=269443395&single=true&output=csv")
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
)
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();
}
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();
}
extent = d3.extent(Barcelona, d => (d.price))
data_filtrado = d3.filter(Barcelona, d => (d.price>0) & (d.price<5000))
extent_nights= d3.extent(Barcelona, d => (d.minimum_nights))
data_filtrado_2 = d3.filter(Barcelona, d => (d.minimum_nights>0) & (d.minimum_nights<180))
x = d3
.scaleLinear()
.domain(d3.extent(data_filtrado, (d) => d.price))
.range([0, 1000])
x(1000)
extent_3 = d3.extent(Barcelona, d => (d.number_of_reviews))
y = d3
.scaleLinear()
.domain(d3.extent(data_filtrado, (d) => d.number_of_reviews))
.range([0, 1000])
y(1000)
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();
}
c = d3
.scaleLinear()
.domain(d3.extent(data_filtrado, (d) => d.price))
.range(["#06d6a0", "#f20666"])
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();
}
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();
}
xAxis = (g) =>
g
.attr("class", "x-axis")
.attr("transform", `translate(0, ${Barcelona.top})`)
.call(d3.axisTop().scale(x))
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();
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.
