betweentwobrackets.github.io

D3 Color Wheel was created as part of an upcoming article on the use of colour in data graphics. Using the D3 pie layout the chart displays a colour wheel generated from JSON data.

Download from Github

Example

index.html

<script src="d3.min.js"></script>
<script src="d3-colorwheel.js"></script>

<style>
svg {
    font-family: "Helvetica", Arial, sans-serif;
    font-weight: 100;
}
.arc path {
   stroke: #fff;
}
.arc text {
    font-size: 120%;
    fill: #aaa;
}
</style>

<p id="colour-wheels"></p>

<script src="color-wheels.js"></script>

color-wheels.js

var data = [
    {
        title: "Primary Colours",
        colors: [
            {label: 'Red', color: "#f00"},
            {label: 'Green', color: "#0f0"},
            {label: 'Blue', color: "#00f"}
        ]
    },
    {
        title: "Secondary Colours",
        colors: [
            {label: "Red", color: "#f00"},
            {label: "Yellow", color: "#ff0"},
            {label: "Green", color: "#0f0"},
            {label: "Cyan", color: "#0ff"},
            {label: "Blue", color: "#00f"},
            {label: "Magenta", color: "#f0f"}
        ]
    },
    {
        title: "Modified Secondary Colours",
        colors: [
            {label: "Red", color: "#f00"},
            {label: "Yellow", color: "#ff0"},
            {label: "Grey", color: "#888"},
            {label: "Cyan", color: "#0ff"},
            {label: "Blue", color: "#00f"},
            {label: "Orange", color: "#f67e18"}
        ]
    }
];

var colorWheel = d3.colorWheel().width(300).height(360);

var svg = d3.select("#colour-wheels").selectAll("svg")
    .data(data)
  .enter().append("svg")
    .call(colorWheel);