D3 Examples - D3 Rectangular Area Chart

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.

xxxxxxxxxx
 
<!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 data2 = [{value: "78", label: "Duis", valuePrefix: "Area of "}, {value: "37", label: "Cras", valuePrefix: "Area of "}, {value: "55", label: "elit sed consequat", valuePrefix: "Area of "}];
    var config2 = rectangularAreaChartDefaultSettings();
    config2.colorsScale = d3.scale.ordinal().range(["#fc8d59","#ffffbf","#91bfdb"]); //palette from colorbrewer https://github.com/mbostock/d3/tree/master/lib/colorbrewer
    config2.textColorScale = d3.scale.ordinal().range(["#444","#333","#222"]);
    config2.labelAlignDiagonal = true;
    config2.valueTextAlignDiagonal = true;
    config2.valueTextPadding.right = 18;
    config2.animateDelay = 1000;
    config2.animateDelayBetweenBoxes = 0;
    config2.valueTextCountUp = false;
    loadRectangularAreaChart("rectangularareachart2", data2, config2);
​
    var data3 = [{value: "40", label: "massa. Quisque"}, {value: "34", label: "rhoncus. Proin nisl"}, {value: "45", label: "ipsum nunc"}, {value: "64", label: "pharetra"}, {value: "95", label: "parturient montes"}, {value: "87", label: "pede, ultrices"}, {value: "80", label: "nascetur"}];
    var config3 = rectangularAreaChartDefaultSettings();
    config3.expandFromLeft = false;
    config3.expandFromTop = true;
    config3.maxValue = 100;
    config3.colorsScale = d3.scale.ordinal().range(["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016c59","#014636"]);  //palette from colorbrewer https://github.com/mbostock/d3/tree/master/lib/colorbrewer
    config3.textColorScale = d3.scale.ordinal().range(["#555","#777","#999","#aaa","#ddd","#fff","#fff"]);
    config3.animateDelay = 2000;
    loadRectangularAreaChart("rectangularareachart3", data3, config3);
​
    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>
    