Public
Edited
Mar 26, 2023
holidings-raw-data-mar-26-2023@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
holidingsRaw
holidingsRaw.forEach(r => {
r['currentValue'] = r['Value']*r['Owned'];
r['totalCost'] = r['costAvg']*r['Owned'];
})
holidingsRaw
filteredHoldings = holidingsRaw.filter(r => r['TICKR'] != 'ROBO')
Plot.plot({
marks: [
Plot.barY(filteredHoldings, {x: "TICKR", y: "totalCost", sort: {x: "y", reverse: true}, fill: 'teal'}),
Plot.ruleY([0]),
Plot.barY(filteredHoldings, {x: "TICKR", y: "currentValue", sort: {x: "y", reverse: true}, fill: 'orange'})
],
y : { domain: [0, 6000]}
})
bchart = d3.select("#big-chart")
aplot = Plot.plot({
marks: [
Plot.barY(filteredHoldings, {x: "TICKR", y: "totalCost", sort: {x: "y", reverse: true}, fill: 'teal'})
]
})
bchart.append(() => Plot.plot({
marks: [
Plot.barY(filteredHoldings, {x: "TICKR", y: "totalCost", sort: {x: "y", reverse: true}, fill: 'green'})
]
}))
bchart.append(() => Plot.plot({
marks: [
Plot.barX(filteredHoldings, {x: "TICKR", y: "totalCost", sort: {x: "y", reverse: true}, fill: 'yellow'})
]
}))
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.
