From 336005a0ef94fcf5de14a14397fdd0914f3346be Mon Sep 17 00:00:00 2001 From: "@CAYdenberg" Date: Tue, 28 Sep 2021 11:49:21 -0700 Subject: [PATCH] Rewrite the Motivation section of the docs --- website/content/components/Hero.js | 9 +++++++++ website/content/core-concepts.mdx | 2 +- website/content/index.mdx | 18 ++++++++++++------ 3 files changed, 22 insertions(+), 7 deletions(-) create mode 100644 website/content/components/Hero.js diff --git a/website/content/components/Hero.js b/website/content/components/Hero.js new file mode 100644 index 0000000..ae3ffdb --- /dev/null +++ b/website/content/components/Hero.js @@ -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; +`; diff --git a/website/content/core-concepts.mdx b/website/content/core-concepts.mdx index 92a0675..05fe1eb 100644 --- a/website/content/core-concepts.mdx +++ b/website/content/core-concepts.mdx @@ -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. diff --git a/website/content/index.mdx b/website/content/index.mdx index 2362e36..631aed8 100644 --- a/website/content/index.mdx +++ b/website/content/index.mdx @@ -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 +Composable, responsive, React-based data visualization -## 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