>soren hale — frontend developer
// Case study
Tidewater Charts
A charting layer that pans through a million points without dropping a frame.
Pan and zoom at 1M pointsfrom 12 fps→to 60 fps
- Client
- Tidewater
- Year
- 2023
- Role
- Frontend and WebGL developer
- Kind
- Experiment
The problem
Tidewater's analysts explore sensor data from offshore wind farms. The old SVG charts gave up at around twenty thousand points.
The approach
- Lines and scatter plots draw on the GPU; axes, labels and tooltips stay in the DOM so they remain selectable and readable by a screen reader.
- Data is decimated per zoom level in a worker, with the raw points fetched only when the user gets close.
- Every chart has a table view with the same data, one key press away.
The result
A million points pan at a steady 60 frames a second on a three year old laptop. Analysts stopped exporting to spreadsheets to look at a week of data.
Built with
TypeScriptWebGLreglWeb Workers
// Case study
Tidewater Charts
A charting layer that pans through a million points without dropping a frame.
Pan and zoom at 1M pointsfrom 12 fps→to 60 fps
- Client
- Tidewater
- Year
- 2023
- Role
- Frontend and WebGL developer
- Kind
- Experiment
The problem
Tidewater's analysts explore sensor data from offshore wind farms. The old SVG charts gave up at around twenty thousand points.
The approach
- Lines and scatter plots draw on the GPU; axes, labels and tooltips stay in the DOM so they remain selectable and readable by a screen reader.
- Data is decimated per zoom level in a worker, with the raw points fetched only when the user gets close.
- Every chart has a table view with the same data, one key press away.
The result
A million points pan at a steady 60 frames a second on a three year old laptop. Analysts stopped exporting to spreadsheets to look at a week of data.
Built with
TypeScriptWebGLreglWeb Workers
// Case study
Tidewater Charts
A charting layer that pans through a million points without dropping a frame.
Pan and zoom at 1M pointsfrom 12 fps→to 60 fps
- Client
- Tidewater
- Year
- 2023
- Role
- Frontend and WebGL developer
- Kind
- Experiment
The problem
Tidewater's analysts explore sensor data from offshore wind farms. The old SVG charts gave up at around twenty thousand points.
The approach
- Lines and scatter plots draw on the GPU; axes, labels and tooltips stay in the DOM so they remain selectable and readable by a screen reader.
- Data is decimated per zoom level in a worker, with the raw points fetched only when the user gets close.
- Every chart has a table view with the same data, one key press away.
The result
A million points pan at a steady 60 frames a second on a three year old laptop. Analysts stopped exporting to spreadsheets to look at a week of data.
Built with
TypeScriptWebGLreglWeb Workers
// Start a project
Tell me what you are building.
Three quick picks so the first reply is useful. You finish the message on the contact page.
// Start a project
Tell me what you are building.
Three quick picks so the first reply is useful. You finish the message on the contact page.
// Start a project
Tell me what you are building.
Three quick picks so the first reply is useful. You finish the message on the contact page.