Untitled

stock_change.js

// set the dimensions and margins of the graph

const margin = {top: 100, right: 100, bottom: 30, left: 60},

width = 670 - margin.left - margin.right,

height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page

const svg = d3.select("#my_dataviz")

.append("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom)

.append("g")

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

//var url = "https://raw.githubusercontent.com/stellazhangyue/redditWSB/main/data/tmp/indices.csv"

var url = "https://raw.githubusercontent.com/stellazhangyue/redditWSB/main/data/clean/stock/top_10_stocks.csv"

d3.csv(url, function(d){

return {

symbol: d.Symbol,

date: d3.timeParse("%Y-%m-%d")(d.Date),

close : d.Close,

volume : d.Volume

}

}).then(

function(data) {

var f = "close";

// split data according to stocks

var stocks = [...new Set(data.map(item => item.symbol))];

var selected_stocks = new Set(data.map(item => item.symbol));

var data_stock = {};

stocks.forEach(function (stock) {

var obj = data.filter(function(d) { return d.symbol == stock});

data_stock[stock] = obj;

});

Last edited Dec 13, 2021

Created on Dec 12, 2021

A bare minimum HTML page demonstrating use of CSS and JavaScript.