🎩 React-based charting and component library for data visualization
Branch: master
Clone or download
lorenries Publish
 - @newamerica/data-table@0.0.6
 - @newamerica/storybook@0.0.8
Latest commit 8bea13a Feb 20, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets monorepo Jan 19, 2019
packages Publish Feb 20, 2019
scripts [docs] update docs Jan 31, 2019
.gitignore monorepo Jan 19, 2019
LICENSE monorepo Jan 19, 2019
README.md [docs] update docs Jan 31, 2019
lerna.json monorepo Jan 19, 2019
package.json start working on docs Jan 29, 2019


Teddy Logo


Teddy is a library of charts, maps, and user interface components for data visualization, built with React and vx.

Demo and examples



import { Chart, Bar } from "@newamerica/charts";
import "@newamerica/charts/dist/styles.css";

const MyChart = () => (
    renderTooltip={({ datum }) => <div>{datum.value}</div>}
    {({ width, height, handleMouseMove, handleMouseLeave }) => (
        x={d => d.x}
        y={d => +d.y}

Packages and docs

More charts and documentation coming soon

Charts (docs)

npm install --save @newamerica/charts
  • Bar
  • HorizontalBar
  • HorizontalStackedBar
  • VerticalGroupedBar
  • Line
  • Scatterplot

Maps (docs)

npm install --save @newamerica/maps
  • Pindrop
  • Choropleth
  • Cartogram
  • Hexgrid (coming soon)

Data Table (docs)

npm install --save @newamerica/data-table
  • DataTable
  • DataTableWithSearch


npm install --save @newamerica/timeline
  • Timeline

Components (docs)

npm install --save @newamerica/components
  • ButtonGroup
  • CheckboxGroup
  • Search
  • Select
  • Slider
  • Toggle

Meta (docs)

npm install --save @newamerica/meta
  • ChartContainer
  • Title
  • Description
  • Source

To do

  • add prop type checks to all packages
  • generate documentation from prop types
  • add mobile touch events for tooltip interactions
  • project website
  • improve accessibility across packages, especially for UI components


Clone this repo:

git clone https://github.com/newamericafoundation/teddy.git

Install lerna globally:

npm i -g lerna

Bootstrap all packages. This installs package dependencies (equivalent to npm install in every package folder), but hoists dependencies required by multiple packages up to the top level node_modules. It also symlinks @newamerica dependencies to that package's packages/<PACKAGE>/dist folder.

lerna bootstrap --hoist

To publish new package versions to npm:

lerna publish

Local development

Watch file changes in all packages and create development builds. This runs rollup -c -w --environment BUILD:development inside of every package:

lerna run start --parallel

If you just want to work on one or a couple packages, run something like this instead (it'll be a bit lighter on your computer, because it won't spawn separate subprocesses to watch/build every single package).

lerna run start --parallel --scope @newamerica/charts @newamerica/maps

Now you can start storybook to develop charts/maps/components locally. Packages will be rebuilt automatically on file changes and storybook will hot reload those changes. Go to packages/storybook and run:

npm run storybook


To generate documentation from component prop-types, run this from the root of the repo, or run npm run docs in an individual package folder:

lerna run docs