status = d3.csv(
"https://docs.google.com/spreadsheets/d/e/2PACX-1vQ2i3P8YJoSE7LFcPpt6mF9dQ4_8OC0d82DkDO_alK0H9BhNIy_k7CU3K74EcyD7B_Uk9ZEu8n87unc/pub?gid=246878878&single=true&output=csv",
d3.autoType
);
//A little Date math:
function diff_weeks(dt2, dt1) {
console.log(dt2)
return Math.abs(Math.round(((dt2.getTime() - dt1.getTime()) / 1000)/ (60 * 60 * 24 * 7)));
}
diff_weeks(new Date('2020-01-31'), new Date('2020-01-01'))
new Date()
old_time = d3.scaleTime().domain([new Date("2/27/2023 9:16:20"), new Date()]).range(d3.range([1, diff_weeks(new Date(), new Date("2/27/2023 9:16:20"))]));
old_time(Date.now())
one_tick_per_week = old_time.ticks(d3.timeWeek)
histogram = d3
.bin()
.value(d => d)
.domain(old_time.domain())
.thresholds(one_tick_per_week)
bins = histogram(status)
groups = d3.scaleOrdinal()
.domain([1, 10])
.range([])
diff_weeks(new Date("2/27/2023 9:16:20"), new Date())
time_band = d3.scaleQuantize()
.domain([new Date("2/27/2023 9:16:20"), new Date()])
.range(d3.range(0, diff_weeks(new Date("2/27/2023 9:16:20"), new Date())))
band = d3.scaleBand()
.domain(time_band.range())
.range([1, width])
.round(true)
.padding([0.1])
color = d3.scaleLinear()
.domain([1, 10]).range(["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"])
color(3)
stackedData = d3.stack()
.keys([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
(status)
band(time_band(new Date()))
chart = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
svg.append("g")
.attr("transform", "translate(0, " + 7* height/8 + ")")
.call(d3.axisBottom(band).tickSizeOuter(0))
/*svg
.selectAll("circle")
.data(status.map((outreach) => outreach["How easy is it to help our action?"]))
.join("circle")
.attr("cx", d => d * 50)
.attr("cy", height / 2)
.attr("r", d => Math.random() * 20)
.attr("fill", "hsl(" + Math.random() * 100 + "deg 100% 13%)");
*/
return svg.node();
}
height = 400
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.
