Showcase of responsive data visualization demos.
https://igncp.github.io/demos/
- It uses Gatsby with React to generate static HTML pages without the need for a server
- The main libraries are D3 and Three.js, using TypeScript and PostCSS
- Each demo has links to the reference implementation, the raw data (normally in JSON, CSV or TSV), and related documentations
- There are some demos using SVG, Canvas and WebGL in a Storybook build:
- https://igncp.github.io/demos/storybook
- They explore mostly web UI APIs or libraries without focusing in building a complete visualization
- TypeScript coverage report:
- https://igncp.github.io/demos/coverage-ts
- The coverage is relatively high and there is a minimum threshold of 95% for the whole project
- Type-checking is required in the CI so there are no TypeScript errors but in a few cases it uses
any
- Tests reports:
- Unit and functional tests report using Jest (jest.config.js)
- End-to-end tests report using Playwright (playwright.config.ts)
- In-browser unit tests page for learning some dependencies with QUnit (page)
- JS bundles analysis:
- It has extensive tooling for the code, all run via Github Actions:
- ESLint config: .eslintrc.js
- Prettier config: .prettierrc
- stylelint config: stylelint.config.js
- ts-prune script: scripts/ts_prune.sh
- typed-css-modules script: scripts/ts_css.sh
- There is an internal checklist which aims to improve the quality and reusability of the charts
- New charts should follow it completely but older charts (pre-2021) are still being updated to comply with it
- The charts are in the process to become responsive
- Version from 2016 using CoffeeScript and Sail.js:
You need to have Node.js installed
- Clone the repo
- Inside the repo directory, run:
npm install - To start the server
npm run develop
MIT