Skip to content

Instantly share code, notes, and snippets.

@1wheel
1wheel / README.md
Last active May 28, 2023 04:58
Hot Reloading JS in Colab

Editing front-end code in colab is tricky - you can't keep the code on the same screen as the output and you're stuck typing in a giant text block:

This page shows how to set up a better, hot reloading dev environment. Code is edited locally, uploaded to a public server and polled for changes in the colab iframe.

First, add a python function for js to call and embed some HTML in the colab:

import IPython
@1wheel
1wheel / README.md
Last active May 28, 2023 04:58
english-exams
@1wheel
1wheel / README.md
Last active May 28, 2023 04:58
textbox-outline
@1wheel
1wheel / README.md
Last active May 28, 2023 04:55
2020-stock-returns

Based on a McKinsey chart.

I've added a brush and removed the bar height transition so you can scrub through the time series a little faster. It's a little jittery; adding a bit of momentum to the y position might help.

Closing prices from Google Finance, dividends and corporate actions might change returns.

@1wheel
1wheel / .block
Last active January 12, 2021 07:11
australian-fires
license: MIT
height: 600
scrolling: no
border: no
@1wheel
1wheel / README.md
Last active May 28, 2023 04:57
linked-hover-phyllotaxis

Small multiple linked hover.

My svelte version.

Rich's solution: "i'd do it this way — having a draw function that gets called with the current points value. that way it will disregard everything else, including hoveredPointIndex etc.""

@1wheel
1wheel / README.md
Last active May 28, 2023 04:58
column-render

Two ways of drawing a line chart with lots of points:

  • chained lineTo commands
  • grouping points by the x position

Rendering points in a column is about twice as fast with 40k points and three times as fast with a million points. It also gives better control over the anti aliasing blur.

On macOS chrome, the lineTo version also has a rendering bug. The min y value is 0, but points are drawn far above the top grid line.

context

@1wheel
1wheel / README.md
Last active May 28, 2023 04:58
html-line-chart

HTML only line chart using clip-path.

I don't see an easy way to get a uniform stroke-width without doing some math