Public
Edited
Jul 17, 2023
newList = [
{ name: 0, value: 4 },
{ name: 1, value: 2 },
{ name: 2, value: 1 },
{ name: 3, value: 5 },
{ name: 4, value: 5 }
]
list3 = [
{
id: "asdasdasdasdasd",
createdAt: "2023-07-01T08:00:24.251Z",
updatedAt: "2023-07-05T08:00:24.251Z",
content: "hier deine erste nachricht",
type: "TEXT",
writer: "GUEST",
conversationId: "cljpfht96000plgv0vhq96lbf",
botId: null,
guestId: "cljpfht8q000nlgv0a8da3bfl",
value: 1
},
{
id: "cljpfijlm000rlgv0yo66dpa9",
createdAt: "2023-07-04T08:00:24.251Z",
updatedAt: "2023-07-05T08:00:24.251Z",
content: "hier deine erste nachricht",
type: "TEXT",
writer: "GUEST",
conversationId: "cljpfht96000plgv0vhq96lbf",
botId: null,
guestId: "cljpfht8q000nlgv0a8da3bfl",
value: 3
},
{
id: "cljpfijlm000rlgv0yo66dpa9",
createdAt: "2023-07-05T08:00:24.251Z",
updatedAt: "2023-07-05T08:00:24.251Z",
content: "hier deine erste nachricht",
type: "TEXT",
writer: "GUEST",
conversationId: "cljpfht96000plgv0vhq96lbf",
botId: null,
guestId: "cljpfht8q000nlgv0a8da3bfl",
value: 3
},
{
id: "cljphdk0h0004lghde99zo10h",
createdAt: "2023-07-05T08:52:30.737Z",
updatedAt: "2023-07-05T08:52:30.737Z",
content: "weitere konversation",
type: "TEXT",
writer: "GUEST",
conversationId: "cljphdg4m0002lghdf8rbo5vm",
botId: null,
guestId: "cljphdg3y0000lghdqgf67fmb",
value: 200
}
]
list3_grouped = {
return d3
.rollups(
list3,
(v) => {
// const formatTime = d3.utcFormat("%B %d, %Y");
return {
createdAt: new Date(v[0].createdAt),
// createdAt: new Date(new Date(v[0].createdAt).toDateString()),
value: v.length
};
},
(d) => new Date(d.createdAt).getDate()
)
.map((v) => v[1]);
return [];
}
list3_grouped[0].date instanceof Date
start = new Date("2023-06-28")
end = new Date("2023-07-06")
Plot.plot({
width,
x: {
interval: "week",
tickFormat: "%b %W",
padding: 0.8,
tickSize: null
// domain: [new Date("2023, mar 01"), new Date("2023, jul 30")]
},
y: {
grid: true,
tickSize: null
},
marks: [
Plot.barY(
[
// { createdAt: new Date("2023-07-04"), value: 2 },
{ createdAt: new Date("2023-01-01"), value: 2 },
// { createdAt: new Date("2023-06-03"), value: 2 },
{ createdAt: new Date("2023-04-01"), value: 1 }
],
Plot.binX(
{ y: "sum" },
{
x: (d) => d.createdAt,
y: (d) => d.value
// rx: 8,
// fill: "lightgreen"
}
)
)
]
})
timeseries = [
{ date: 2014, value: 7295.290765 },
{ date: 2015, value: 7379.797139 },
{ date: 2015, value: 7379.797139 },
{ date: 2017, value: 7547.858925 },
// {date: 2018, value: 7631.091040},
{ date: 2019, value: 7713.4681 },
{ date: 2020, value: 7794.798739 }
]
Plot.barY(timeseries, { x: "date", y: "value" }).plot({
x: { tickFormat: "", interval: 1 }
})
d3.timeYears(now)
Plot.plot({
})
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.
