Public
Edited
Sep 18, 2023
aapl.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
aaple = FileAttachment("aapl.csv").csv({typed: true});
chart = {
const margin = {top: 20, right: 30, bottom: 30, left: 40};
const svg_width = 928;
const svg_height = 500;
const width = svg_width - margin.left - margin.right;
const height = svg_height - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3.scaleLinear().domain([0, 10000]).range([0, width]);
const y = d3.scaleLinear().domain([0, 10000]).range([height, 0]);
chart.append("g").attr("transform", `translate(0, ${height})`).call(d3.axisBottom(x));
chart.append("g").call(d3.axisLeft(y));
return svg.node();
}
d3.extent(aapl, d => d.date)
chart2 = {
const margin = {top: 20, right: 30, bottom: 30, left: 40};
const svg_width = 928;
const svg_height = 500;
const width = svg_width - margin.left - margin.right;
const height = svg_height - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height);
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3.scaleUtc(d3.extent(aapl, d => d.date), [0, width]);
const y = d3.scaleLinear().domain([0, 10000]).range([height, 0]);
chart.append("g").attr("transform", `translate(0, ${height})`).call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
chart.append("g").call(d3.axisLeft(y));
return svg.node();
}
chart3 = {
const margin = {top: 20, right: 30, bottom: 30, left: 40};
const svg_width = 928;
const svg_height = 500;
const width = svg_width - margin.left - margin.right;
const height = svg_height - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height);
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3.scaleUtc(d3.extent(aapl, d => d.date), [0, width]);
const y = d3.scaleLinear([0, d3.max(aapl, d => d.close)], [height, 0]);
chart.append("g").attr("transform", `translate(0, ${height})`).call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
chart.append("g").call(d3.axisLeft(y).ticks(height / 40));
return svg.node();
}
chart4 = {
const margin = {top: 20, right: 30, bottom: 30, left: 40};
const svg_width = 928;
const svg_height = 500;
const width = svg_width - margin.left - margin.right;
const height = svg_height - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height);
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3.scaleUtc(d3.extent(aapl, d => d.date), [0, width]);
const y = d3.scaleLinear([0, d3.max(aapl, d => d.close)], [height, 0]);
chart.append("g").attr("transform", `translate(0, ${height})`).call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
chart.append("g")
.call(d3.axisLeft(y)
.ticks(height / 40))
.call(g => g.select(".domain").remove()) // Remove the domain line
.call(g => g.selectAll(".tick line").clone() // Add tick line
.attr("x2", width)
.attr("stroke-opacity", 0.1))
.call(g => g.append("text")
.attr("x", -margin.left)
.attr("y", 10 - margin.top)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text("↑ Daily close ($)"));
return svg.node();
}
chart5 = {
const margin = {top: 20, right: 30, bottom: 30, left: 40};
const svg_width = 928;
const svg_height = 500;
const width = svg_width - margin.left - margin.right;
const height = svg_height - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height);
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3.scaleUtc(d3.extent(aapl, d => d.date), [0, width]);
const y = d3.scaleLinear([0, d3.max(aapl, d => d.close)], [height, 0]);
chart.append("g").attr("transform", `translate(0, ${height})`).call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
chart.append("g")
.call(d3.axisLeft(y)
.ticks(height / 40))
.call(g => g.select(".domain").remove()) // Remove the domain line
.call(g => g.selectAll(".tick line").clone() // Add tick line
.attr("x2", width)
.attr("stroke-opacity", 0.1))
.call(g => g.append("text")
.attr("x", -margin.left)
.attr("y", 10 - margin.top)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text("↑ Daily close ($)"));
const line = d3.line()
.x(d => x(d.date))
.y(d => y(d.close));
chart.append("path")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", line(aapl));
return svg.node();
}
Plot.plot({
y: {grid: true, lable: "Daily close ($)"},
marks: [
Plot.ruleY([0]), // Show y value from 0
Plot.lineY(aapl, {x: "date", y: "close", stroke: "steelblue"})
]
})
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.
