The avatar for @universalcharacter
Jack Kausch
Public
Edited
Oct 20, 2022
Fork of Spinning wheels
•
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mutable counter4 = 0;
Insert cell
mutable counter7 = 0;
Insert cell
mutable counter6 = 0;
Insert cell
mutable counter3 = 0;
Insert cell
sheet = { // this is a JS Array of Objects; the key-value pairs consist of the column headers and the cell data
let sheet =[];
const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vSuH6U3a_e5HJxxguAJjVuNgxyI5wCRd-24f_RyaFE1FeC8HUBFmZVmhcqG74OdO_vPJxGeuwC_s0nh/pub?gid=1094830764&single=true&output=csv";
const spreadsheet = await d3.csv(url).then(data => data.forEach(d => sheet.push(d))); // d3.csv returns a Promise
return sheet;
}
Insert cell
sheetHeadings = Object.keys(sheet[0])
Insert cell
html`
<link type="text/css" href="https://gist.github.com/JackKausch/5cd67eab39732db672b1c29abb617b28" rel="stylesheet">
`
Insert cell
import { AngleSlider } from '@tomktjemsland/inputs'
Insert cell
//import { HorizontalStack } from '@tomktjemsland/inputs'
Insert cell
HorizontalStack = (settings = {}) => {
if (settings.modules === undefined) return;
const modules = settings.modules;
const padding = settings.padding === undefined ? 0 : settings.padding;
const border = settings.border === undefined ? false : settings.border;
const root = d3.create('div')
.style('display', 'flex')
.style('flex-direction', 'row')
.style('margin-right', '200px');
for (let i = 0; i < modules.length; i++) {
const m = modules[i];
if (i != 0) m.style.marginLeft = `${padding / 2}px`;
m.style.marginRight = `${padding / 2}px`;
root.node().appendChild(m);
if (border && i < modules.length - 1) {
root.append('div')
.style('padding-right', '35px')
.style('margin-left', '35px')
.style('border-left', '1px solid Grey')
.style('margin-bottom', '5px')
}
}
return root.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mutable counter = 0;
Insert cell
mutable counter5 = 0;
Insert cell
Insert cell
import { analytics } from '@chrispahm/simple-privacy-friendly-web-analytics'
Insert cell
analytics(html`<a href>`.href)
Insert cell
mutable counter2 = 0;
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more