Published
Edited
Jul 8, 2022
1 star
Plot Testing
data = [
{
"type": "RN",
"data": [
{ "month":"07/01/2022", "amt": "31", "order": 1 },
{ "month":"08/01/2022", "amt": "31", "order": 2},
{ "month":"09/01/2022", "amt": "36", "order": 3},
{ "month":"10/01/2022", "amt": "42", "order": 4 },
{ "month":"11/01/2022", "amt": "21", "order": 5 },
{ "month":"12/01/2022", "amt": "27", "order": 6 },
{ "month":"1/01/2022", "amt": "34", "order": 7 },
{ "month":"2/01/2022", "amt": "37", "order": 8 },
{ "month":"3/01/2022", "amt": "49", "order": 9 },
{ "month":"4/01/2022", "amt": "47", "order": 10 },
{ "month":"5/01/2022", "amt": "32", "order": 11 },
{ "month":"6/01/2022", "amt": "21", "order": 12 }]
},
{
"type": "Fire",
"data": [
{ "month":"07/01/2022", "amt": "21", "order": 1 },
{ "month":"08/01/2022", "amt": "11", "order": 2},
{ "month":"09/01/2022", "amt": "56", "order": 3},
{ "month":"10/01/2022", "amt": "62", "order": 4 },
{ "month":"11/01/2022", "amt": "9", "order": 5 },
{ "month":"12/01/2022", "amt": "13", "order": 6 },
{ "month":"1/01/2022", "amt": "57", "order": 7 },
{ "month":"2/01/2022", "amt": "21", "order": 8 },
{ "month":"3/01/2022", "amt": "14", "order": 9 },
{ "month":"4/01/2022", "amt": "10", "order": 10 },
{ "month":"5/01/2022", "amt": "5", "order": 11 },
{ "month":"6/01/2022", "amt": "42", "order": 12 }]
}]
rn = data.slice(0,1)[0].data
fr = data[1].data
rn2 = rn.map(item => {
const container = {};
container["month"] = new Date(item.month);
container["monthText"] = new Date(item.month).getUTCMonth();
container["order"] = item.order;
container.amt = item.amt;
return container;
})
fr2 = fr.map(item => {
const container = {};
container["month"] = new Date(item.month);
container["monthText"] = new Date(item.month).getUTCMonth();
container["order"] = item.order;
container.amt = item.amt;
return container;
})
rn3 = rn2.sort((a, b) => d3.ascending(a.order, b.order))
rn4 = rn3.map(item => { return item.monthText; })
fr4 = fr2.map(item => { return item.monthText; })
domainY = {
let domainY = [];
let maxValueOfY = Math.max(...rn3.map(o => o.amt), 0);
let minValueOfY = Math.min(...rn3.map(o => o.amt), 0);
domainY.push(minValueOfY);
domainY.push(maxValueOfY);
return domainY;
}
frDomainY = {
let domainY = [];
let maxValueOfY = Math.max(...fr2.map(o => o.amt), 0);
let minValueOfY = Math.min(...fr2.map(o => o.amt), 0);
domainY.push(minValueOfY);
domainY.push(maxValueOfY);
return domainY;
}
Plot.plot({
x: {
domain: rn4, /*[6,7,8,9,10,11,0,1,2,3,4,5],*/
tickFormat: Plot.formatMonth("en", "short"),
},
y: {
domain: domainY
},
marks: [
Plot.linearRegressionY(rn3, {x: "monthText", y: "amt", stroke: "steelblue",strokeDasharray: 7, fill: "#ffffff" }),
Plot.barY(rn3, {x: "monthText", y:"amt", fill: "#3787c0", insetLeft: 4, insetRight: 4 })
], width: 800
})
Plot.plot({
x: {
domain: rn4, /*[6,7,8,9,10,11,0,1,2,3,4,5],*/
tickFormat: Plot.formatMonth("en", "short"),
padding: .3
},
y: {
domain: domainY
},
marks: [
Plot.linearRegressionY(rn3, {x: "monthText", y: "amt", stroke: "steelblue",strokeDasharray: 7, fill: "#ffffff" }),
Plot.barY(rn3, {x: "monthText", y:"amt", fill: "#3787c0" })
], width: 800
})
viewof btnReset = Inputs.button("Reset Chart")
viewof btn = Inputs.button("Update Chart")
reset = {
btnReset;
return plotSvg(domainY);
}
plotSvg = function(dom)
{
let svg = bars.plot({
x: {
domain: rn4, /*[6,7,8,9,10,11,0,1,2,3,4,5],*/
tickFormat: Plot.formatMonth("en", "short"),
padding: .5
},
y: {
domain: [0,50]
},
height: 500
});
return svg;
}
bars = barY(rn3, { y: "amt", x: "monthText", fill: (d) => d.amt });
updateAxis = function() {
var updated = fr2.map(d => d.amt);
var test = d3.selectAll(".y.axis")
.transition().duration(1000).call(d3.axisLeft(1000));
}
questionMark = d3.selectAll("g").selectAll(".axis")
updatechart = {
btn;
var updated = fr2.map(d => d.amt);
bars
.transition({ Y: updated, C: updated }, { delay: 1300, duration: 750 })
.end()
}
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.
