Initial commit

index.js

@@ -0,0 +1,70 @@
+let margin = {
+    top: 20,
+    right: 20,
+    bottom: 30,
+    left: 50
+};
+
+let width = 960 - margin.left - margin.right;
+let height = 500 - margin.top - margin.bottom;
+
+let x = d3.scaleTime().range([0, width]);
+let y = d3.scaleLinear().range([height, 0]);
+
+let area = d3.area()
+    .x(function (d) { return x(d.date) })
+    .y0(height)
+    .y1(function (d) { return y(d.volume) });
+
+let valueline = d3.line()
+    .x(function (d) { return x(d.date) })
+    .y(function (d) { return y(d.volume) });
+
+let svg = d3.select('svg#intro')
+    .attr('width', width + margin.left + margin.bottom)
+    .attr('height', height + margin.top + margin.bottom)
+    .append('g')
+    .attr('transform', `translate(${margin.left},${margin.top})`);
+
+console.log(x);
+
+d3.csv('crypto-markets.csv', function (d) {
+        return {
+            date: new Date(d.date),
+            open: +d.open,
+            high: +d.high,
+            low: +d.low,
+            close: +d.close,
+            volume: +d.volume,
+            market: +d.market,
+            symbol: d.symbol,
+            coin: d.coin,
+            variance: +d.variance,
+            volatility: +d.volatility
+        }
+    }, function (d) {
+    plotArea(d);
+});
+
+
+function plotArea(data) {
+    x.domain(d3.extent(data, d => d.date));
+    y.domain([0, d3.max(data, d => d.volume)]);
+
+    svg.append('path')
+        .data([data])
+        .attr('class', 'area')
+        .attr('d', area);
+
+    svg.append('path')
+        .data([data])
+        .attr('class', 'line')
+        .attr('d', valueline);
+
+    svg.append('g')
+        .attr("transform", `translate(0, ${height})`)
+        .call(d3.axisBottom(x));
+
+    svg.append('g')
+        .call(d3.axisLeft(y));
+}