Public
Edited
Dec 15, 2022
1 fork
{
const height = 600;
const projection = d3
.geoMercator()
.rotate([-0.1, -0.1, 0.01])
.center([-74.01901002189861, 40.69020722446686])
.scale(100000);
// d3.geoAlbers()
// .rotate([120, 0, 0])
// .fitSize([width, height], manhattan)
const geoPath = d3.geoPath().projection(projection);
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto; height: intrinsic;");
const manhattan_polygon = svg
.selectAll(".boro")
.data(manhattan.features)
.enter()
.append("path")
.attr("d", geoPath)
.attr("fill", "#E9E9E9")
.attr("stroke", "grey")
.attr("stroke-width", 0.4);
const flower = svg
.selectAll("cicle")
.data(station_lookup)
.enter()
.append("g")
.attr("transform", (d) => {
return `translate(${projection(d.geometry.coordinates).join(",")})`;
});
const scaleSize = d3
.scaleLinear()
.domain(d3.extent(trips_counts, (d) => +d.sum))
.range([0.02, 0.5]);
const scaleColor = d3
.scaleQuantile()
//.domain(d3.extent(trips_counts, (d) => +d.balance))
.domain(trips_counts.map((d) => +d.ratio))
.range(["#ca3b28", "#ed5728", "#f17e2e", "#f9bc9f", "white"]);
const dot = flower.append("circle").attr("r", 1).attr("fill", "yellow");
const petal = flower.append("g").each(function (d) {
//filter stations that connect with station_b
const station_name = d.properties.name;
const connectors = trips_counts.filter((d) => d.station_b === station_name);
const length = connectors.length;
d3.select(this)
.selectAll("path")
.data(connectors)
.enter()
.append("path")
.attr("d", petalPaths[0])
.attr("fill", (d, i) => {
const color = d3.rgb("CornflowerBlue");
const { h, s, l } = d3.hsl(color);
return scaleColor(+d.ratio);
})
.style("opacity", 0.8)
.attr(
"transform",
(d, i) => `rotate(${i * (360 / length)})scale(${scaleSize(+d.sum)})`
);
});
return svg.node();
}
viewof color = Inputs.color({label: "Favorite color", value: "#4682b4"})
{
const height = 30;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto; height: intrinsic;");
const data = trips_counts.map((d) => +d.ratio)
const scaleColor = d3
.scaleQuantile()
//.domain(d3.extent(trips_counts, (d) => +d.balance))
.domain(data)
.range(["#ca3b28",'#ed5728', "#f17e2e", "#f9bc9f", "white"]);
const breaks = [0,0.25,0.5,0.75,1].map(percent => d3.quantile(data, percent))
return breaks;
const boxWidth = width / breaks.length;
svg
.selectAll("rect")
.data(breaks)
.enter()
.append("rect")
.attr("width", boxWidth - 10)
.attr("height", height)
.attr("fill", (d) => scaleColor(d))
.attr("x", (d, i) => i * boxWidth);
return svg.node()
}
{
const height = 30;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto; height: intrinsic;");
const colors = [0.1, 0.3, 0.5, 0.7, 0.9, 1].map((amount) => {
const { h, s, l } = d3.hsl(color);
return {
label: amount,
color: d3.hsl(h, s * amount, l)
}
});
const boxWidth = width / colors.length;
svg
.selectAll("rect")
.data(colors)
.enter()
.append("rect")
.attr("width", boxWidth - 10)
.attr("height", height)
.attr("fill", (d) => d.color)
.attr("x", (d, i) => i * boxWidth);
svg
.selectAll("text")
.data(colors)
.enter()
.append("text")
.attr("x", (d, i) => i * boxWidth + (boxWidth / 2))
.attr("text-anchor", "middle")
.attr("y", height / 2)
.attr("fill", "white")
.text((d) => d3.format('.0%')( d.label));
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.
