Simple Webpack d3 Setup

Perhaps you would like to get a development environment for d3.js up and running. Here are some simple steps using webpack and Babel to give you the very bare bones to begin d3 development.

In your terminal of choice create and initialize an npm folder/project:

mkdir webpack-d3
cd webpack-d3
npm init -y

Install your most basic development dependencies:

npm i --save-dev @babel/core webpack webpack-cli webpack-dev-server http-server babel-loader

Install d3 as a dependency:

npm i d3

In your package.json file add the following scripts:

  "scripts": {
    "webpack-dev-server": "webpack-dev-server",
    "webpack": "webpack"
  },

Create a index.html file in the root folder with the following content:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
      <svg width="300px" height="150px">
          <rect x="20" y="20" width="20px" height="20" rx="5" ry="5" />
          <rect x="60" y="20" width="20px" height="20" rx="5" ry="5" />
          <rect x="100" y="20" width="20px" height="20" rx="5" ry="5"/>
      </svg>
  <script type="text/javascript" src="dist/main.js"></script>
</body>
</html>

Create a src/index.js file with the following content:

import * as d3 from 'd3';

const square = d3.selectAll("rect");
square.style("fill", "orange");

Build your project with:

npm run webpack

Run your development web server with:

npm run webpack-dev-server

Now go to http://localhost:8080/ in your web browser. You should see 3 orange squares.

Your folder structure at this point should look like this:

Webpack directories

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • CSS Styling the Audio Element

    There are a few things you can do with CSS to style the HTML audio element in various browsers.

  • How to Get WP RSS Aggregator Feed to Validate

    I’m using the plugin WP RSS Aggregator, and I couldn’t get the custom feed to validate in other places. The validator said that it was missing an <author> field. If an item doesn’t have an author, then the feed doesn’t even supply an empty one. The way to fix it is to go to wp-content/plugins/wp-rss-aggregator/templates/custom-feed/entry.twig ... Read more

  • How to Remove Rank Math Top Banner

    Rank Math has added an ugly top banner to the sites using its plugin. Here's how to hide it.

  • Fix for High CPU Usage on Siteground

    The MailPoet cron job on my website was triggered by Google Bot and caused my CPU seconds on Siteground to go over the quota. Here's how I fixed it.

  • Fast MIDI Song Starter

    Here is a really easy way to build MIDI chord progressions using iRealPro.

  • What is Full Kontakt Required?

    Perhaps you don't know what Kontakt is or how it works. Hopefully we can sort these things out and get you on your way to making some music.

  • How To Style a Range Input Slider

    If you are going to build a custom html audio player, you will need to know how to style a range input slider.

  • How to Build a HTML Audio Player with Vanilla JS (Part 2)

    Here is another tutorial on how to build a custom html audio player with vanilla js.

  • Coding a Custom HTML Audio Player (Part 1)

    Here is a starter tutorial on how to create a custom HTML audio player with HTML and JavaScript.