Skip to content

Commit

Permalink
Rewrite the Motivation section of the docs
Browse files Browse the repository at this point in the history
  • Loading branch information
CAYdenberg committed Sep 28, 2021
1 parent ecae2cc commit 47f723b
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 7 deletions.
9 changes: 9 additions & 0 deletions website/content/components/Hero.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import styled from '@emotion/styled';

export default styled('p')`
font-family: Roboto, sans-serif;
font-style: italic;
font-size: 1.5rem;
color: rgb(59, 69, 78);
margin-bottom: 1.5em;
`;
2 changes: 1 addition & 1 deletion website/content/core-concepts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ When specifying distance along an axis, sometimes we want to think in terms of a

What if you simply don't have enough space for your data? We are working in a programmatic medium, and can solve this through interaction! In other words, the chart `view` can be updated to give users access to data which isn't initially visible.

Specifically, an `onGesture` prop accepts a callback which will report the extent to which the view _should_ be moved in response to pinch, swipe, drag and other move events. (Hypocube aims to be as declarative as possible, and _won't automatically update the view_: but hooks are provided as addons that respond to these callbacks with state updates and animations).
Specifically, an `onGesture` prop accepts a callback which will report the extent to which the view _should_ be moved in response to pinch, swipe, drag and other move events. (Hypocube aims to be as declarative as possible, and _won't automatically update the view_: but hooks are provided as addons that respond to these callbacks with state updates and animations). This is possible largely to the fabulous [@use-gesture](https://use-gesture.netlify.app/) library.

Callbacks can also be passed to most chart elements to produce other types of interactivity, for example clicking/tapping on a data point. Hypocube uses [pointer events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) to simplify the inconsistencies between mouse and touch devices. Event handlers are called with coordinates that are _semantically meaningful in the data_, not (just) the raw coordinates of the event.

Expand Down
18 changes: 12 additions & 6 deletions website/content/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,25 @@ metaDescription: 'Composable, responsive, React-based data visualization'
---

import { HomepageDemoContainer } from '../../sandbox/demo';
import Hero from './components/Hero';

Composable, responsive, React-based data visualization
<Hero>Composable, responsive, React-based data visualization</Hero>

<HomepageDemoContainer />

## Motivation
## Why?

The visual presentation of quantitative data has always been a challenge on the web, and how to adapt to the world of responsive design is still unclear. During the COVID-19 pandemic, many of us spent too much time consulting graphs and charts that were either hard to use, misleading/inaccurate, or both. The smaller the screen, the more frustrating to the user.
Adapting a chart to a screen of unknown size might seem an impossible task - but interactivity gives us an added dimension to create data experiences which are just as content-rich, and just as accurate, regardless of the pixels available.
I've worked with a few great, battle-tested React data-vis libraries, including [Formidable](https://github.com/FormidableLabs/victory), [Nivo](https://github.com/plouc/nivo) and [React-Vis](https://github.com/uber/react-vis). While these are often enough to produce beautiful charts with very few lines of code, they have limitations when attempting to integrate with more complicated data-centered apps.

Hypocube is partly a distillation of a few years publishing scientific papers, and a few more as a freelance frontend developer serving research organizations. It is lessons learned from working at the interface of science and the web. It is also a passion project I started in the dark pandemic winter of 2020-21. In a time when we've never had access to more data, how we present that data matters more than ever.
Some of the things I struggled with were:

-- Casey Ydenberg
- applying responsive design principles to alter text or visual design depending on screen size
- rescaling axes in response to user interaction or container size
- supporting non-mouse events that modern users tend to expect, like swipe and pinch gestures
- seemlessly interconverting between SVG (server-side rendering!) and canvas (animations! performance!)
- using component-centric engineering to mix chart types or creates new types

Hypocube introduces a layer of indirection between the "data", as mapped on a Cartesian plane, and the "design", authored in units of pixels. A base Chart component manages the scaling and passes it down via context. Hypocube uses several parts of [d3](https://github.com/d3/d3) to manipulate drawing instructions, but takes a React-based approach to managing the DOM - and the canvas context.

## Quick Start

Expand Down

0 comments on commit 47f723b

Please sign in to comment.