Published
Edited
Jun 16, 2020
mydata = {
const text = await FileAttachment("oksss.csv").text();
const parseDate = d3.utcParse("%m/%d/%Y");
return d3.csvParse(text, ({data, money}) => ({
date: parseDate(data),
money: +money,
}));
}
money = mydata.map(d => d.money)
date = mydata.map(d => d.date)
x = d3
.scaleTime()
.domain(d3.extent(date))
.range([0, width])
.nice()
y = d3
.scaleLinear()
.domain([d3.max(money),0])
.range([0, height])
.interpolate(d3.interpolateRound)
{
const node = DOM.svg(
width + margin.left +margin.right,
height + margin.bottom + margin.top
);
const svg = d3.select(node);
const axis = svg
.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
const line = d3
.line ()
.x(d => x(d.x)) // scale x
.y(d => y(d.y)); // scale y
axis
.append('g')
.attr('transform', `translate(0, ${height})`) // Put x-axis at bottom
.call(d3.axisBottom(x));
axis.append('g').call(d3.axisLeft(y));
axis
.append('path')
.attr('d',line(mydata))
.attr('stroke','blue')
.attr('fill','none');
return node;
}
x.domain()
y.domain()
y.range()
x.domain()
width = 700
height = width * 0.75
margin = ({top:30 , left:30 , bottom:30 , right:30 })
d3 = require("d3@5")
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.
