A simple interface for seeing the classes selected by d3-scale-cluster for your data, colours and number of classes. You can enter your own colour choices (or select good colours from ColorBrewer etc). I made this tool as I needed to manually create the colour schemes in other mapping applications.
The tool uses jscolor for the colour pickers.
xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Simple Interface for d3-scale-cluster</title> <!-- CSS --> <link href="bootstrap.min.css" rel="stylesheet"> <link href="scale-cluster.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-12"> <h1>Using d3-scale-cluster</h1> <p> A simple interface for seeing the classes selected by <a href="https://github.com/schnerd/d3-scale-cluster">d3-scale-cluster</a> for your own data, colours and required number of classes. </p> <p> You can enter your own colour choices (or select good colours from <a href="https://colorbrewer2.org/">ColorBrewer</a> etc). </p> <p> I made this tool as I needed to manually create the colour schemes for use in other mapping applications. </p> </div> </div> <div class="row"> <div class="col-sm-2"> <form-group> <label for="classes">Number of classes:</label> <select id="classes" name="classes"> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> </form-group> </div> <div class="col-sm-4"> <form-group> <label for="start-colour">First colour:</label> <input class="jscolor" id="start-colour" value="ab2567"> </form-group> <form-group> <label for="end-colour">Last colour:</label> <input class="jscolor" id="end-colour" value="ab2000"> </form-group> </div> <div class="col-sm-4"> <form-group> <label for="user-data">Type or paste your data (numbers). One number per line. No blank lines (they will be treated as zeroes).</label> <textarea name="user-data" id="user-data" rows="8" cols="10">1 2 4 5 12 43 52 123 234 1244</textarea> </form-group> </div> <div class="col-sm-2"> <button id="user-data-button">Refresh</button> </div> </div> <div class="row"> <div class="col-sm-12"> <div id="output">Enter your own data (or use the prefilled data), select the number of classes, and click <b>Refresh</b> to see the results.</div> </div> </div> </div> <script src="d3.min.js"></script> <script src="d3-scale-cluster.min.js"></script> <script src="jscolor.min.js"></script> <script src="scale-cluster.js"></script> </body></html> https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js
https://oss.maxcdn.com/respond/1.4.2/respond.min.js