The avatar for @martien
Martien van Steenbergen
Wise Fool. Visioneer.
Published
Edited
May 6, 2019
Importers
Comments locked
6 stars
Industrial
Food Prices of India, 1994–2021Large Food Retailer Investments By Industry 2010-2021Under The InfluenceFood AccessNigeria Household: Amount spent on foodEstimating the environmental impacts of 57,000 food products, part 2Food Snobs eat at Oleana, Cambridge MAVisualizing Worldwide IPC Food Security DataZoomable Sunburst for food imports in the US from 2010 to 2017.Food supply chainLet's talk about seeds!Regional crop yields in GermanyThe 10 Most Important CropsInteractive Exploration of Wine Quality and ValuationExploring Livestock Data around the world 🐓🐑🐄Influence of soil quality and soil moisture index on crop yieldsForest Area By Selected Countries Since 1990
Magic Balls Factory
In store displays make a significant impact on the sale of Honey Nut CheeriosTransparency in Programmatic Advertising MarketplacesAnalysis of two cereals owned by the same brand display unique characteristics and periods of success.F1 Drivers 1997 - 2023Bar Chart Race, ExplainedF1 Constructor Standings 2010-2019Asia’s Regenerative Energy Future2022 Q2 PROFIT: 🛢 vs. 👨‍💻🛢 Oil SpillsHow flights between Europe and Eastern Asia got disruptedData Visualization - Impact of Covid on US Aviation (year 2020)Final Project: What makes an airline succesful?What's the deal with airline fares?2020/W16: Food: Greenhouse Gas Emission across supply chainInventory Manager -> Product alertEU Fishing FlowWarehouse Visualization with DataVisualVisualizing wind turbines in 3D using threebox
Also listed in…
Magic Balls Factory
Showroom
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
// viewof bag = {
// let e = html`<div
// tabIndex=1
// width="100px"
// style="border: 1px solid PowderBlue; border-radius: 4px; background-color: SeaShell">
// Click here and keep focus. ‘n’: new game; ‘i’: start item; ‘o’: finish item; ←, →: loop through games; ‘⌫’: delete game.
// </div>`;
// let bag = new Bag(sampleGameBag, "ACME, Inc.", 20);
// e.value = bag;
// e.addEventListener("keyup", evt => {
// const game = bag.game[mutable gameIndex]; // Remember, it’s a games bag, so this is an array of games.
// keystroke(game, evt.key);
// e.dispatchEvent(new CustomEvent("input"));
// });
// return e;

// function keystroke(game, key) {
// console.log(key);
// console.log(game);
// switch(key) {
// case "Escape":
// case "n": // Append new game and make it current.
// console.log(bag.game);
// bag.game.push(new Game(toDo, game.length + 1));
// mutable gameIndex = game.length - 1;
// game.startTime = tock();
// console.log(game);
// break;
// case "Backspace": // Delete the current game and make the next one current. Wrap around if needed.
// if (game.length > 0) game.splice(mutable gameIndex, 1);
// if (mutable gameIndex == game.length && game.length > 0) mutable gameIndex = game.length - 1;
// break;
// case "i":
// if (game && game.doing.hello.length == 0) { // first item ever for this game
// game.startTime = tock();
// }
// advance(game, game.todo, game.doing)
// break;
// case "o": // Another ka-ching! Hence another cycle time.
// // n can be incremented by advance(), so n here is the current number of ka-chings
// let n = game.kaching.hello.length;
// if (advance(game, game.doing, game.kaching)) {
// game.leadtimes.push(
// {
// hello: elapsed(game),
// // strict FIFO, even when balls restart
// leadtime: game.kaching.hello[n] - game.doing.hello[n]
// }
// );
// let l = game.leadtimes.map(k => k.leadtime); //. List of all leadtimes in this game.
// game.leadtime = +d3.mean(l).toFixed(0);
// if (l.length > 1) game.deviation = +d3.deviation(l).toFixed(0); // d3.deviation only meaningful with >1
// game.throughput = game ? game.kaching.hello.length / (game.playTime) : 0;
// };
// if (game.leadtimes.length > 0 && game.leadtimes.slice(-1)[0].leadtime > bag.maxLeadTime)
// bag.maxLeadTime = game.leadtimes.slice(-1)[0].leadtime;
// break;
// case "ArrowRight":
// mutable gameIndex = switchGame(mutable gameIndex, bag.game.length - 1, +1);
// // game = bag.game[mutable gameIndex];
// console.log(game);
// break;
// case "ArrowLeft":
// mutable gameIndex = switchGame(mutable gameIndex, bag.game.length - 1, -1);
// break;
// default:
// break;
// }

// function advance(game, from, to) {
// // Only advance an item when there is something to advance.
// let validMove = game && from.wip > 0 && game.transactions < 2 * toDo;
// if (validMove) {
// from.wip--;
// to.wip++;
// game.transactions++;
// game.playTime = tock() - game.startTime;
// game.finishTime = tock();
// let z = Math.ceil((tock() - mutable startTime) / 1000);
// if (z > mutable maxPlayTime) mutable maxPlayTime = z;
// to.hello.push(elapsed(game));
// }
// return validMove;
// }
// function switchGame(i, m, d) {
// let z = i + d;
// if (z > m) z = 0;
// if (z < 0) z = m;
// return z;
// }
// }
// }
Insert cell
// viewof max = slider({
// min: 0,
// max: 10,
// step: 1,
// value: 1
// })
Insert cell
Insert cell
Insert cell
panel = panel1
Insert cell
panel1 = {
const s = spel + 1;
return [
[
{
title: `Cumulative Flow ${s}`,
explanation:
"quantity of work in a given state, showing arrivals, time in queue, quantity in queue, and departure",
// renderer: cumulativeFlowDiagram,
painter: cfd,
color: palette[0]
},
{
title: `Metrics ${s}`,
explanation: "basic characteristics of the process",
// renderer: metrics,
painter: metriek,
color: palette[1]
}
],
[
{
title: `Run ${s}`,
explanation:
"a scatter plot of leadtimes plotted over time to find trends, patterns, and outliers in the process",
// renderer: runChart,
painter: run,
color: palette[2]
},
{
title: `Leadtime Distribution ${s}`,
explanation:
"time between the placement of an order or request and its delivery (someone’s need is met)",
// renderer: leadtimeDistributionChart,
painter: leadtime,
color: palette[3]
}
]
];
}
Insert cell
panel2 = [[panel1[0][0], panel1[0][1]]]
Insert cell
panel3 = [
[panel1[0][0], panel1[0][1]],
[panel1[1][0]],
[panel1[1][1], panel1[1][0], panel1[0][0], panel1[1][1]]
]
Insert cell
{
const dim = d3.max(panel3.map(k => k.length));
const w = canvasGridWidth / dim;
const h = (height / dim) * panel3.length;
return [w, h, dim, panel3.length];
}
Insert cell
Insert cell
import {gcd} from "@martien/grid"
Insert cell
import {lcm} from "@martien/grid"
Insert cell
Insert cell
Insert cell
Insert cell
bunch = [] //JSON.parse(await Files.text(bagFile))
Insert cell
// bunch.push(JSON.parse(await Files.text(bagFile)))
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
singleFullSizedChart(demoBag, demoBag.game[gameIndex], panel[0][0])
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
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
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

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