Datalith is a collection of clean, lightweight and easily customizable React components for data visualization.

The purpose is to provide an easy way to integrate custom data visualizations in any React project. The components were disigned with simplicity in mind, so the only thing required for the charts to work is the actual data.

Some key features:

FAQ
  
    <Flower 
      class="flower" 
      data={data} 
      padding={50} 
      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 in TS by Luca Falasco