97 lines
2.4 KiB
JavaScript
97 lines
2.4 KiB
JavaScript
let intro_svg;
|
|
|
|
function make_intro_svg() {
|
|
"use strict";
|
|
let maxValue;
|
|
let yAxis, yAxisG, dataArea, dataLine;
|
|
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) });
|
|
|
|
intro_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('volume.csv', function (d) {
|
|
return {
|
|
date: new Date(d.date),
|
|
volume: +d.volume, // make sure volume is numeric
|
|
}
|
|
}, function (d) {
|
|
plotArea(d);
|
|
});
|
|
|
|
|
|
function plotArea(data) {
|
|
"use strict";
|
|
x.domain(d3.extent(data, d => d.date));
|
|
maxValue = d3.max(data, d=> d.volume);
|
|
y.domain([0, 1000000000]);
|
|
|
|
dataArea = intro_svg.append('path')
|
|
.data([data])
|
|
.attr('class', 'area')
|
|
.attr('d', area);
|
|
|
|
dataLine = intro_svg.append('path')
|
|
.data([data])
|
|
.attr('class', 'line')
|
|
.attr('d', valueline);
|
|
|
|
intro_svg.append('g')
|
|
.attr("transform", `translate(0, ${height})`)
|
|
.call(d3.axisBottom(x));
|
|
|
|
yAxis = d3.axisLeft(y);
|
|
|
|
yAxisG = intro_svg.append('g')
|
|
.attr('class', 'yaxis')
|
|
.call(yAxis);
|
|
}
|
|
|
|
d3.select("#growth1").on('impress:stepenter', function () {
|
|
y.domain([0, 1000000000]);
|
|
|
|
yAxisG
|
|
.call(yAxis);
|
|
dataArea
|
|
.attr('d', yAxis);
|
|
dataLine
|
|
.attr('d', yAxis);
|
|
});
|
|
|
|
d3.select("#growth").on('impress:stepenter', function () {
|
|
y.domain([0, maxValue]);
|
|
|
|
yAxisG
|
|
.call(yAxis);
|
|
dataArea
|
|
.attr('d', yAxis);
|
|
dataLine
|
|
.attr('d', yAxis);
|
|
});
|
|
}
|
|
|
|
make_intro_svg(); |