Published
Edited
Apr 13, 2021
Importers
1 star
md`# GME Graph`
d3 = require("d3@^6.2.0")
stock_data = FileAttachment("stock_data (2).csv").csv()
chart2 = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height3])
.style("overflow", "visible");
svg.append("g")
.call(xAxis_3);
svg.append("g")
.call(yAxis_3);
const path = svg.append("g")
.attr("fill", "none")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.selectAll("path")
.data(data_min.series)
.join("path")
.style("mix-blend-mode", "multiply")
.attr("d", d => line(d.values))
.attr("stroke", "steelblue")
//.attr("fill", "grey")
svg.append("text")
.attr("x", 50)
.attr("y", 50)
.text("GME Stock Value");
return svg.node();
}
data_min = wrap_multipliers(stock_data)
margin3 = ({top: 20, right: 20, bottom: 30, left: 30})
height3 = 600
x_3 = d3.scaleUtc()
.domain(d3.extent(data_min.dates))
.range([margin3.left, width - margin3.right])
y_3 = d3.scaleLinear()
.domain([d3.min(data_min.series, d => d3.min(d.values)), d3.max(data_min.series, d => d3.max(d.values))]).nice()
.range([height3 - margin3.bottom, margin3.top])
xAxis_3 = g => g
.attr("transform", `translate(0,${height3 - margin3.bottom})`)
.call(d3.axisBottom(x_3).ticks(width / 80).tickSizeOuter(0))
yAxis_3 = g => g
.attr("transform", `translate(${margin3.left},0)`)
.call(d3.axisLeft(y_3))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(data_min.y))
line = d3.line()
.defined(d => !isNaN(d))
.x((d, i) => x_3(data_min.dates[i]))
.y(d => y_3(d))
function wrap_multipliers(stock_data) {
let GME_Stock = get_GME(stock_data);
let stocks = [GME_Stock];
let datesArray = [];
for (let i = 0; i<stock_data.length; i++){
datesArray.push(new Date(stock_data[i]["Date"].slice(0,-6)));
}
let multipliers = {"y": "Value of GME Stock (USD)", "series": stocks, "dates": datesArray}
return multipliers
}
function get_GME(stock_data) {
let GME = [];
for (let i = 0; i < stock_data.length; i++) {
GME.push(parseFloat(stock_data[i]["GME"]));
}
var max_multiplier = {"name": "GME", "values": GME};
return max_multiplier;
}
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.
