Step-by-step D3js Mastering

Change visualizations using url parameters

Uses VanillaJs

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Pages

Variable size rectangle pages/api/progressbar.js

Moving Circle pages/api/mover.js

Histogram pages/api/histo.js

App (SVG generator interface) pages/app.js

API endpoints

Demo file pages/api/svg

Testing

Included Default Testing

We’ve included some tooling that helps us maintain these templates. This template currently uses:

Renovate - to regularly update our dependencies
Cypress - to run tests against how the template runs in the browser
Cypress Netlify Build Plugin - to run our tests during our build process

If your team is not interested in this tooling, you can remove them with ease!

Removing Renovate

In order to keep our project up-to-date with dependencies we use a tool called Renovate. If you’re not interested in this tooling, delete the renovate.json file and commit that onto your main branch.

Removing Cypress

For our testing, we use Cypress for end-to-end testing. This makes sure that we can validate that our templates are rendering and displaying as we’d expect. By default, we have Cypress not generate deploy links if our tests don’t pass. If you’d like to keep Cypress and still generate the deploy links, go into your netlify.toml and delete the plugin configuration lines:

[[plugins]]
  package = "netlify-plugin-cypress"
-  [plugins.inputs.postBuild]
-    enable = true
-
-  [plugins.inputs]
-    enable = false

If you’d like to remove the netlify-plugin-cypress build plugin entirely, you’d need to delete the entire block above instead. And then make sure sure to remove the package from the dependencies using:

npm uninstall -D netlify-plugin-cypress

And lastly if you’d like to remove Cypress entirely, delete the entire cypress folder and the cypress.config.ts file. Then remove the dependency using:

npm uninstall -S cypress

amirlogic/d3-playground