Dataliths Storybook Github FAQ

Simple React components to create
beautiful data visualizations.

Datalith is a collection of clean, lightweight and easily customizable components.

The purpose is to provide an easy way to integrate custom data visualizations in any React project.
The components were designed with simplicity in mind,
the dataset is the only requirement.

Typed React components for optimal DX

All of the components are statically typed.
If you use Typescript you can get live type checking with intellisense
as well as the awesome tooling ts comes with.

Simple, shared API

Each React component share a common set of configurations,
as well as data accessor functions provided as props, to associate
each chart feature with the correct data point.

Easy to integrate, customize, and enhance

The scoped package install allows to only plug in the packages you need for your project.
The charts are quickly customizable, and may be easily extended with additional svg elements (e.g. to add axis or labels) using the additionalElements prop.


  <Flower
    class="flower" 
    data={data} 
    padding={50} 
    value={d => d.value} 
    fill={d => d.color} 
  />


  <BarCode
    class="barcode" 
    data={data} 
    value={d => d.value} 
    fill={d => d.color} 
  />


  <Gridmap
    class="gridmap" 
    data={data} 
    featureCollection={geojson}
    projection={geoNaturalEarth1()}
    side={5}
    coords={d => [d.lng, d.lat]}
    value={d => d.value} 
    fill={d => d.color} 
    customRender={
      ({ x, y, value, datum }, props) => 
        <Element {..props} />
    }
  />


  <Shutter
    class="shutter" 
    data={data} 
    radiusOuter={100} 
    radiusInner={80}
    fill={d => d.color} 
    stroke={d => d.colorSecondary} 
  />


  <Pixelmap
    class="pixelmap" 
    data={data} 
    featureCollection={geojson}
    projection={geoAlbersUsa()}
    side={5}
    coords={d => [d.lng, d.lat]}
    value={d => d.value} 
    fill={d => d.color} 
  />


  <Spiral
    class="spiral" 
    data={data} 
    value={d => d.value} 
    fill={d => d.color} 
  />


  <Pack
    class="pack" 
    data={data} 
    value={d => d.value} 
    fill={d => d.color} 
  />


  <Dotmap
    class="dotmap" 
    data={data} 
    featureCollection={geojson}
    projection={geoNaturalEarth1()}
    side={5}
    coords={d => [d.lng, d.lat]}
    value={d => d.value} 
    fill={d => d.color} 
  />


  <Ripple
    class="ripple" 
    data={data} 
    value={d => d.value} 
    fill={d => d.color} 
  />


  <Hexmap
    class="hexmap" 
    data={data} 
    featureCollection={geojson}
    projection={geoOrthographic()}
    side={5}
    coords={d => [d.lng, d.lat]}
    value={d => d.value} 
    fill={d => d.color} 
  />

</> with ♥ by Luca Falasco