Webpack and D3 Example 1

.gitignore

# See https://help.github.com/ignore-files/ for more about ignoring files.

# dependencies
/node_modules

# testing
/coverage

# production
/dist

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
.*.swp

npm-debug.log*
yarn-debug.log*
yarn-error.log*

tmp
var

README.md

Short Example of Webpack with D3

To run:

$ ./mksrc.sh
$ npm install
$ export HOST=...
$ npm run start:dev

Output SVG

index.css

.title {
  font-size: xx-large;
}

index.js

import * as d3 from 'd3';
import formatXml from 'xml-formatter';
import css from './index.css';

const data = [
  ["Jul-73",  36.7],
  ["Jul-74",  34.9],
  ["Jul-75",  36],
  ["Jul-76",  34.5],
  ["Jul-77",  35],
  ["Jul-78",  37],
  ["Jul-79",  35.2],
  ["Jul-80",  34.3],
  ["Jul-81",  36.5],
  ["Jul-82",  33.4],
  ["Jul-83",  35.6],
  ["Jul-84",  36.4],
  ["Jul-85",  36.5],
  ["Jul-86",  36.1],
  ["Jul-87",  39.1],
  ["Jul-88",  35.9],
  ["Jul-89",  33.7],
  ["Jul-90",  38.9],
  ["Jul-91",  37.8],
  ["Jul-92",  37.5],
  ["Jul-93",  34],
  ["Jul-94",  37.9],
  ["Jul-95",  37.9],
  ["Jul-96",  38.4],
  ["Jul-97",  39.9],
  ["Jul-98",  38.5],
  ["Jul-99",  37.1],
  ["Jul-00",  37.6],
  ["Jul-01",  39.6],
  ["Jul-02",  38],
  ["Jul-03",  32.5],
  ["Jul-04",  39.2],
  ["Jul-05",  36.2],
  ["Jul-06",  36.9],
  ["Jul-07",  35.1],
  ["Jul-08",  36.2],
  ["Jul-09",  36.8],
  ["Jul-10",  38],
  ["Jul-11",  38.2],
  ["Jul-12",  37.8],
  ["Jul-13",  38.3],
  ["Jul-14",  37],
  ["Jul-15",  38.2],
  ["Jul-16",  37.3],
  ["Jul-17",  36.2],
  ["Jul-18",  41.1]
];

const plot = (data) => {
  // Transpose data from
  // an array of year-value pairs
  // to a pair of years and values.
  const tdata = d3.transpose(data);
  // Place an SVG.
  const svg = d3.select("svg");
  const margin = {top: 40, right: 10, bottom: 80, left: 80},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    root = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  // Define x-axis.
  const x = d3.scaleBand()
    .domain(tdata[0])
    .rangeRound([0, width])
    .padding(0.5);
  // Define y-axis.
  const y = d3.scaleLinear()
    .domain([Math.floor(d3.min(tdata[1]) - 1), Math.ceil(d3.max(tdata[1]) + 1)])
    .range([height, 0]);
  // Add a bar chart.
  const g = root.append("g");
  g.attr("fill", 'blue');
  const rect = g.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("x", (d) => (x(d[0])))
    .attr("y", height)
    .attr("width", x.bandwidth())
    .attr("height", 0);
  // Animate the bar chart.
  rect.transition()
    .delay((d, i) => (i * 10))
    .attr("y", (d) => (y(d[1])))
    .attr("height", (d) => (height - y(d[1])));
  // Show years.
  root.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x)
      .tickSize(0)
      .tickPadding(6))
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dy", "-.2em")
    .attr("dx", "-.2em")
    .attr("transform", "rotate(-70)");
  // Show the y-axis label.
  root.append("text")
    .style("text-anchor", "middle")
    .attr("transform", "rotate(-90)")
    .attr("dx", -height/2)
    .attr("dy", -margin.left/2)
    .text("degC");
  // Show the x-axis label.
  root.append("text")
    .style("text-anchor", "middle")
    .attr("x", width/2)
    .attr("y", height)
    .attr("dy", margin.bottom/2)
    .text("Year");
  // Show values.
  root.append("g")
    .call(d3.axisLeft(y));
};

(() => {
  const body = d3.select("body").append("div").style("width", "100%");
  const title = "Highest Temperature of July for Each Year in Kumagaya";
  const header = body
    .append("div")
    .classed(css.title, true)
    .text(title);
  body.append("div").append("p")
    .text("Data taken from www.jma.go.jp");
  body.append("div").append("svg").attr("width", 600).attr("height", 300);
  plot(data);
  body.append("button")
    .text("Dump")
    .on("click", () => (
      d3.select("#svg-dump")
        .property("value",
          formatXml(
            (new XMLSerializer()).serializeToString(d3.select("svg").node()),
            {
              indentation: '  '
            }
          ))
    ));
  body.append("div")
    .style("width", "100%")
    .append("textarea")
    .attr("id", "svg-dump")
    .style("width", "100%")
    .attr("rows", 20);
})();

mksrc.sh

#!/bin/bash

mkdir src
cp -v index.css index.js src

package.json

{
  "name": "webpack-d3-example-1",
  "version": "1.0.0",
  "description": "Webpack and D3 Example 1",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack",
    "start:dev": "webpack-serve ./webpack.config.js --no-reload",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "[email protected]",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8",
    "webpack-serve": "^2.0.2"
  },
  "dependencies": {
    "d3": "^5.5.0",
    "xml-formatter": "^1.0.1"
  }
}

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // Installed via npm
const webpack = require('webpack'); // To access built-in plugins
const path = require('path');

const paths = {
  src: path.join(__dirname, 'src'),
  dist: path.join(__dirname, 'dist'),
  public: path.join(__dirname, 'public')
};

const HOST = process.env.HOST;

module.exports = {
  mode: process.env.WEBPACK_SERVE ? 'development' : 'production',
  // Or pass it as a CLI argument: webpack --mode=production
  target: 'web', // Default
  entry: {
    main: path.join(paths.src, 'index.js')
  },
  output: {
    path: path.resolve(paths.dist),
    filename: '[name].js',
    pathinfo: true
  },
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: 'raw-loader'
      },
      { // webpack --module-bind 'css=style-loader!css-loader'
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true // Enable CSS Modules
            }
          }
        ]
      },
      {
        test: /\.(js|jsx)$/,
        include: paths.src,
        loader: require.resolve('babel-loader'),
        options: {
          babelrc: false,
          presets: ["env"],
          // This is a feature of `babel-loader` for webpack (not Babel itself).
          // It enables caching results in ./node_modules/.cache/babel-loader/
          // directory for faster rebuilds.
          cacheDirectory: false
        },
      }
    ]
  },
  performance: {
    hints: "warning"
  },
  devtool: "source-map",
  serve: {
    host: HOST,
    port: 3000,
    content: paths.dist,
    logLevel: 'debug'
  },
  stats: "verbose",
  plugins: [
    new HtmlWebpackPlugin()
  ]
};