Old school D3 from simpler times

All examples By author By category About

GordonSmith

Full window Github gist

Custom Ordinal Palette

HPCC Palettes

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://viz.hpccsystems.com/v1.8.4/dist-amd-src/hpcc-viz.js"></script>
    <script src="https://viz.hpccsystems.com/v1.8.4/dist-amd-src/hpcc-bundles.js"></script>
    <script>
        require.config({
            paths: {
                "src": "https://viz.hpccsystems.com/v1.8.4/dist-amd-src",
                "font-awesome": "https://viz.hpccsystems.com/v1.8.4/dist-amd-src/font-awesome/css/font-awesome.min"
            }
        });
    </script>
</head>
<body>
    <div id="placeholder" style="width:100%; height:100vh">
    </div>
    <script>
        require(["src/chart/Pie", "src/common/Palette"], function (Pie, Palette) {
            var newPal = Palette.ordinal("RBI", ["green", "antiquewhite", "navy", "red"]);
            //  If you want to force a colour to a known value, just request them in order after creation:
            newPal("Ireland"); //Green
            newPal("England");  //white
            newPal("Scotland");  //navy
            newPal("Wales");  //red
            var widget = new Pie()
                .target("placeholder")
                .paletteID("RBI")
                .columns(["Location", "Score"])
                .data([["England", 22], ["Wales", 88], ["Scotland", 88], ["Ireland", 88]])
                .render()
            ;
        });
    </script>
</body>
</html>

xxxxxxxxxx
 
•<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://viz.hpccsystems.com/v1.8.4/dist-amd-src/hpcc-viz.js"></script>
    <script src="https://viz.hpccsystems.com/v1.8.4/dist-amd-src/hpcc-bundles.js"></script>
    <script>
        require.config({
            paths: {
                "src": "https://viz.hpccsystems.com/v1.8.4/dist-amd-src",
                "font-awesome": "https://viz.hpccsystems.com/v1.8.4/dist-amd-src/font-awesome/css/font-awesome.min"
            }
        });
    </script>
</head>
<body>
    <div id="placeholder" style="width:100%; height:100vh">
    </div>
    <script>
        require(["src/chart/Pie", "src/common/Palette"], function (Pie, Palette) {
            var newPal = Palette.ordinal("RBI", ["green", "antiquewhite", "navy", "red"]);
            //  If you want to force a colour to a known value, just request them in order after creation:
            newPal("Ireland"); //Green
            newPal("England");  //white
            newPal("Scotland");  //navy
            newPal("Wales");  //red
            var widget = new Pie()
                .target("placeholder")
                .paletteID("RBI")
                .columns(["Location", "Score"])
                .data([["England", 22], ["Wales", 88], ["Scotland", 88], ["Ireland", 88]])
                .render()
            ;
        });
    </script>
</body>
</html>
    

Modified http://viz.hpccsystems.com/v1.8.4/dist-amd-src/hpcc-viz.js to a secure url

Modified http://viz.hpccsystems.com/v1.8.4/dist-amd-src/hpcc-bundles.js to a secure url

https://viz.hpccsystems.com/v1.8.4/dist-amd-src/hpcc-viz.js

https://viz.hpccsystems.com/v1.8.4/dist-amd-src/hpcc-bundles.js