@cnrs/hecate-views-charts 0.2.0 → 0.5.0

package/README.md

@@ -1,15 +1,32 @@
-# hecate-views
+# Hecate ”charts” views
 
 <a href='https://datasphere.readthedocs.io/projects/hecate/'><img src='https://gitlab.huma-num.fr/datasphere/doc/assets/-/raw/main/banners/HECATE.png' width='100%'></a>
 
+[![license](https://img.shields.io/badge/license-AGPL3.0-informational?logo=gnu&color=success)](https://www.gnu.org/licenses/agpl-3.0.html)
+[![repostatus](https://www.repostatus.org/badges/latest/active.svg)](https://www.repostatus.org/#active)
+[![pipeline](https://gitlab.huma-num.fr/datasphere/hecate/views/charts/badges/main/pipeline.svg)](https://gitlab.huma-num.fr/datasphere/hecate/views/charts/pipelines/latest)
+[![coverage](https://gitlab.huma-num.fr/datasphere/hecate/views/charts/badges/main/coverage.svg)](https://datasphere.gitpages.huma-num.fr/hecate/views/charts/coverage/)
+[![latest](https://img.shields.io/npm/v/@cnrs/hecate-views-charts.svg)](https://www.npmjs.com/package/@cnrs/hecate-views-charts)
+[![documentation](https://img.shields.io/badge/documentation-jsdoc-blue)](https://datasphere.gitpages.huma-num.fr/hecate/views/charts/doc/)
+
 **Hecate** is a free web application for managing scientific databases.
 
-**hecate-views** is a free Javascript library for visualizing scientific data.
-Views are specific glances on subsets of your scientific database : lists, charts, maps, and so on.
+[**@cnrs/hecate-views-charts**](https://www.npmjs.com/package/@cnrs/hecate-views-charts) is a free Javascript library for visualizing scientific data.
+[Views](https://datasphere.readthedocs.io/projects/hecate/en/latest/design/views.html) are specific glances on subsets of your scientific database : lists, charts, maps, timelines, thumbnails, and so on.
 Each view takes HERA-formatted data ([10.5281/zenodo.12795179](http://doi.org/10.5281/zenodo.12795179)) as its input, and can be easily configured to suit your needs.
 
+This package provides the following views:
+
+* [BarChart](https://datasphere.gitpages.huma-num.fr/hecate/views/charts/doc/BarChart.html), usable as a `hecate-barchart` HTML element;
+* [Histogram](https://datasphere.gitpages.huma-num.fr/hecate/views/charts/doc/Histogram.html), usable as a `hecate-histogram` HTML element;
+* [LineChart](https://datasphere.gitpages.huma-num.fr/hecate/views/charts/doc/LineChart.html), usable as a `hecate-linechart` HTML element;
+* [ScatterPlot](https://datasphere.gitpages.huma-num.fr/hecate/views/charts/doc/ScatterPlot.html), usable as a `hecate-scatterplot` HTML element;
+* [StackedAreaChart](https://datasphere.gitpages.huma-num.fr/hecate/views/charts/doc/StackedAreaChart.html), usable as a `hecate-stackedareachart` HTML element;
+* [Streamgraph](https://datasphere.gitpages.huma-num.fr/hecate/views/charts/doc/Streamgraph.html), usable as a `hecate-streamgraph` HTML element.
+
 ## Resources
 
 * [Documentation](https://datasphere.readthedocs.io/projects/hecate/)
-* [Releases](https://www.npmjs.com/package/@cnrs/hecate-views?activeTab=versions)
+* [API Documentation](https://datasphere.gitpages.huma-num.fr/hecate/views/charts/doc/)
+* [Releases](https://www.npmjs.com/package/@cnrs/hecate-views-charts?activeTab=versions)
 * [Getting help](https://gitlab.huma-num.fr/datasphere/hecate/views/charts/-/issues/)

package/package.json

@@ -1,4 +1,6 @@
 {
+  "name": "@cnrs/hecate-views-charts",
+  "description": "Views web components available to any web app.",
   "@comment comments": [
     "To track and understand the whys of each part of this package.json, ",
     "in particular dependencies, please explain when you modify this file.",
@@ -9,8 +11,15 @@
     "",
     "package.json documentation: https://docs.npmjs.com/files/package.json"
   ],
-  "name": "@cnrs/hecate-views-charts",
-  "description": "Views web components available to any web app.",
+  "type": "module",
+  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "files": [
+    "src/**/*.js"
+  ],
+  "version": "0.5.0",
   "keywords": [
     "dataviz",
     "research",
@@ -21,17 +30,7 @@
     "browser",
     "library"
   ],
-  "type": "module",
-  "module": "src/index.js",
-  "main": "src/index.js",
-  "exports": {
-    ".": "./src/index.js",
-    "default": "./src/index.js"
-  },
-  "files": [
-    "src/**/*.js"
-  ],
-  "version": "0.2.0",
+  "author": "The Hecate contributors",
   "license": "AGPL",
   "homepage": "https://datasphere.readthedocs.io/projects/hecate/",
   "repository": {
@@ -41,8 +40,8 @@
   "bugs": {
     "url": "https://gitlab.huma-num.fr/datasphere/hecate/views/charts/-/issues"
   },
-  "main": "src/index.js",
   "dependencies": {
+    "@cnrs/hecate-views": "^0.3.6",
     "d3": "latest"
   },
   "@comment devDependencies": {
@@ -56,7 +55,7 @@
       "@requires vite ≥ 3.0.0 (and node ≥ 14.18)",
       "- Vitest website: https://vitest.dev/"
     ],
-    "@vitest/coverage-c8": [
+    "@vitest/coverage-v8": [
       "Compute percentage of code covered by tests.",
       "- Vitest coverage documentation: https://vitest.dev/guide/coverage.html"
     ],
@@ -66,9 +65,20 @@
       "- https://www.npmjs.com/package/happy-dom"
     ],
     "eslint": [
-      "To use eslint ECMAScript linter.",
+      "A linter for analysing ECMAScript code (among others).",
       "- ESLint documentation: https://eslint.org/"
     ],
+    "@eslint/js": [
+      "ESLint plugin specialised in the javascript language.",
+      "Needed since javascript-specifics have been separated from the core ESLint.",
+      "Referred in the ESLint config file (eslint.config.mjs).",
+      "- https://www.npmjs.com/package/@eslint/js"
+    ],
+    "globals": [
+      "A collection of identifiers used by ESLint.",
+      "Referred in the ESLint config file (eslint.config.mjs).",
+      "- https://www.npmjs.com/package/globals"
+    ],
     "jsdoc": [
       "Javascript documentation generation tool.",
       "See `gendoc` script in this same file for some usage details.",
@@ -79,8 +89,10 @@
     "vite": "latest",
     "vitest": "latest",
     "@vitest/coverage-v8": "latest",
-    "happy-dom": "<=12.1.5",
+    "happy-dom": "latest",
     "eslint": "latest",
+    "@eslint/js": "latest",
+    "globals": "latest",
     "jsdoc": "latest"
   },
   "@comment scripts": {
@@ -102,13 +114,25 @@
       "@requires vitest @vitest/coverage-v8 (dev dependencies)"
     ],
     "build": [
-      "Bundles project for production in `dist` folder.",
+      "Bundles project in `dist` folder. Please note that:",
+      "- we use vite default settings, so don't need any `vite.config.mjs`.",
+      "- the result of this build is of no use, as this `package.json` file",
+      "  says the NPM package contents are `src/**/*.js`, not `dist/*.js`.",
+      "  We do that because our code is already ESM, Node and modern browsers",
+      "  compatible, with no need for transpiling (no TypeScript here).",
+      "In other words, this command isn't really useful, though I'll keep it",
+      "to differentiate it from `buid:cdn`, which IS used.",
+      "@requires vite (dev dependency)"
+    ],
+    "build:cdn": [
+      "Bundles project for production CDNs in `cdn/dist` folder.",
+      "Delivery to NPM must then be made using `cdn/package.json`.",
       "@requires vite (dev dependency)"
     ],
     "lint": [
       "Checks code style using ESLint. note: Argument pattern is surrounded with ",
       "double quotes, so its resolution doesn't depend on runtime environment.",
-      "@requires eslint (dev dependency)",
+      "@requires eslint and @eslint/js (dev dependencies)",
       "- ESLint configuration file is `eslint.config.mjs`",
       "- ESLint documentation: https://eslint.org/"
     ],
@@ -128,7 +152,8 @@
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest --coverage",
     "build": "vite build",
-    "lint": "eslint \"src/**/*.js\"",
+    "build:cdn": "vite build --config cdn/vite.cdn.config.mjs",
+    "lint": "exec eslint \"src/**/*.js\"",
     "doc:html": "./node_modules/jsdoc/jsdoc.js -c .jsdoc.conf.json"
   }
 }

package/src/init.js

@@ -1,8 +1,8 @@
-import { Sample, } from './components/';
-import { BarChart, Histogram, ScatterPlot, LineChart } from './views/';
-
-customElements.define('sample-component', Sample);
-customElements.define('scatter-plot', ScatterPlot);
-customElements.define('bar-chart', BarChart);
-customElements.define('histogram-chart', Histogram);
-customElements.define('line-chart', LineChart);
+import {
+    BarChart,
+    Histogram,
+    LineChart,
+    ScatterChart,
+    StackedAreaChart,
+    Streamgraph,
+  } from './views/index.js';  // eslint-disable-line no-unused-vars

package/src/util.js

@@ -0,0 +1,13 @@
+function getMetadata(item, pid) {
+  for (const meta of item['metadata']) {
+    if (pid != null && meta['pid'] == pid) return meta['value'];
+  }
+  return null;
+}
+function getProperty(db, pid) {  // TODO why can't I use await db.getProperty?
+  // faster than return db.properties.filter(e => e.id == pid)[0];
+  // we use find(...), which stops as soon as it finds our special something
+  return db.properties.find(e => e.id == pid);
+}
+
+export { getProperty, getMetadata, };

package/src/views/all.js

@@ -0,0 +1,6 @@
+import './barchart.js';
+import './histogram.js';
+import './linechart.js';
+import './scatterchart.js';
+import './stackedareachart.js';
+import './streamgraph.js';

package/src/views/barchart.js

@@ -1,89 +1,46 @@
+import { View } from '@cnrs/hecate-views';
 import * as d3 from 'd3';
 
 
+
 /**
  * BarChart web component.
  * @see https://en.wikipedia.org/wiki/Bar_chart
  */
-class BarChart extends HTMLElement{
+class BarChart extends View {
 
-  constructor(){
-    super();
-    this.attachShadow({ mode: 'open' });
-    this.hera =  {};
-    this.settings = {};
-  }
+  get pidx() { return this.settings.x || 'x'; }
+  get pidy() { return this.settings.y || 'y'; }
 
-    /** Static property returning an array of attributes observed by the browser
-     */
-    static get observedAttributes() {
-      return ['data-hera', 'data-settings'];
-    }
 
-  get items() { return this.hera.items || []; }
-  get entities() { return this.hera.entities || []; }
-  get properties() { return this.hera.properties || []; }
 
-  get pidx() { return this.settings.x || 'x'; }
-  get pidy() { return this.settings.y || 'y'; }
-  get color() { return this.settings.color || '#7b4c98'; }
-
-  /**
-   * This is called when an observed attribute is
-   * defined in the HTML or changed using Javascript.
-   * @param {!string} attribute - Attribute name
-   * @param old - Previous value for `attribute`
-   * @param now - Current value for `attribute`
-   */
-  attributeChangedCallback(attribute, old, now) {
-    if (old === now) return;  // don't bother if there is nothing new
-    this[attribute] = now;
-    // data-* attributes can only be strings, so we cannot deserialize JSON
-    // in them ; so we use plain object fields to store deserialized values
-    // we trim the prefix to get the field name, so 'data-x' becomes 'x'
-    const fieldName = attribute.split('-').slice(1).join('-');
-    this[fieldName] = JSON.parse(now);
-    // note that this does not defeat the purpose of using data-* attributes
-    // in the first place, as if a name clash should happen in the future,
-    // we could edit this class with no impact on the users code
-  }
-    
-    //js method called everytime the component is added to the dom
-  connectedCallback(){
-    var dataset = this.prepareData(this.hera, this.settings);
-  
+  renderView() {
+    // cleanup
+    while (this.viewRoot.lastChild.name !== 'view') { // <slot />
+      this.viewRoot.removeChild(this.viewRoot.lastChild);
+    }
+
+    var dataset = this.prepareData();
         //creation of scene 
         const margin = { top : 70, right : 30, bottom: 40, left : 80};
-        const {sceneWidth, sceneHeight, barWidth, svg} = this.createScene(500, 500, this.items.length, margin);
+        const {sceneWidth, sceneHeight, barWidth, svg} = this.createScene(500, 500, this.db.items.length, margin);
         
         //addition of axises
         var {y_scale, x_scale} = this.createAxisScales(sceneHeight, sceneWidth, dataset);
         this.addAxises(x_scale, y_scale, sceneHeight, sceneWidth, margin, svg)
 
         this.displayChart(sceneHeight, barWidth, dataset, y_scale, x_scale, svg);
-
     }
 
     /**
-     * Sets the shadow dom of the component, currently creates a single div 
-     * @returns the element that was appended to the shadow dom
-     */ 
-  createShadowDom() {
-    const e = document.createElement('div');
-    this.shadowRoot.appendChild(e);
-    return e;
-  }
-
-    /**
-     * Prepare the data by giving it the correct format
-     * @param {object} rawData - the data as it was passed , it's a js object type 
-     * @param {object} rawSettings - the settings as it was passed, it's a js object type
-     * @returns js object that contains the elements of metadata, each key representing a different pid
+     * Prepare the data by giving it the correct format.
+     * @param {object} db HERA-formatted data as it was passed.
+     * @returns {object} Metadata ; each key representing a different pid.
      */
-    prepareData(rawData, rawSettings){
+    prepareData() {
         var barValues = [];
         var barLabels = [];
-        rawData.items.forEach(item => {
+        this.db.items.forEach(item => {
             item.metadata.forEach(meta => {
                 if (meta.pid === this.pidy) {  // Y axis is height of bars
                     barValues.push(parseInt(meta.value));
@@ -114,7 +71,8 @@ class BarChart extends HTMLElement{
         const sceneHeight = height - margin.top - margin.bottom; 
         const barWidth = sceneWidth/dataLength
         
-        const divElem = this.createShadowDom();
+        const divElem = document.createElement('div');
+        this.viewRoot.appendChild(divElem);
         const container =  d3.select(divElem);
         
         //addition of container to the svg 
@@ -236,11 +194,27 @@ class BarChart extends HTMLElement{
   }
 
   getProperty(pid) {
-    const found = this.properties.find((p) => p['@id'] === pid);
+    const found = this.db.properties.find((p) => p['id'] === pid);
     return found ? found : null;
   }
+
 }
 
 
 
+/** Returns if a string is a valid color.
+ *
+ *  @param {string} value Color (or not).
+ *  @returns {boolean} `true` if `value` is a valid color, `false` if not.
+ */
+function isColor(value) {
+  var style = new Option().style;
+  style.color = value;  // if value invalid, it won't be assigned
+  return style.color == value.toLowerCase();
+}
+
+
+
+customElements.define('hecate-barchart', BarChart);
+
 export { BarChart };

package/src/views/cartesianchart.js

@@ -0,0 +1,309 @@
+import { View } from '@cnrs/hecate-views';
+import * as d3 from 'd3';
+import { getProperty, getMetadata, } from '../util.js';
+
+
+
+class CartesianChart extends View {
+
+  get vertical() { return this.settings.orientation === 'vertical' || false; }
+  get hEncoding() { return this.vertical? this.settings.y : this.settings.x; }
+  get vEncoding() { return this.vertical? this.settings.x : this.settings.y; }
+  get reverseX() { return this.settings.x?.axis?.reverse === true || false; }
+  get reverseY() { return this.settings.y?.axis?.reverse === true || false; }
+  get normalizeX() { return this.settings.x?.normalize === true || false; }
+  get normalizeY() { return this.settings.y?.normalize === true || false; }
+  get normalizeH() { return this.hEncoding?.normalize === true || false; }
+  get normalizeV() { return this.vEncoding?.normalize === true || false; }
+
+  getItemX(item) { return getMetadata(item, this.settings.x?.pid); }
+  getItemY(item) { return getMetadata(item, this.settings.y?.pid); }
+  getItemColor(item) { return getMetadata(item, this.settings.color?.pid); }
+
+  plotX(item, plot, parsers) {
+    return plot.vx(parsers.x(this.getItemX(item))) + plot.padding.left;
+  }
+  plotY(item, plot, parsers) {
+    return plot.vy(parsers.y(this.getItemY(item))) + plot.padding.top;
+  }
+  plotColor(item, plot, parsers) {
+    const color = plot.color(parsers.color(this.getItemColor(item)));
+    return color ? color : this.settings.color?.value;
+  }
+
+  renderView() {
+    // cleanup
+    while (this.viewRoot.lastChild.name !== 'view') { // <slot />
+      this.viewRoot.removeChild(this.viewRoot.lastChild);
+    }
+
+    const container = document.createElement('div');
+    container.style = 'width: 100%; height: 100%;';
+    this.viewRoot.appendChild(container);
+
+    const xProperty = getProperty(this.db, this.settings.x?.pid);
+    const yProperty = getProperty(this.db, this.settings.y?.pid);
+    const cProperty = getProperty(this.db, this.settings.color?.pid);
+    const xType = xProperty?.type || 'text';
+    const yType = yProperty?.type || 'text';
+    const cType = cProperty?.type || 'text';
+    const parsers = {
+      x: getParser(xType),
+      y: getParser(yType),
+      color: getParser(cType),
+    };
+    const scales = {
+      x: getScale(xType),
+      y: getScale(yType),
+      color: getScale(cType),
+    };
+    const plot = {
+      width: this.clientWidth,
+      height: this.clientHeight,
+    };
+
+    this.prepare(parsers, scales);
+
+    // Prepare the scales for positional and color encodings.
+    // domain = data ; range = render ... cuz a function has:
+    // - a domain (its input values),
+    // - a codomain (theorical output values), and
+    // - a range (effective output values)
+    plot.vx = this.createXScale(plot, parsers, scales.x);
+    plot.vy = this.createYScale(plot, parsers, scales.y);
+    plot.color = this.createColorScale(parsers, scales.color);
+    // if this.vertical is true, X axis becomes vertical and Y axis horizontal
+    // so we swap them, /but/ they stay named as vx,vy (and not eg. vh,vv)
+    // because they really are data scales, and data channels are X,Y
+    if (this.vertical) [plot.vx, plot.vy] = [plot.vy, plot.vx];
+    // plot.padding is the internal space reserved around the
+    // cartesian plotting area, incuding axes, ticks and labels.
+    const { hAxis, vAxis, padding } = this.createAxes(plot);
+    plot.padding = padding;
+
+    // Create the SVG container.
+    const svgWidth = plot.width + plot.padding.left + plot.padding.right;
+    const svgHeight = plot.height + plot.padding.top + plot.padding.bottom;
+    const svg = d3.create('svg')
+        .attr('width', svgWidth)
+        .attr('height', svgHeight)
+        .attr('viewBox', [0, 0, svgWidth, svgHeight])
+        .attr('style', 'max-width: 100%; height: auto;');
+
+    // render data
+    this.renderData(svg, plot, parsers);
+    // render axes
+    this.renderHAxis(svg, plot, hAxis);
+    this.renderVAxis(svg, plot, vAxis);
+
+    container.appendChild(svg.node());
+  }
+
+  prepare(parsers, scales) { }
+
+  renderData(svg, plot, parsers) {
+    //const { x, y, color } = this.settings;
+    const message = //([x, y, color].every(v => v !== undefined)) ?
+        `${this.constructor.name} should implement renderData()`
+    //  : "Missing settings"
+      ;
+    svg.append('text')
+      .attr('x', plot.width / 2 + plot.padding.left)
+      .attr('y', plot.height / 2 + plot.padding.top)
+      .attr('text-anchor', 'middle')
+      .attr('fill', 'currentColor')
+      .text(`${this.constructor.name} should implement renderData()`);
+  }
+
+  renderHAxis(svg, plot, axis) {
+    const xOffset = plot.padding.left;
+    const yOffset = plot.height + plot.padding.top;
+    axis.attr('transform', `translate(${xOffset},${yOffset})`);
+    if (this.hEncoding?.axis?.domain === false)
+      axis.call(g => g.select('.domain').remove());
+    svg.append(() => axis.node());
+  }
+
+  renderVAxis(svg, plot, axis) {
+    const xOffset = plot.padding.left;
+    const yOffset = plot.padding.top;
+    axis.attr('transform', `translate(${xOffset},${yOffset})`);
+    if (this.vEncoding?.axis?.domain === false)
+      axis.call(g => g.select('.domain').remove());
+    svg.append(() => axis.node());
+  }
+
+  createXScale(plot, parsers, scale) {
+    let domain = this.createXDomain(parsers);
+    if (this.reverseX) domain = [...domain].reverse();
+    const range = this.createXRange(plot);
+    return scale().domain(domain).range(range);
+  }
+  createYScale(plot, parsers, scale) {
+    let domain = this.createYDomain(parsers);
+    if (this.reverseY) domain = [...domain].reverse();
+    const range = this.createYRange(plot);
+    return scale().domain(domain).range(range);
+  }
+  createColorScale(parsers, scale) {
+    const cats = new Set();
+    for (const item of this.db.items) cats.add(this.getItemColor(item));
+    const categories = [...cats];  // Set -> Array
+    const domain = this.createColorDomain(categories);
+    const range = this.createColorRange();
+    return scale().domain(domain).range(range);
+  }
+
+  createXDomain(parsers) {
+    return d3.extent(this.db.items, item => parsers.x(this.getItemX(item)));
+  }
+  createYDomain(parsers) {
+    return d3.extent(this.db.items, item => parsers.y(this.getItemY(item)));
+  }
+  createColorDomain(categories) { return categories; }
+  createXRange(plot) { return this.vertical ? [plot.height, 0] : [0, plot.width]; }
+  createYRange(plot) { return this.vertical ? [0, plot.width] : [plot.height, 0]; }
+  createColorRange() { return d3.schemeTableau10; }
+  // TODO: provide a fallback palette or generated colors
+  // when categories.length > 10 (d3 reuses colors)
+
+  createAxes(plot) {
+    // create a temporary SVG, only for axes bounding box computation
+    // these computations allow to deduce necessary paddings
+    const tmp = d3.select(this.viewRoot).append('svg')
+      .style('position', 'absolute').style('visibility', 'hidden')
+      ;
+    // create horizontal and vertical axes and add them to temporary svg
+    const hAxis = this.createHAxis(tmp, plot);
+    const vAxis = this.createVAxis(tmp, plot);
+
+    const hAxisBBox = hAxis.node().getBBox();
+    const vAxisBBox = vAxis.node().getBBox();
+
+    // space around the cartesian plotting area (inc. axes, ticks and labels).
+    const padding = {
+      top: -vAxisBBox.y, // overflow of first vertical tick label
+      right: hAxisBBox.x + hAxisBBox.width - plot.width, // overflow of last horizontal tick label
+      bottom: hAxisBBox.height, // room for horizontal axis, inc. ticks and labels
+      left: -vAxisBBox.x,  // room for vertical axis, inc. ticks and labels
+    };
+
+    // add axes labels (if any) and update `padding` (if so)
+    if (this.hEncoding?.axis?.name) { // create label for horizontal axis `hAxis`
+      const hLabel = this.createHAxisLabel(hAxis, this.hEncoding.axis.name);
+      const { x,y } = this.createHAxisLabelOffset(plot, padding, hLabel);
+      hLabel.attr('x', x).attr('y', y);
+    }
+    if (this.vEncoding?.axis?.name) { // create label for vertical axis `vAxis`
+      const vLabel = this.createVAxisLabel(vAxis, this.vEncoding.axis.name);
+      const { x,y } = this.createVAxisLabelOffset(plot, padding, vLabel);
+      vLabel.attr('x', x).attr('y', y);
+    }
+
+    // padding computations are done, so delete `tmp` svg ; after that,
+    // hAxis,vAxis elements are orphaned, allowing them to be added to the
+    // real svg `svg`, below
+    tmp.remove();
+
+    return { hAxis, vAxis, padding };
+  }
+
+  /**
+   * Creates the horizontal axis and adds it to the SVG.
+   * @param {d3.Selection} svg SVG element.
+   * @param {Plot} plot Coordinate system for `svg`.
+   * @returns {d3.Selection} X axis SVG element.
+   */
+  createHAxis(svg, plot) {
+    const scale = plot.vx;
+    const axis = d3.axisBottom(scale);
+    if (this.normalizeH) axis.tickFormat(d3.format(".0%"));
+    return svg.append('g').call(axis);
+  }
+
+  createVAxis(svg, plot) {
+    const scale = plot.vy;
+    const axis = d3.axisLeft(scale);
+    if (this.normalizeV) axis.tickFormat(d3.format(".0%"));
+    return svg.append('g').call(axis);
+  }
+
+  /**
+   * Creates the horizontal axis label, and add it to the horizontal axis.
+   * @param {d3.Selection} axis Horizontal axis SVG element (eg. a `<g>`).
+   * @param {string} label Horizontal axis label string.
+   * @returns {d3.Selection} Horizontal axis label SVG element.
+   */
+  createHAxisLabel(axis, label) {
+    return axis.append('text')
+        .attr('dominant-baseline', 'hanging')
+        .attr('fill', 'currentColor')
+        .attr('text-anchor', 'end')
+        .text(label);
+  }
+
+  createVAxisLabel(axis, label) {
+    return axis.append('text')
+        .attr('dominant-baseline', 'hanging')
+        .attr('fill', 'currentColor')
+        .attr('text-anchor', 'start')
+        .text(label);
+  }
+
+  createHAxisLabelOffset(plot, padding, label) {
+    const labelBBox = label.node().getBBox();
+    // increase the bottom padding so the label fits inside svg viewBox
+    padding.bottom += labelBBox.height;
+    // position the label so its top aligns with the ticks labels bottom
+    return {
+      x: plot.width + padding.right,
+      y: padding.bottom -labelBBox.height,
+    };
+  }
+
+  createVAxisLabelOffset(plot, padding, label) {
+    const labelBBox = label.node().getBBox();
+    const yMax = d3.max(plot.vy.domain());
+    const yTop = plot.vy(plot.vy.domain()[1]);
+    // increase the top padding so the label fits inside svg viewBox
+    padding.top = labelBBox.height - yTop;
+    // position the label so its bottom aligns with the upper tick label top
+    return {
+      x: -padding.left,
+      y: yTop - labelBBox.height,
+    };
+  }
+}
+
+
+
+const PARSERS = {
+  'date': d => new Date(d),
+  'number': d => +d,
+  'text': d => d,
+};
+const SCALES = {
+  'date': d3.scaleUtc,
+  'number': d3.scaleLinear,
+  'text': d3.scaleOrdinal,
+};
+
+function getParser(type) { return PARSERS[type]; }
+function getScale(type) { return SCALES[type]; }
+
+export { CartesianChart };
+
+/**
+ * Cartesian plotting area.
+ *
+ * This object defines the coordinate system used to render a chart.
+ *
+ * @typedef {Object} Plot
+ * @property {number} width - Width of the drawable plotting area, excluding padding.
+ * @property {number} height - Height of the drawable plotting area, excluding padding.
+ * @property {Function} vx - Maps X values from data space to view space.
+ * @property {Function} vy - Maps Y values from data space to view space.
+ * @property {{top:number,right:number,bottom:number,left:number}} [padding]
+ *   Internal space reserved for axes, ticks and labels.
+ * TODO
+ */