Public
Edited
Apr 25, 2024
3 forks
1 star
scatter = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
let o = d3
.scaleLinear()
.domain(d3.extent(data, (d) => d.price))
.range([0.7, 1]);
let x = d3
.scaleLinear()
.domain(d3.extent(data, (d) => d.price))
.range([margin.left, width - margin.right - margin.left]);
let w = d3
.scaleLinear()
.domain(d3.extent(data, (d) => d.price))
.range([0.5, 7]);
let y = d3
.scaleBand()
.domain(neighbourhood)
.rangeRound([margin.top, height - margin.bottom])
.padding(0.08);
let c2 = d3
.scaleOrdinal()
.domain(["Entire home/apt", "Private room", "Hotel room", "Shared room"])
.range(["#06d6a0", "#662e9b", "#f20666", "#9EF211"]);
svg
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", (d) => x(d.price))
.attr("y", (d) => y(d.neighbourhood_group))
.attr("width", (d) => w(d.price))
.attr("height", y.bandwidth())
.style("opacity", (d) => o(d.price))
.attr("fill", (d) => c2(d.room_type));
svg
.append("g")
.selectAll("text")
.data(price_neighbourhoud)
.join("text")
.attr("x", 10)
.attr("y", (d) => y(d[0]))
.attr("dy", 18)
.attr("dx", -5)
.text((d) => d[0])
.attr("class", "text");
return svg.node();
}
data = data_raw.filter((d) => (d.price > 50) & (d.price < 2000))
data_raw = d3.csv(
"https://gist.githubusercontent.com/sandravizz/952b2c4b2b88a310bc5aaf371716593a/raw/c3725ac3c2bd0a70640a7f753e54ba1f88f74636/Berlin%2520airbnb%2520Nov%25202021",
d3.autoType
)
neighbourhood = data.map((d) => d.neighbourhood_group).sort()
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.
