ANIMATED LINE CHART / Sandraviz

Olá! My name is Sandra and I work with Dataviz in beautiful Lisbon 🙋🏼‍♀️ I'm a visual analyst and researcher with a passion for data storytelling and statistics to uncover patterns in human behaviour and societies 💞

Workspace

Public

Edited

Dec 27, 2021

Fork of LINE COLOR GRADIENT

•

2 forks

6 stars

</svg>

</svg>

chart = {

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height]);

svg.append("path")

.datum(data)

.attr("class", "line")

.attr("d", line)

.transition()

.duration(5000)

.ease(d3.easeLinear)

.attrTween("stroke-dasharray", function() {

const length = this.getTotalLength();

return d3.interpolate(`0,${length}`, `${length},${length}`);

});

svg.append("g")

.call(yAxis);

svg.append("g")

.call(xAxis);

return svg.node();

}

x = d3.scaleTime()

.domain(d3.extent(data, d => d.date))

.range([margin.left, width - margin.right])

y = d3.scaleLinear()

.domain([0, d3.max(data, d => d.close)])

.range([height - margin.bottom, margin.top])

d3.extent(data, d => d.close)

yAxis = g => g

.attr("transform", `translate(${margin.left},0)`)

.attr("class","y-axis")

.call(d3.axisLeft(y)

.tickValues([100, 200, 400, 300, 500, 600])

.tickSize(-width))

xAxis = g => g

.attr("transform", `translate(0,${height - margin.bottom})`)

.attr("class","x-axis")

.call(d3.axisBottom(x)

.tickFormat(formatDate)

.ticks(10))

line = d3.line()

.defined(d => d.close > 0)

.x(d => x(d.date))

.y(d => y(d.close))

line(data)

data_raw = d3.tsvParse(await FileAttachment("aapl.csv").text())

parseDate = d3.timeParse("%Y-%m-%d")

formatDate = d3.timeFormat("%b %y");

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.

Learn more