Quickly build D3 visualizations (v6) with a robust development environment that offers the following out-of-the-box features:
- Hot-Module Replacement and Fast Refresh
- Integrates Webpack (Via @snowpack/plugin-webpack Plugin) for a Production-Optimized Build
- Targets IE 11 via Browserslist
- Preview Production-Optimized Build via http-server
- Automatic Polyfill Injection
- ES6+ Syntax Support
Example Visualization Source: https://observablehq.com/@d3/density-contours
The snowpack.config.js file is heavily annotated with comments. Be sure to read through the comments!
This project is bootstrapped with blank template of Create Snowpack App (CSA).
The size of the application's production-optimized build will depend on how you import the D3 library into the project.
import * as d3 from d3
import { scaleLinear } from "d3-scale";
import { extent } from "d3-array";
import { tsv } from "d3-fetch";
import { axisBottom, axisLeft } from "d3-axis";
import { contourDensity } from "d3-contour";
import { select } from "d3-selection";
import { geoPath } from "d3-geo";
Runs the application in the development mode. Open http://localhost:8080 to view it in the browser.
The page will reload if you make edits. You will also see any lint errors in the console.
Builds a static copy of your site to the build/ folder.
Your application is ready to be deployed!
Runs the production-optimized application. Open http://localhost:5555 to view it in the browser.