D3 Examples - A colour palette based off ONS

xxxxxxxxxx
 
<!DOCTYPE html>
​
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
  <script src="https://npmcdn.com/babel-core@5.8.34/browser.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/gka/chroma.js/chroma.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
​
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
    }
​
    p {
      max-width: 600px;
    }
​
    svg#sex {
      width: 800px;
      height: 210px;
    }
​
    svg#five {
      width: 800px;
      height: 210px;
    }
​
    svg#nine {
      width: 1000px;
      height: 160px;
    }
​
    td {
      text-align: center;
    }
​
    table {
      border-collapse: collapse;
    }
​
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
​
  <link rel="stylesheet" type="text/css" href="bootstrap-grid.css">
</head>
​
<body>
  <h1>New ONS colours</h1>
  <h2>Male/Female</h2>
  <svg id="sex"></svg>
  <code>["#234d70","#00a5a1"]</code>
​
​
  <h2>5 colour palette</h2>
  <svg id="five"></svg>
  <code>["#053D58","#24A79B","#3A7899","#ABC149","#005D60"]</code>
​
  <h2>9 colours</h2>
  <svg id="nine"></svg>
​
  <code>["#053D58","#24A79B","#3A7899","#ABC149","#005D60","#3383EF","#493C7F","#7EC8FA","#2A5FB8"]</code>
​
  <h2>Sequential palette</h2>
​
  <select id="seqNum">
    <option value=3>Three</option>
    <option value=4>Four</option>
    <option value=5>Five</option>
    <option value=6>Six</option>
    <option value=7>Seven</option>
  </select> colours from
​
  <select id="seqCol">
    <option value="#053D58">Midnight</option>
    <option value="#24A79B">Aquamarine</option>
    <option value="#3A7899">Denim</option>
    <option value="#ABC149">Straw</option>
    <option value="#005D60">Forest</option>
    <option value="#3383EF">Cobalt</option>
    <option value="#493C7F">Navy</option>
    <option value="#7EC8FA">Sky</option>
    <option value="#2A5FB8">Admiral</option>
  </select>
​
  <button onclick='seqPal()'>Create palette</button>
​
  <div id="sequential"></div>
  <code id="seqPalCode"></code>
​
  <h2>Diverging palette</h2>
​
  <select id="divNum">
    <option value=3>Three</option>
    <option value=4>Four</option>
    <option value=5>Five</option>
    <option value=6>Six</option>
    <option value=7>Seven</option>
  </select> colours based on
​
  <select id="divCol">
    <option value="#053D58">Midnight</option>
    <option value="#24A79B">Aquamarine</option>
    <option value="#3A7899">Denim</option>
    <option value="#ABC149">Straw</option>
    <option value="#005D60">Forest</option>
    <option value="#3383EF">Cobalt</option>
    <option value="#493C7F">Navy</option>
    <option value="#7EC8FA">Sky</option>
    <option value="#2A5FB8">Admiral</option>
  </select>
​
  <button onclick='divPal()'>Create palette</button>
​
  <div id="divergent"></div>
  <code id="divPalCode"></code>
​
  <script>
    var sex = ["#234d70","#00a5a1"]
    d3.select('#sex')
      .selectAll('circle')
      .data(sex)
      .enter()
      .append('circle')
      .attr("fill", function(d) {
        return d
      })
      .attr("cx", function(d, i) {
        return 150 * (i + 0.5)
      })
      .attr("cy", 100)
      .attr("r", 50)
​
    d3.select('#sex')
      .selectAll('text')
      .data(["Male","Female"])
      .enter()
      .append('text')
      .text(function(d) {
        return d
      })
      .attr("x", function(d, i) {
        return 150 * (i + 0.5)
      })
      .attr("y", 180)
      .attr("text-anchor", "middle")
​
​
    var colours = ["#053D58", "#24A79B", "#3A7899", "#ABC149", "#005D60", "#3383EF", "#493C7F", "#7EC8FA", "#2A5FB8"]
​
    var names = ["Midnight", "Aquamarine", "Denim", "Straw", "Forest", "Cobalt", "Navy", "Sky", "Admiral"]
​
    d3.select('#five')
      .selectAll('circle')
      .data(colours.slice(0, 5))
      .enter()
      .append('circle')
      .attr("fill", function(d) {
        return d
      })
      .attr("cx", function(d, i) {
        return 150 * (i + 0.5)
      })
      .attr("cy", 100)
      .attr("r", 50)
​
    d3.select('#five')
      .selectAll('text')
      .data(names.slice(0, 5))
      .enter()
      .append('text')
      .text(function(d) {
        return d
      })
      .attr("x", function(d, i) {
        return 150 * (i + 0.5)
      })
      .attr("y", 180)
      .attr("text-anchor", "middle")
​
    d3.select("#nine")
      .selectAll('circle')
      .data(colours)
      .enter()
      .append('circle')
      .attr("fill", function(d) {
        return d
      })
      .attr("cx", function(d, i) {
        return 85 * (i + 0.5)
      })
      .attr("cy", 50)
      .attr("r", 30)
​
    d3.select('#nine')
      .selectAll('text')
      .data(names)
      .enter()
      .append('text')
      .text(function(d) {
        return d
      })
      .attr("x", function(d, i) {
        return 85 * (i + 0.5)
      })
      .attr("y", 130)
      .attr("text-anchor", "middle")
​
    //sequential palettes
​
    function seqPal() {
      var sequential = d3.select("#sequential")
      var seqNum = +document.getElementById('seqNum').value
      var i = d3.interpolate(1.5, 2.2)
      var seqColour = document.getElementById('seqCol').value
      var seqColInd = colours[colours.indexOf(seqColour)]
​
      sequential.selectAll("*").remove()
​
      sequential.append('svg')
        .attr("width", "800px")
        .attr("height", "160px")
​
​
      sequential.select('svg')
        .selectAll('circle')
        .data(chroma.scale([chroma(seqColInd), chroma(seqColInd).brighten(i((seqNum - 3) / 4))])
          .mode('lch')
          .colors(seqNum))
        .enter()
        .append('circle')
        .attr("fill", function(d) {
          return d
        })
        .attr("cx", function(d, i) {
          return 800 / seqNum * (i + 0.5)
        })
        .attr("cy", 50)
        .attr("r", 40)
​
      sequential.select('svg')
        .selectAll('text')
        .data(chroma.scale([chroma(seqColInd), chroma(seqColInd).brighten(i((seqNum - 3) / 4))])
          .mode('lch')
          .colors(seqNum))
        .enter()
        .append('text')
        .text(function(d) {
          return d
        })
        .attr("x", function(d, i) {
          return 800 / seqNum * (i + 0.5)
        })
        .attr("y", 130)
        .attr("text-anchor", "middle")
​
      d3.select("#seqPalCode").text("[" + chroma.scale([chroma(seqColInd), chroma(seqColInd).brighten(i((seqNum - 3) / 4))])
        .mode('lch')
        .colors(seqNum) +
        "]")
    } //end seqPal function
​
    function divPal() {
      var divergent = d3.select("#divergent")
      var divNum = +document.getElementById('divNum').value
      var divColour = document.getElementById('divCol').value
​
      divergent.selectAll("*").remove()
​
      divergent.append('svg')
        .attr("width", "800px")
        .attr("height", "160px")
​
      divergent.select('svg')
        .selectAll('circle')
        .data(chroma.scale([chroma(divColour), "#ccc", chroma(divColour).set('hsl.h', chroma(divColour).get('hsl.h') - 180)])
          .mode('lch')
          .colors(divNum))
        .enter()
        .append('circle')
        .attr("fill", function(d) {
          return d
        })
        .attr("cx", function(d, i) {
          return 800 / divNum * (i + 0.5)
        })
        .attr("cy", 50)
        .attr("r", 40)
​
      d3.select("#divPalCode").text("["
      + chroma.scale([chroma(divColour), "#ccc", chroma(divColour).set('hsl.h', chroma(divColour).get('hsl.h') - 180)])
      .mode('lch')
      .colors(divNum) +
        "]")
    } //end divPal function
  </script>
</body>
​
    