Published
Edited
Jan 21, 2022
Importers
combinedDataRaw = d3.csv("https://docs.google.com/spreadsheets/d/e/2PACX-1vQ3DZpMeuAoQjS6Uvsh3JkIA3JDavxFQtTlCzrIGAxp1bWgGNW0ydi3AdOsejkYlPo4pmu3dskigvVS/pub?gid=1918821880&single=true&output=csv")
Object.keys(combinedDataRaw[2])
combinedData = {
let retObj = [];
let keys = Object.keys(combinedDataRaw[1]);
combinedDataRaw.forEach(obj => {
for (let i = 1; i < keys.length; i++) {
retObj.push({
// date: obj["Date"],
date: new Date(parseInt("20" + obj.Date.split("-")[1]), months.indexOf(obj.Date.split("-")[0])),
volume: Number(obj[keys[i]]),
division: keys[i]
});
}
});
return retObj;
}
function oneToMany(arr) {
let retObj = [];
let keys = Object.keys(arr[0]);
arr.forEach(obj => {
for (let i = 1; i < keys.length; i++) {
retObj.push({
date: new Date(parseInt("20" + obj.Date.split("-")[1]), months.indexOf(obj.Date.split("-")[0])),
division: keys[i],
value: Number(obj[keys[i]])
});
}
});
return retObj;
}
oneToMany(combinedDataRaw)
infrastructureData = d3.csv('https://docs.google.com/spreadsheets/d/e/2PACX-1vQ3DZpMeuAoQjS6Uvsh3JkIA3JDavxFQtTlCzrIGAxp1bWgGNW0ydi3AdOsejkYlPo4pmu3dskigvVS/pub?gid=936813344&single=true&output=csv')
oneToMany(infrastructureData)
cardsVolRaw = d3.csv("https://docs.google.com/spreadsheets/d/e/2PACX-1vQ3DZpMeuAoQjS6Uvsh3JkIA3JDavxFQtTlCzrIGAxp1bWgGNW0ydi3AdOsejkYlPo4pmu3dskigvVS/pub?gid=490584529&single=true&output=csv")
cardsVal = d3.csv("https://docs.google.com/spreadsheets/d/e/2PACX-1vQ3DZpMeuAoQjS6Uvsh3JkIA3JDavxFQtTlCzrIGAxp1bWgGNW0ydi3AdOsejkYlPo4pmu3dskigvVS/pub?gid=111967515&single=true&output=csv")
oneToMany(cardsVal)
monthlyData = d3.csv("https://docs.google.com/spreadsheets/d/e/2PACX-1vQ3DZpMeuAoQjS6Uvsh3JkIA3JDavxFQtTlCzrIGAxp1bWgGNW0ydi3AdOsejkYlPo4pmu3dskigvVS/pub?gid=0&single=true&output=csv", (d) => {
return {
date: new Date(parseInt("20" + d.Date.split("-")[1]), months.indexOf(d.Date.split("-")[0])),
volume: Number(d.Volume),
value: Number(d.Value)
}
});
appsData = d3.csv("https://docs.google.com/spreadsheets/d/e/2PACX-1vQ3DZpMeuAoQjS6Uvsh3JkIA3JDavxFQtTlCzrIGAxp1bWgGNW0ydi3AdOsejkYlPo4pmu3dskigvVS/pub?gid=747990111&single=true&output=csv", (d) => {
return {
date: new Date(parseInt("20" + d.Date.split("-")[1]), months.indexOf(d.Date.split("-")[0])+1),
app: d.App,
volume: Number(d.Volume),
value: Number(d.Value)
}
})
groups = d3.groups(appsData, d => d.date)
newGroups = groups.map(a => {
let valSum = a[1].reduce((a, b) => a + b.value, 0);
return (a[1].map(o => Object.assign(o, {percentageValue: (o.value/valSum)*100})).sort((a, b) => b.percentageValue - a.percentageValue)).slice(0, 8);
}).flat()
month = d3.csv("https://docs.google.com/spreadsheets/d/e/2PACX-1vQ3DZpMeuAoQjS6Uvsh3JkIA3JDavxFQtTlCzrIGAxp1bWgGNW0ydi3AdOsejkYlPo4pmu3dskigvVS/pub?gid=0&single=true&output=csv", d => {
let date = new Date(parseInt("20" + d.Date.split("-")[1]), months.indexOf(d.Date.split("-")[0])+1);
return "" + (date.getMonth()+1) + " " + date.getFullYear();
})
months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
import {LineChart as MultipleLineChart} from "@guypursey/line-chart-multiple-series-with-tooltip"
import {LineChart} from "@d3/line-with-tooltip"
import {LineChart as MultiLine} from "43b086d3a2a7a8f4"
import {timeline, stylesheet} from "@99percentcocoa/simple-timeline"
function colorFunction(z) {
return d3.schemeBlues[z];
}
import {vl} from "@vega/vega-lite-api"
import {StackedAreaChart} from "@d3/stacked-area-chart"
import {Swatches} from "@d3/color-legend"
function uniqueArray(arr) {
return arr.filter((value, index, self) => self.indexOf(value) === index);
}
function sortNumArray(arr) {
return arr.sort((a, b) => a - b);
}
function topNValues(arr, num) {
return arr.filter(d => d <= sortNumArray(uniqueArray(arr))[num-1]);
}
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.
