D3 Rectangular Area Chart

A D3 Rectangular Area Chart with animated filling.

Configurable features include:

Configurable maximum value. The chart will use either the maximum value of data it's provided, or a maximum value that you specify through configuration. This is especially useful if you're using multiple charts at the same time and you want their relative sizes to be the same regardless of their data.
Expansion direction. I.E. which corner does the chart expand from.
Animation on/off.
Configurable delay between chart load and animation start.
Configurable delay between the start of the expansion animation for each area block.
Area block colors and text colors.
Category text horizontal alignment.
Value text vertical alignment.
Value text on/off.
Prefix and suffix for value text.
Value text increment from 0 to final value while loading.
Category and value text padding.

Open source under BSD 2-clause
Copyright (c) 2015, Curtis Bratton
All rights reserved.

forked from brattonc's block: D3 Rectangular Area Chart

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="https://d3js.org/d3.v3.min.js" language="JavaScript"></script>
    <script src="rectangularAreaChart.js" language="JavaScript"></script>
    <style>
        .rectangularAreaChartText { font-family: Helvetica; font-size: 12px; }
    </style>
</head>
<body>
<div align="center">
    <div align="left" style="width: 810px;">
        <svg id="rectangularareachart1" width="400" height="240"></svg>
        <svg id="rectangularareachart2" width="400" height="240"></svg>
    </div>
    <div align="left" style="width: 810px;">
        <svg id="rectangularareachart3" width="400" height="240"></svg>
        <svg id="rectangularareachart4" width="250" height="240"></svg>
    </div>
</div>
<script language="JavaScript">
    var data1 = [{value: "42", label: "parturient montes", valueSuffix: " things"}, {value: "69", label: "id, mollis nec", valueSuffix: " things"}, {value: "29", label: "lacus. Ut", valueSuffix: " things"}, {value: "52", label: "a ultricies adipiscing", valueSuffix: " things"}];
    var config1 = rectangularAreaChartDefaultSettings();
    config1.expandFromLeft = false;
    config1.colorsScale = d3.scale.category20b();
    config1.maxValue = 100;
    loadRectangularAreaChart("rectangularareachart1", data1, config1);

var data4 = [{value: "32", label: "consectetuer adipiscing"}, {value: "62", label: "ipsum"}];
    var config4 = rectangularAreaChartDefaultSettings();
    config4.expandFromLeft = true;
    config4.expandFromTop = true;
    config4.maxValue = 100;
    config4.labelAlignDiagonal = true;
    config4.animateDelay = 3500;
    config4.displayValueText = false;
    config4.animateDelayBetweenBoxes = 0;
    config4.colorsScale = d3.scale.ordinal().range(["#7570b3","#e7298a","#66a61e"]);  //palette from colorbrewer https://github.com/mbostock/d3/tree/master/lib/colorbrewer
    config4.textColorScale = d3.scale.ordinal().range(["#e7298a","#7570b3","#66a61e"]);
    loadRectangularAreaChart("rectangularareachart4", data4, config4);
</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js