Public
Edited
Aug 7, 2023
1 star
plot = {
let plot = Plot.plot({
width: 800,
height: 300,
marginRight: 50,
marginLeft: 80,
marginTop: 10,
marginBottom: 50,
y: {grid: true, stroke: "#898989", label: null, ticks: 12},
x: {label: null },
marks: [
Plot.axisY({color: "#7171a6", tickSize: 0, ticks: 12, fontSize: 11, tickFormat: function(d) {
if(d == 0) { return ''; }
else {
return d.toLocaleString('en-US', {
style: 'currency',
currency: 'USD',
maximumSignificantDigits: Math.trunc(Math.abs(d)).toFixed().length
}); } }}),
Plot.axisX({color: "#7171a6", tickPadding: 20, tickSize: 0, fontSize: 11, tickFormat: function(d) {
/*
var year = d.getFullYear();
year = year.toString().substr(-2);
var month = d.toLocaleString('default', { month: 'short' });
d = d.getFullYear();
return "month" + " 'year"; */
return d;
} }),
Plot.areaY(result, {x: "x", y: "y", fill: "#6078ff", fillOpacity: 0.1}),
Plot.ruleX(result, Plot.pointerX({x: "x", y: "y", stroke: "#FFFFFF", strokeWidth: 3})),
Plot.dot(result, Plot.pointerX({x: "x", y: 0, py: "y", fill: "#FFF", stroke: "#E5E7EB", strokeWidth:1, r: 5, strokeOpacity: 1, fillOpacity:1, ariaDescription:"jstip" })),
Plot.dot(result, Plot.pointerX({x: "x", y: "y", fill: "#6078ff", r: 8, tip: true, title: (d) => "yes"
}) ),
Plot.lineY(result, {x: "x", y: "y", stroke: "#6078ff", strokeWidth: 5})
]
})
let dots = d3.select(plot).selectAll("g[aria-description=jstip]");
console.log(dots);
return plot;
}
data = [{"date":"3/22/2023","amount":"380206"},
{"date":"4/5/2023","amount":"152562"},
{"date":"3/17/2023","amount":"252445"},
{"date":"1/29/2023","amount":"155145"},
{"date":"9/5/2022","amount":"151041"},
{"date":"2/11/2023","amount":"371796"},
{"date":"7/15/2023","amount":"224093"},
{"date":"8/1/2022","amount":"398249"},
{"date":"4/2/2023","amount":"295212"},
{"date":"3/29/2023","amount":"267540"},
{"date":"1/7/2023","amount":"155138"},
{"date":"7/13/2023","amount":"237531"}]
result = Array.from(data, (x) => ({
x: new Date(x["date"]),
y: parseInt(x["amount"])
})).sort(function(a,b){
// Turn your strings into dates, and then subtract them
// to get a value that is either negative, positive, or zero.
return a.x - b.x;
});
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.
