Published
Edited
Mar 5, 2020
7 stars
mutable videoURL = ""
style = {
let normal = inputs.layout == "Normal"
let cellHeight = normal ? 60 : 50;
let theme = inputs.theme
let antitheme = theme == "white" ? "black" : "white"
let alphaCoeff = theme=="white"? 1 : -1
let common = {
cellHeight : cellHeight,
chartHeight: normal ? 90 : 60,
chartBarMargin: 20,
marginW : 10,
marginH : 12,
sqWidth : cellHeight * 1.3,
themeColor: theme,
antiThemeColor: antitheme,
blockFillColor: "white", // antitheme,
blockWeakTopScale: 0.85,
indicatorLineColor: (theme == "white") ? "red" : "gold",
indicatorLineWidth: (theme == "white") ? 2 : 3,
axisFill: antitheme,
axisStroke: antitheme,
backgroundColor: theme,
timeWidth : normal? cellHeight * 1.6 : cellHeight * 2,
stageWidth : normal? cellHeight * 1.2 : cellHeight * 1.6,
fadeAlphaSource: 0.0,
fadeAlphaTarget: alphaCoeff * 0.3,
defaultBarFillColor: theme,
barAlpha: normal? alphaCoeff * 0.5 : 0,
barTextColor: normal ? "white" : antitheme,
barStrokeColor: normal? null : antitheme,
barArrowWidth: 15,
barArrowWeight: 3,
barArrowStroke: "white",
barOrder: ["stage", "time", "move"]
}
function getHorizontal() {
let sty = {
tickHeight: 5,
tickLargeHeight: 10,
xAxisWidth: 400,
axisFont: 'bold 13px arial',
moveWidth : normal? cellHeight * 4 :cellHeight * 5,
blockWeakBottomScale: normal && inputs.TPS == "Show" ? 0.9 : 0.20,
backgroundColor: theme,
}
sty = Object.assign(common, sty)
let isChartTop = inputs.position == "ChartOnTop"
let axisTop = isChartTop ? margin.top : sty.cellHeight + margin.top + sty.chartBarMargin,
axisBottom = axisTop + sty.chartHeight,
axisLeft = margin.left,
axisRight = axisLeft + sty.xAxisWidth;
sty.axisStyle = {
top: axisTop, bottom: axisBottom, left: axisLeft, right: axisRight
}
sty.barLeft = margin.left // sty.timeWidth
sty.barTop = isChartTop ? axisBottom + sty.chartBarMargin : margin.top
return sty
}
function getVertical() {
let sty = {
tickHeight: 3,
tickLargeHeight: 7,
xAxisWidth: 250,
axisFont: '11px arial',
moveWidth : normal? cellHeight * 4.5 :cellHeight * 5.5,
blockWeakBottomScale: (normal && inputs.TPS == "Show") ? 0.6 : 0.1,
axisFill: theme == "white" ? "#333" : "white",
axisStroke: theme == "white" ? "#333" : "white",
}
sty = Object.assign(common, sty)
// notice here x, y are flipped
let axisTop = margin.left * 0.35,
axisBottom = axisTop + sty.chartHeight,
axisLeft = margin.top, //+ sty.cellHeight,
axisRight = axisLeft + sty.xAxisWidth;
sty.axisStyle = {
top: axisTop, bottom: axisBottom, left: axisLeft, right: axisRight
}
let isChartTop = inputs.position == "ChartOnTop"
sty.barLeft = sty.chartHeight + axisTop + sty.chartBarMargin * 0.5;
sty.barTop = isChartTop ? axisRight + sty.chartBarMargin : margin.top * 0.2
sty.barLeft += parseInt(barSlider.x) | 0
sty.barTop += parseInt(barSlider.y) | 0
return sty
}
return inputs.direction == "Horizontal" ? getHorizontal() : getVertical()
}
// viewof background_file = html`<input type=file>` Files.url(background_file);
valueOf = function(x, d) {
if (typeof x === "function") {
return x(d)
} else {
return x;
}
}
canvasScale = parseInt( inputs.canvasScale )
getCanvasSetup = () => {
switch (inputs.canvasSize) {
case "1x": return [400, 640];
case "2x": return [800, 1280];
case "1080p": return [1080, 1920]
}
}
mutable replayCounter = 0
function DOMdownload(value, name = "untitled", label = "Save") {
const a = document.createElement("a");
const b = a.appendChild(document.createElement("button"))
b.textContent = label;
b.style = "font-size : 20px; width: 100px;"
a.download = name;
async function reset() {
await new Promise(requestAnimationFrame);
URL.revokeObjectURL(a.href);
a.removeAttribute("href");
b.textContent = label;
b.disabled = false;
}
a.onclick = async event => {
b.disabled = true;
if (a.href) return reset(); // Already saved.
b.textContent = "Saving…";
try {
const object = await (typeof value === "function" ? value() : value);
b.textContent = "Download";
a.href = URL.createObjectURL(object); // eslint-disable-line require-atomic-updates
} catch (ignore) {
b.textContent = label;
}
if (event.eventPhase) return reset(); // Already downloaded.
b.disabled = false;
};
return a;
}
import { copy } from "@mbostock/copy-to-clipboard"
chroma = require('chroma-js')
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.
