Data Visualization Starterkit

Features

Frameworks

• ✅ Svelte as component framework
• ✅ SvelteKit as application framework

Compilers and Transpilters

• ✅ svelte-preprocess for transforming JS and CSS supersets
• ✅ Sass as CSS superset
• ✅ TypeScript as JS superset
• ✅ PostCSS for transforming CSS styles
• ✅ PostCSS with autoprefixer to add vendor prefixes to CSS rules

Libraries

• ✅ Lodash for convenience functions
• ✅ D3 for building custom, advanced charts
• ✅ Plot for building standard, basic charts
• ✅ Chroma for working with color
• ✅ Feather Icons for user interface icons
• ✅ Textures for working with textures
• ✅ Tidy for working with data
• ✅ SVGCrowbar for exporting static assets like SVG and PNG
• ✅ Math.js for math
• ✅ Flatten.js for geometry
• ✅ Day-fns.js for working with dates
• ✅ MDSvex for working with Markdown
• 🔄 [Something] for user interface elements
  • Inclusive Components
  • Accessible Components

Structure

• ✅ Basic Folder structure
  • ✅ Folder src/actions for use actions for components
  • ✅ Folder src/components for components
  • ✅ Folder src/data for storing static data files
  • ✅ Folder src/routes for pages
  • ✅ Folder src/stores for stores of data
  • ✅ Folder src/functions for utility functions
• ✅ Basic CSS file structure
  • ✅ File src/styles/app for importing all following files
  • ✅ File src/styles/base for root CSS styling
  • ✅ File src/styles/constants for CSS and JS constants
  • ✅ File src/styles/fonts for @font-face declarations
  • ✅ File src/styles/reset for CSS style reset across browsers
  • ✅ File src/styles/variables for CSS variables
• 🅾️ Basic README structure

Code

• ✅ Prettier configuration for CSS, JS, Svelte

Infrastructure

• 🅾️ Deployment on Github Pages
• 🅾️ Deployment on Vercel

Misc

• ✅ Vite configuration for loading CSV and TSV files

Components and Recipes

• ✅ Data loading
• ✅ Data exporting
• ✅ Chart component
• ✅ Custom fonts from Google Fonts
• ✅ Sticky chart layout
• ✅ Theme toggle with localStorage
• ✅ SVG exporting
• ✅ Interface component
• 🅾️ Search with autocomplete

Stores

• ✅ Store for width and height of the viewport
• ✅ Store for media queries
• ✅ Store for theme
• ✅ Store state as URL parameter
• 🔄 Store for user interface state

Actions

• ✅ Action for checking if a component is in the viewport
• ✅ Action for checking if the user clicked outside a component

Development

Start a development server:

yarn dev

Or start the server and open the app in a new browser tab:

yarn dev --open

Building

To create a production build:

yarn build

To preview the production build:

yarn preview

Deployment

Install an adapter for the target environment.