{"id":15760604,"url":"https://github.com/lucafalasco/datalith","last_synced_at":"2025-09-08T18:39:43.152Z","repository":{"id":39225845,"uuid":"178687148","full_name":"lucafalasco/datalith","owner":"lucafalasco","description":"Simple, batteries included, components to build beautiful data visualizations","archived":false,"fork":false,"pushed_at":"2024-06-12T12:58:02.000Z","size":12507,"stargazers_count":31,"open_issues_count":7,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-06T14:05:30.535Z","etag":null,"topics":["charts","d3","data-visualization","dataviz","dataviz-tools","react","typescript"],"latest_commit_sha":null,"homepage":"https://datalith.xyz","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lucafalasco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://paypal.me/lucafalasco"]}},"created_at":"2019-03-31T12:47:34.000Z","updated_at":"2024-06-12T12:58:05.000Z","dependencies_parsed_at":"2024-01-15T17:39:54.767Z","dependency_job_id":"91783beb-0358-4d5e-b3e6-1d03b0abc911","html_url":"https://github.com/lucafalasco/datalith","commit_stats":{"total_commits":222,"total_committers":3,"mean_commits":74.0,"dds":"0.43243243243243246","last_synced_commit":"f3a304eadb1d2ff7220c93bcf48295e8c81f3a60"},"previous_names":["lucafalasco/vyz"],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucafalasco%2Fdatalith","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucafalasco%2Fdatalith/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucafalasco%2Fdatalith/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucafalasco%2Fdatalith/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lucafalasco","download_url":"https://codeload.github.com/lucafalasco/datalith/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248639195,"owners_count":21137798,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["charts","d3","data-visualization","dataviz","dataviz-tools","react","typescript"],"created_at":"2024-10-04T10:59:11.933Z","updated_at":"2025-04-12T22:28:14.372Z","avatar_url":"https://github.com/lucafalasco.png","language":"TypeScript","funding_links":["https://paypal.me/lucafalasco"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/lucafalasco/datalith/master/assets/logo.svg?sanitize=true\" width=\"180px\"/\u003e\n  \u003ch3 align=\"center\"\u003e\u003ccode\u003edatalith\u003c/code\u003e\u003c/h3\u003e\n\u003c/p\u003e\n\n ---\n\n[![npm](https://img.shields.io/badge/npm-datalith-black.svg?style=for-the-badge\u0026logo=npm)](https://www.npmjs.com/org/datalith)\n[![npm version](https://img.shields.io/npm/v/datalith.svg?style=for-the-badge\u0026label)](https://www.npmjs.com/org/datalith)\n\n### **Datalith** is a collection of clean, lightweight and easily customizable React components for data visualization.\n\nThe purpose is to provide an easy way to integrate custom data visualizations in any React\nproject. The components were designed with simplicity in mind,\nthe dataset is the only requirement.\n\nKey features:\n\n- Typed React components for optimal DX\n- Simple, shared API\n- Easy to integrate, customize, and enhance\n\n#### **[Read the introduction to the project](https://medium.com/@lucafalasco/turn-your-data-into-beautiful-dataliths-f25bae8bd438?source=friends_link\u0026sk=2cbc67534d9361bfec3e86ad22ac5d1d)**\n\n---\n\n## Installation\n\n```sh\nyarn add @datalith/shutter @datalith/hexmap @datalith/ripple\n```\n\nTo install all modules as a single package:\n\n```sh\nyarn add datalith\n```\n\nThen in you React app:\n\n```tsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { HexMap } from '@datalith/hexmap'\n\nReactDOM.render(\n  \u003cHexMap\n    data={data}\n    coords={d =\u003e [d.lng, d.lat]}\n    value={d =\u003e d.value}\n    side={5}\n    featureCollection={featureCollection}\n    projection={geoProjection}\n  /\u003e,\n  document.getElementById('root'),\n)\n```\n\n## Development\n\n### Getting Started\n\n```bash\n$ yarn\n$ yarn bootstrap\n```\n\n### Start dev environment (Storybook)\n\n```bash\n$ yarn start\n```\n\n### Build for production\n\n```bash\n$ yarn build\n```\n\n## F.A.Q.\n\n- Axis, labels or legends are not included, what if I need those?\n\n  \u003e The purpose of the project is to provide an easy way to display data in a very straightforward and engaging way, so the focus of _datalith_ is on the shapes and the visual patterns, and that's why axis, labels or legends are not included by default. However, if you need to display them, you can easily create your own components (or use a library like [vx](https://github.com/hshoff/vx)) and include those elements as an additional layer by passing them to the `additionalElements` prop.\n\n- I need a simple [barchart | scatterplot | piechart | ... ], why is it missing?\n\n  \u003e _datalith_ differs from other data-viz libraries by providing unconventional yet clear and easy-to-read data visualizations, that's why you won't find barcharts or piecharts, there are already a lot of libraries which let you create basic charts like those. This also means ideas about new unique visual models are strongly welcomed, feel free to open an issue to discuss ;)\n\n- Which packages do I have to use?\n\n  \u003e _datalith_ is meant to be extremely modular, so you can install only the charts you need by using the scoped package install:\n\n  \u003e ```sh\n  \u003e yarn add @datalith/hexmap\n  \u003e ```\n\n  \u003e Optionally, you can also choose to insall the complete collection of charts:\n\n  \u003e ```sh\n  \u003e yarn add datalith\n  \u003e ```\n\n- What about animations/transitions?\n\n  \u003e As the charts are rendered using SVG, you can use any react animation library you prefer, I suggest [react-spring](https://github.com/react-spring/react-spring), which is the one used in the examples, but there are many other great alternatives as well.\n\n- Does it come with types?\n\n  \u003e Yes it does.\n\n#### The project is still at an early stage\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucafalasco%2Fdatalith","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucafalasco%2Fdatalith","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucafalasco%2Fdatalith/lists"}