IT Professional looking to increase knowledge.
Published
Edited
Aug 12, 2021
d3 = require('d3-dsv')
CryptoSpend = [
2017 = [Q1: 12003.31, Q2: -155290.27, Q3: -124974.71, Q4: -659396.63]
2018 = [Q1: 141492.65, Q2: 41428.11, Q3: -239249.25, Q4: -61058.29]
2019 = [Q1: 17867.70, Q2: -528414.29, Q3: -41202.37, Q4: -50646.18]
2020 = [Q1: -72417.15, Q2: -579990.76, Q3: 256920.86, Q4: -991317.83]
2021 = [Q1: -4929349.01, Q2: -4810024.68, Q3: -271381.74, Q4: 0]
]
rawData = `Quarter\tTotal
17-Qtr1 12003.31
17-Qtr2 -155280.27
17-Qtr3 -124974.71
17-Qtr4 -659396.63
18-Qtr1 141492.65
18-Qtr2 41428.11
18-Qtr3 -239249.25
18-Qtr4 -61058.29
19-Qtr1 17867.7
19-Qtr2 -528414.29
19-Qtr3 -41202.37
19-Qtr4 -50646.18
20-Qtr1 -72417.15
20-Qtr2 -579990.76
20-Qtr3 256920.86
20-Qtr4 -991317.83
21-Qtr1 -4929349.01
21-Qtr2 -4810024.68
21-Qtr3 -271381.74
`
d3.tsvParse(rawData)
newData = [
{Quarter: "17Q1", Total: 12003.31},
{Quarter: "17Q2", Total: -155280.27},
{Quarter: "17Q3", Total: -124974.71},
{Quarter: "17Q4", Total: -659396.63},
{Quarter: "18Q1", Total: 141492.65},
{Quarter: "18Q2", Total: 41428.11},
{Quarter: "18Q3", Total: -239249.25},
{Quarter: "18Q4", Total: -61058.29},
{Quarter: "19Q1", Total: 17867.7},
{Quarter: "19Q2", Total: -528414.29},
{Quarter: "19Q3", Total: -41202.37},
{Quarter: "19Q4", Total: -50646.18},
{Quarter: "20Q1", Total: -72417.15},
{Quarter: "20Q2", Total: -579990.76},
{Quarter: "20Q3", Total: 256920.86},
{Quarter: "20Q4", Total: -991317.83},
{Quarter: "21Q1", Total: -4929349.01},
{Quarter: "21Q2", Total: -4810024.68},
{Quarter: "21Q3", Total: -271381.74},
{Quarter: "21Q4", Total: 0}
]
Plot.plot({
marginTop: 50,
marginLeft: 90,
marginBottom: 50,
height: 800,
width: 1200,
y: {
grid: true
},
marks: [
Plot.ruleY([0]),
Plot.barY(newData, {x: "Quarter", y: "Total", stroke: "red", fill: "red"}),
Plot.text(newData, {x: "Quarter", y: "Total", text: "Total", dy: 5})
]
})
fullFile = FileAttachment("crypto_full@1.csv").csv()
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.
