RickRongen/DV-Visualisation
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added bar chart and fixed some stuff

Browse Source
This commit is contained in:
Rick Rongen
2017-12-20 14:56:09 +01:00
parent 45b2d6819d
commit 794f957a40
9 changed files with 346 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
index.js
View File

@@ -1,5 +1,11 @@
let intro_svg;
function type(d, i, columns) {
for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
d.total = t;
return d;
}
function make_intro_svg() {
"use strict";
let maxValue;
@@ -8,11 +14,11 @@ function make_intro_svg() {
top: 20,
right: 20,
bottom: 30,
left: 50
left: 200
};
let width = 960 - margin.left - margin.right;
let height = 500 - margin.top - margin.bottom;
let width = 1320 - margin.left - margin.right;
let height = 600 - margin.top - margin.bottom;
let x = d3.scaleTime().range([0, width]);
let y = d3.scaleLinear().range([height, 0]);
@@ -32,8 +38,6 @@ function make_intro_svg() {
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
console.log(x);
d3.csv('volume.csv', function (d) {
return {
date: new Date(d.date),
@@ -48,11 +52,11 @@ function make_intro_svg() {
"use strict";
x.domain(d3.extent(data, d => d.date));
maxValue = d3.max(data, d=> d.volume);
y.domain([0, 1000000000]);
y.domain([0, maxValue]);
dataArea = intro_svg.append('path')
.data([data])
.attr('class', 'area')
.attr('class', 'area hidden')
.attr('d', area);
dataLine = intro_svg.append('path')
@@ -60,6 +64,11 @@ function make_intro_svg() {
.attr('class', 'line')
.attr('d', valueline);
let totalLength = dataArea.node().getTotalLength();
dataLine.attr("stroke-dasharray", totalLength + " " + totalLength).attr("stroke-dashoffset", totalLength);
dataArea.attr("stroke-dasharray", totalLength + " " + totalLength).attr("stroke-dashoffset", totalLength);
intro_svg.append('g')
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x));
@@ -71,27 +80,98 @@ function make_intro_svg() {
.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);
dataLine.transition().ease(d3.easeLinear).duration(10000).attr('stroke-dashoffset', 0)
.on('end', function () {
dataArea.classed('hidden', false);
});
});
}
make_intro_svg();
function make_bar_chart() {
let margin = {top: 20, right: 60, bottom: 60, left: 40};
let width = 1320 - margin.left - margin.right;
let height = 600 - margin.top - margin.bottom;
let svg = d3.select("svg#composition"),
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.attr('width', width + margin.left + margin.bottom)
.attr('height', height + margin.top + margin.bottom);
let x = d3.scaleBand()
.rangeRound([0, width - margin.right])
.padding(0.1)
.align(0.1);
let y = d3.scaleLinear()
.rangeRound([height, 0]);
let z = d3.scaleOrdinal()
.range(["#e6194b", "#3cb44b", "#ffe119", "#0082c8", "#f58231", "#911eb4", "#46f0f0", "#f032e6", "#d2f53c",
"#fabebe", "#008080", "#e6beff", "#aa6e28", "#fffac8", "#800000", "#aaffc3", "#808000", "#ffd8b1",
"#000080", "#808080", "#FFFFFF", "#000000"]);
let stack = d3.stack()
.offset(d3.stackOffsetExpand);
d3.csv("volume_per_coin_per_month.csv", type, function(error, data) {
if (error) throw error;
x.domain(data.map(function(d) { return d.date; }));
z.domain(data.columns.slice(1));
let serie = g.selectAll(".serie")
.data(stack.keys(data.columns.slice(1))(data))
.enter().append("g")
.attr("class", "serie")
.attr("fill", function(d) { return z(d.key); });
serie.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) { return x(d.data.date); })
.attr("y", function(d) { return y(d[1]); })
.attr("height", function(d) { return y(d[0]) - y(d[1]); })
.attr("width", x.bandwidth());
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.attr("y", 0)
.attr("x", 9)
.attr("dy", ".35em")
.attr("transform", "rotate(90)")
.style("text-anchor", "start");
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y).ticks(10, "%"));
let legend = serie.append("g")
.attr("class", "legend")
.attr("transform", function(d) {
d = d[d.length - 1];
return "translate(" + (x(d.data.date) + x.bandwidth()) + "," + ((y(d[0]) + y(d[1])) / 2) + ")";
});
legend.append("line")
.attr("x1", -6)
.attr("x2", 6)
.attr("stroke", "#000");
legend.append("text")
.attr("x", 9)
.attr("dy", "0.35em")
.attr("fill", "#000")
.style("font", "10px sans-serif")
.text(function(d) { return d.key; });
});
}
make_intro_svg();
make_bar_chart();