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 requirement is the actual data.

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