An curious maker & coder from Malaysia, doing fun projects related to Arduino RPi, IoT, PCB, LED, linux, javascript (p5, phaser, Vue), dataviz & art installation
Published
Edited
Jul 24, 2021
md`# Testing Plot with SP500 (format date)`
sp500 = FileAttachment("sp500.csv").csv({typed: true})
md` ## Convert date to correct JS objects with dateParser`
sp2 = sp500.map( d => (
{
date: dateParser(d.date),
price: d.price
}
)
)
md`### Format date accordingly, MMM day YYYY`
md` Refer to date format here (d3-time-format) [https://github.com/d3/d3-time-format]
`
dateParser = d3.timeParse("%b %d %Y")
md`### Get first and last array for date`
startDate = sp2[0].date
endDate = sp2[122].date
md`### Format X axis labels`
Plot.plot( {x: {type: "time", domain: [startDate, endDate]}, grid: true})
md` ### How to format date in month?`
Plot.plot({
grid: true,
width:1200,
height: 600,
y: {
label: "Price",
},
x: {
label: "Year",
},
marks: [
Plot.ruleY([0]),
Plot.dot(sp2, {x: "date", y: "price", stroke: "price"})
]
})
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.
