Public
Edited
Sep 19, 2023
data = await FileAttachment("AAPL.csv").csv({typed: true}).then((values) => ["AAPL", values])
stocks = (await Promise.all([
FileAttachment("AAPL.csv").csv({typed: true}).then((values) => ["AAPL", values]),
FileAttachment("AMZN.csv").csv({typed: true}).then((values) => ["AMZN", values]),
FileAttachment("GOOG.csv").csv({typed: true}).then((values) => ["GOOG", values]),
FileAttachment("IBM.csv").csv({typed: true}).then((values) => ["IBM", values]),
FileAttachment("MSFT.csv").csv({typed: true}).then((values) => ["MSFT", values])
])).flatMap(([Symbol, values]) => (values.map(d => ({Symbol, ...d}))))
width = 928;
height = 600;
{
const margin = {top: 20, right: 40, bottom: 30, left: 40};
const svg_width = width + margin.left + margin.right;
const svg_height = height + margin.top + margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, svg_width, svg_height])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
return svg.node();
}
d3.groups(stocks, d => d.Symbol)
series = d3.groups(stocks, d => d.Symbol).map(([key, values]) => {
const firstClose = values[0].Close;
return {key, values: values.map(({Date, Close}) => ({Date, value: Close / firstClose}))}
})
k = d3.max(series, ({values}) => d3.max(values, d => d.value) / d3.min(values, d => d.value))
d3.maxIndex(series, ({values}) => d3.max(values, d => d.value) / d3.min(values, d => d.value))
d3.min(series, ({values}) => d3.max(values, d => d.value) / d3.min(values, d => d.value))
d3.minIndex(series, ({values}) => d3.max(values, d => d.value) / d3.min(values, d => d.value))
// The max value on vertical scale would be k and min value would be 1/k on the log scale
{
const margin = {top: 20, right: 40, bottom: 30, left: 40};
const svg_width = width + margin.left + margin.right;
const svg_height = height + margin.top + margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, svg_width, svg_height])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3.scaleUtc()
.domain(d3.extent(stocks, d => d.Date))
.range([0, width]);
// .clamp(true);
chart.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
.call(g => g.select(".domain").remove());
const y = d3.scaleLog()
.domain([1/k, k])
.range([height, 0]);
chart.append("g")
.call(d3.axisLeft(y)
.ticks(null, x => +x + "x")
)
.call(g => g.selectAll(".tick line").clone()
.attr("stroke-opacity", d => d === 1 ? null : 0.2)
.attr("x2", width))
.call(g => g.select(".domain").remove());
return svg.node();
}
{
const margin = {top: 20, right: 40, bottom: 30, left: 40};
const svg_width = width + margin.left + margin.right;
const svg_height = height + margin.top + margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, svg_width, svg_height])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3.scaleUtc()
.domain(d3.extent(stocks, d => d.Date))
.range([0, width]);
// .clamp(true);
chart.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
.call(g => g.select(".domain").remove());
const y = d3.scaleLog()
.domain([1/k, k])
.range([height, 0]);
chart.append("g")
.call(d3.axisLeft(y)
.ticks(null, x => +x + "x")
)
.call(g => g.selectAll(".tick line").clone()
.attr("stroke-opacity", d => d === 1 ? null : 0.2)
.attr("x2", width))
.call(g => g.select(".domain").remove());
const line = d3.line()
.x(d => x(d.Date))
.y(d => y(d.value));
const seriesGroup = chart.append("g")
.selectAll("g")
.data(series)
.join("g");
seriesGroup.append("path")
.attr("fill", "none")
.attr("stroke", d => "steelblue")
.attr("d", d => line(d.values));
return svg.node();
}
{
const margin = {top: 20, right: 40, bottom: 30, left: 40};
const svg_width = width + margin.left + margin.right;
const svg_height = height + margin.top + margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, svg_width, svg_height])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3.scaleUtc()
.domain(d3.extent(stocks, d => d.Date))
.range([0, width]);
// .clamp(true);
chart.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
.call(g => g.select(".domain").remove());
const y = d3.scaleLog()
.domain([1/k, k])
.range([height, 0]);
chart.append("g")
.call(d3.axisLeft(y)
.ticks(null, x => +x + "x")
)
.call(g => g.selectAll(".tick line").clone()
.attr("stroke-opacity", d => d === 1 ? null : 0.2)
.attr("x2", width))
.call(g => g.select(".domain").remove());
const z = d3.scaleOrdinal(d3.schemeCategory10).domain(series.map(d => d.key));
const line = d3.line()
.x(d => x(d.Date))
.y(d => y(d.value));
const seriesGroup = chart.append("g")
.selectAll("g")
.data(series)
.join("g");
seriesGroup.append("path")
.attr("fill", "none")
.attr("stroke", d => z(d.key))
.attr("stroke-width", 1.5)
.attr("d", d => line(d.values));
return svg.node();
}
{
const margin = {top: 20, right: 40, bottom: 30, left: 40};
const svg_width = width + margin.left + margin.right;
const svg_height = height + margin.top + margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, svg_width, svg_height])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3.scaleUtc()
.domain(d3.extent(stocks, d => d.Date))
.range([0, width]);
// .clamp(true);
chart.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
.call(g => g.select(".domain").remove());
const y = d3.scaleLog()
.domain([1/k, k])
.range([height, 0]);
chart.append("g")
.call(d3.axisLeft(y)
.ticks(null, x => +x + "x")
)
.call(g => g.selectAll(".tick line").clone()
.attr("stroke-opacity", d => d === 1 ? null : 0.2)
.attr("x2", width))
.call(g => g.select(".domain").remove());
const z = d3.scaleOrdinal(d3.schemeCategory10).domain(series.map(d => d.key));
const line = d3.line()
.x(d => x(d.Date))
.y(d => y(d.value));
const seriesGroup = chart.append("g")
.selectAll("g")
.data(series)
.join("g");
seriesGroup.append("path")
.attr("fill", "none")
.attr("stroke", d => z(d.key))
.attr("stroke-width", 1.5)
.attr("d", d => line(d.values));
seriesGroup.append("text")
.datum(d => ({key: d.key, value: d.values[d.values.length - 1].value}))
.attr("fill", d => z(d.key))
.attr("x", x.range()[1] + 1)
.attr("y", d => y(d.value))
.text(d => d.key);
return svg.node();
}
{
const margin = {top: 20, right: 40, bottom: 30, left: 40};
const svg_width = width + margin.left + margin.right;
const svg_height = height + margin.top + margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, svg_width, svg_height])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3.scaleUtc()
.domain(d3.extent(stocks, d => d.Date))
.range([0, width]);
// .clamp(true);
chart.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
.call(g => g.select(".domain").remove());
const y = d3.scaleLog()
.domain([1/k, k])
.range([height, 0]);
chart.append("g")
.call(d3.axisLeft(y)
.ticks(null, x => +x + "x")
)
.call(g => g.selectAll(".tick line").clone()
.attr("stroke-opacity", d => d === 1 ? null : 0.2)
.attr("x2", width))
.call(g => g.select(".domain").remove());
const z = d3.scaleOrdinal(d3.schemeCategory10).domain(series.map(d => d.key));
const line = d3.line()
.x(d => x(d.Date))
.y(d => y(d.value));
const seriesGroup = chart.append("g")
.selectAll("g")
.data(series)
.join("g");
seriesGroup.append("path")
.attr("fill", "none")
.attr("stroke", d => z(d.key))
.attr("stroke-width", 1.5)
.attr("d", d => line(d.values));
seriesGroup.append("text")
.datum(d => ({key: d.key, value: d.values[d.values.length - 1].value}))
.attr("fill", d => z(d.key))
.attr("x", x.range()[1] + 1)
.attr("y", d => y(d.value))
.text(d => d.key);
const ruleGroup = chart.append("g");
ruleGroup.append("line")
.attr("y1", height)
.attr("y2", 0)
.attr("stroke", "black");
let ruleText = ruleGroup.append("text");
svg.on("mousemove", function(event) {
update(d3.pointer(event, this)[0]);
d3.event.preventDefault();
});
function update(xPos) {
xPos -= margin.left;
// ruleText.attr("stroke", "black").text(`${x}`);
const date = d3.utcDay.round(x.invert(xPos));
// ruleGroup.attr("transform", `translate(${x + 0.5}, 0)`);
ruleGroup.attr("transform", `translate(${x(date)}, 0)`);
}
return svg.node();
}
{
const margin = {top: 20, right: 40, bottom: 30, left: 40};
const svg_width = width + margin.left + margin.right;
const svg_height = height + margin.top + margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, svg_width, svg_height])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3.scaleUtc()
.domain(d3.extent(stocks, d => d.Date))
.range([0, width]);
// .clamp(true);
chart.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
.call(g => g.select(".domain").remove());
const y = d3.scaleLog()
.domain([1/k, k])
.range([height, 0]);
chart.append("g")
.call(d3.axisLeft(y)
.ticks(null, x => +x + "x")
)
.call(g => g.selectAll(".tick line").clone()
.attr("stroke-opacity", d => d === 1 ? null : 0.2)
.attr("x2", width))
.call(g => g.select(".domain").remove());
const z = d3.scaleOrdinal(d3.schemeCategory10).domain(series.map(d => d.key));
const line = d3.line()
.x(d => x(d.Date))
.y(d => y(d.value));
const seriesGroup = chart.append("g")
.selectAll("g")
.data(series)
.join("g");
seriesGroup.append("path")
.attr("fill", "none")
.attr("stroke", d => z(d.key))
.attr("stroke-width", 1.5)
.attr("d", d => line(d.values));
seriesGroup.append("text")
.datum(d => ({key: d.key, value: d.values[d.values.length - 1].value}))
.attr("fill", d => z(d.key))
.attr("x", x.range()[1] + 1)
.attr("y", d => y(d.value))
.text(d => d.key);
const ruleGroup = chart.append("g");
ruleGroup.append("line")
.attr("y1", height)
.attr("y2", 0)
.attr("stroke", "black");
let ruleText = ruleGroup.append("text");
svg.on("mousemove", function(event) {
update(d3.pointer(event, this)[0]);
d3.event.preventDefault();
});
const bisect = d3.bisector(d => d.Date).left;
function update(xPos) {
xPos -= margin.left;
const date = d3.utcDay.round(x.invert(xPos));
ruleGroup.attr("transform", `translate(${x(date)}, 0)`);
seriesGroup.attr("transform", ({values}) => {
const i = bisect(values, date, 0, values.length-1); // TODO: why pass 3, 4 arguments
return `translate(0, ${y(1) - y(values[i].value / values[0].value)})`;
});
}
return svg.node();
}
// TODO: viewof, transition
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.
