Skip to content

Instantly share code, notes, and snippets.

@curran

curran/.block

Last active December 31, 2024 00:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save curran/c130b1d3d68a375c8eb41371f2c2a75b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save curran/c130b1d3d68a375c8eb41371f2c2a75b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. curran revised this gist Feb 7, 2018. 1 changed file with 16 additions and 3 deletions.
    19 changes: 16 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -22,7 +22,11 @@
    <div class="col">
    <input type="text" id="b" class="form-control picker" value="#ff0f0f">
    </div>
    <svg width="960" height="470"></svg>
    <svg width="960" height="470">
    <filter id="grayscale">
    <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    </filter>
    </svg>
    </div>
    <script>
    var svg = d3.select("svg"),
    @@ -57,11 +61,20 @@
    .attr("width", width/2)
    .attr("height", height);

    // Grayscale filter for comparing luminance.
    y = 335;
    rectEnter
    .append("rect")
    .attr("class", function (d) { return "color-rect-" + d; })
    .attr("x", function (d, i){ return i * width/2; })
    .attr("y", y)
    .attr("width", width/2)
    .attr("height", height)
    .attr("filter", "url(#grayscale)");;

    function change (value) {
    var id = d3.select(this).attr("id");
    d3.selectAll(".color-rect-" + id)
    .attr("fill", value);
    d3.selectAll(".color-rect-" + id).attr("fill", value);
    }

    $(".picker")
  2. curran revised this gist Dec 15, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,9 +3,9 @@
    <meta charset="utf-8">
    <script src="https://unpkg.com/[email protected]/build/d3.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/@claviska/jquery-minicolors@2.2.4/jquery.minicolors.min.js"></script>
    <script src="https://unpkg.com/jquery-minicolors@2.1.10/jquery.minicolors.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/@claviska/jquery-minicolors@2.2.4/jquery.minicolors.css">
    <link rel="stylesheet" href="https://unpkg.com/jquery-minicolors@2.1.10/jquery.minicolors.css">
    <style>
    body {
    margin:0;
  3. curran revised this gist Apr 8, 2017. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,10 +4,10 @@ In data visualizations, sometimes the visual marks appear far apart (e.g. scatte

    Intended to complement other tools for color scheme design, including:

    * ColorBrewer http://colorbrewer2.org/#type=qualitative&scheme=Paired&n=12
    * Every ColorBrewer Scale https://bl.ocks.org/mbostock/5577023
    * Chroma.js Color Scale Helper https://vis4.net/labs/multihue/#colors=white, green|steps=5|bez=1|coL=1
    * jQuery Minicolors http://labs.abeautifulsite.net/jquery-minicolors/
    * [ColorBrewer](http://colorbrewer2.org/#type=qualitative&scheme=Paired&n=12)
    * [Every ColorBrewer Scale](https://bl.ocks.org/mbostock/5577023)
    * [Chroma.js Color Scale Helper](https://vis4.net/labs/multihue/#colors=white, green|steps=5|bez=1|coL=1)
    * [jQuery Minicolors](http://labs.abeautifulsite.net/jquery-minicolors/)

    Built with [blockbuilder.org](http://blockbuilder.org)

  4. curran revised this gist Apr 8, 2017. 1 changed file with 6 additions and 2 deletions.
    8 changes: 6 additions & 2 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -7,6 +7,10 @@ Intended to complement other tools for color scheme design, including:
    * ColorBrewer http://colorbrewer2.org/#type=qualitative&scheme=Paired&n=12
    * Every ColorBrewer Scale https://bl.ocks.org/mbostock/5577023
    * Chroma.js Color Scale Helper https://vis4.net/labs/multihue/#colors=white, green|steps=5|bez=1|coL=1
    * jQuery Minicolors http://labs.abeautifulsite.net/jquery-minicolors/ (hand-picked collision avoidance)
    * jQuery Minicolors http://labs.abeautifulsite.net/jquery-minicolors/

    Built with [blockbuilder.org](http://blockbuilder.org)
    Built with [blockbuilder.org](http://blockbuilder.org)

    <!-- Start of SimpleHitCounter Code -->
    <div align="center"><img src="http://simplehitcounter.com/hit.php?uid=2240183&f=16777215&b=0" border="0" height="18" width="83"></a></div>
    <!-- End of SimpleHitCounter Code -->
  5. curran revised this gist Apr 8, 2017. 1 changed file with 7 additions and 0 deletions.
    7 changes: 7 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,4 +2,11 @@ A design tool for comparing colors.

    In data visualizations, sometimes the visual marks appear far apart (e.g. scatter plots), and sometimes they are adjacent (e.g. heatmaps, choropleths). This tool allows you to compare colors while designing a color palette for data visualizations, such that you can see how colors visually compare to one another when they are both far apart and close together.

    Intended to complement other tools for color scheme design, including:

    * ColorBrewer http://colorbrewer2.org/#type=qualitative&scheme=Paired&n=12
    * Every ColorBrewer Scale https://bl.ocks.org/mbostock/5577023
    * Chroma.js Color Scale Helper https://vis4.net/labs/multihue/#colors=white, green|steps=5|bez=1|coL=1
    * jQuery Minicolors http://labs.abeautifulsite.net/jquery-minicolors/ (hand-picked collision avoidance)

    Built with [blockbuilder.org](http://blockbuilder.org)
  6. curran revised this gist Apr 8, 2017. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,5 @@
    A design tool for comparing colors.

    In data visualizations, sometimes the visual marks appear far apart (e.g. scatter plots), and sometimes they are adjacent (e.g. heatmaps, choropleths). This tool allows you to compare colors while designing a color palette for data visualizations, such that you can see how colors visually compare to one another when they are both far apart and close together.

    Built with [blockbuilder.org](http://blockbuilder.org)
  7. Building blocks revised this gist Apr 8, 2017. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  8. curran revised this gist Apr 8, 2017. 1 changed file with 12 additions and 7 deletions.
    19 changes: 12 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -27,23 +27,28 @@
    <script>
    var svg = d3.select("svg"),
    width = svg.attr("width"),
    height = svg.attr("height");
    height = svg.attr("height"),
    y;

    var rectEnter = svg
    .selectAll("rect")
    .data(["a", "b"])
    .enter();


    // Small rectangles at the top.
    var rectWidth = 90;
    var rectHeight = 90;
    y = 50;
    rectEnter
    .append("rect")
    .attr("class", function (d) { return "color-rect-" + d; })
    .attr("x", function (d, i){ return i * width/2; })
    .attr("width", width/2)
    .attr("height", height);
    .attr("x", function (d, i){ return i * width/2 + width/4 - rectWidth/2; })
    .attr("y", y)
    .attr("width", rectWidth)
    .attr("height", rectHeight);

    // Large rectangles at the bottom.
    var y = 200;
    y = 200;
    rectEnter
    .append("rect")
    .attr("class", function (d) { return "color-rect-" + d; })
    @@ -55,7 +60,7 @@

    function change (value) {
    var id = d3.select(this).attr("id");
    d3.select(".color-rect-" + id)
    d3.selectAll(".color-rect-" + id)
    .attr("fill", value);
    }

  9. curran revised this gist Apr 8, 2017. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -33,6 +33,8 @@
    .selectAll("rect")
    .data(["a", "b"])
    .enter();


    rectEnter
    .append("rect")
    .attr("class", function (d) { return "color-rect-" + d; })
    @@ -41,10 +43,12 @@
    .attr("height", height);

    // Large rectangles at the bottom.
    var y = 200;
    rectEnter
    .append("rect")
    .attr("class", function (d) { return "color-rect-" + d; })
    .attr("x", function (d, i){ return i * width/2; })
    .attr("y", y)
    .attr("width", width/2)
    .attr("height", height);

  10. curran revised this gist Apr 8, 2017. 1 changed file with 16 additions and 3 deletions.
    19 changes: 16 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -22,20 +22,33 @@
    <div class="col">
    <input type="text" id="b" class="form-control picker" value="#ff0f0f">
    </div>
    <svg width="960" height="400"></svg>
    <svg width="960" height="470"></svg>
    </div>
    <script>
    var svg = d3.select("svg"),
    width = svg.attr("width"),
    height = svg.attr("height");

    svg.selectAll("rect").data(["a", "b"])
    .enter().append("rect")
    var rectEnter = svg
    .selectAll("rect")
    .data(["a", "b"])
    .enter();
    rectEnter
    .append("rect")
    .attr("class", function (d) { return "color-rect-" + d; })
    .attr("x", function (d, i){ return i * width/2; })
    .attr("width", width/2)
    .attr("height", height);

    // Large rectangles at the bottom.
    rectEnter
    .append("rect")
    .attr("class", function (d) { return "color-rect-" + d; })
    .attr("x", function (d, i){ return i * width/2; })
    .attr("width", width/2)
    .attr("height", height);


    function change (value) {
    var id = d3.select(this).attr("id");
    d3.select(".color-rect-" + id)
  11. curran revised this gist Apr 8, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -31,14 +31,14 @@

    svg.selectAll("rect").data(["a", "b"])
    .enter().append("rect")
    .attr("id", function (d) { return "color-rect-" + d; })
    .attr("class", function (d) { return "color-rect-" + d; })
    .attr("x", function (d, i){ return i * width/2; })
    .attr("width", width/2)
    .attr("height", height);

    function change (value) {
    var id = d3.select(this).attr("id");
    d3.select("#color-rect-" + id)
    d3.select(".color-rect-" + id)
    .attr("fill", value);
    }

  12. curran revised this gist Apr 8, 2017. 1 changed file with 8 additions and 4 deletions.
    12 changes: 8 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -42,9 +42,13 @@
    .attr("fill", value);
    }

    $(".picker").minicolors({
    change: change,
    theme: "bootstrap"
    });
    $(".picker")
    .minicolors({
    change: change,
    theme: "bootstrap"
    })
    .each(function (d){
    change.call(this, d3.select(this).attr("value"));
    });
    </script>
    </body>
  13. curran revised this gist Apr 8, 2017. 1 changed file with 7 additions and 6 deletions.
    13 changes: 7 additions & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -36,13 +36,14 @@
    .attr("width", width/2)
    .attr("height", height);

    function change (value) {
    var id = d3.select(this).attr("id");
    d3.select("#color-rect-" + id)
    .attr("fill", value);
    }

    $(".picker").minicolors({
    change: function(value, opacity) {
    if( !value ) return;
    var id = d3.select(this).attr("id");
    d3.select("#color-rect-" + id)
    .attr("fill", value);
    },
    change: change,
    theme: "bootstrap"
    });
    </script>
  14. curran revised this gist Apr 8, 2017. No changes.
  15. curran revised this gist Apr 8, 2017. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -20,11 +20,10 @@
    <input type="text" id="a" class="form-control picker" value="#ff6161">
    </div>
    <div class="col">
    <input type="text" id="b" class="form-control picker" value="#ff6161">
    <input type="text" id="b" class="form-control picker" value="#ff0f0f">
    </div>
    <svg width="960" height="400"></svg>
    </div>

    <script>
    var svg = d3.select("svg"),
    width = svg.attr("width"),
  16. curran revised this gist Apr 8, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -41,7 +41,7 @@
    change: function(value, opacity) {
    if( !value ) return;
    var id = d3.select(this).attr("id");
    d3.select("color-rect-" + id)
    d3.select("#color-rect-" + id)
    .attr("fill", value);
    },
    theme: "bootstrap"
  17. curran revised this gist Apr 8, 2017. 1 changed file with 12 additions and 9 deletions.
    21 changes: 12 additions & 9 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -26,22 +26,25 @@
    </div>

    <script>
    $(".picker").minicolors({
    change: function(value, opacity) {
    if( !value ) return;
    console.log(value);
    },
    theme: "bootstrap"
    });

    var svg = d3.select("svg"),
    width = svg.attr("width"),
    height = svg.attr("height");

    svg.selectAll("rect").data(["a", "b"])
    .enter().append("rect")
    .attr("id", function (d) { return "color-rect-" + d; })
    .attr("x", function (d, i){ return i * width/2; })
    .attr("width", width/2)
    .attr("height", height)
    .attr("height", height);

    $(".picker").minicolors({
    change: function(value, opacity) {
    if( !value ) return;
    var id = d3.select(this).attr("id");
    d3.select("color-rect-" + id)
    .attr("fill", value);
    },
    theme: "bootstrap"
    });
    </script>
    </body>
  18. curran revised this gist Apr 8, 2017. 1 changed file with 12 additions and 3 deletions.
    15 changes: 12 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -22,8 +22,7 @@
    <div class="col">
    <input type="text" id="b" class="form-control picker" value="#ff6161">
    </div>
    <svg width="960" height="400">
    </svg>
    <svg width="960" height="400"></svg>
    </div>

    <script>
    @@ -32,7 +31,17 @@
    if( !value ) return;
    console.log(value);
    },
    theme: 'bootstrap'
    theme: "bootstrap"
    });

    var svg = d3.select("svg"),
    width = svg.attr("width"),
    height = svg.attr("height");

    svg.selectAll("rect").data(["a", "b"])
    .enter().append("rect")
    .attr("x", function (d, i){ return i * width/2; })
    .attr("width", width/2)
    .attr("height", height)
    </script>
    </body>
  19. curran revised this gist Apr 8, 2017. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -22,6 +22,8 @@
    <div class="col">
    <input type="text" id="b" class="form-control picker" value="#ff6161">
    </div>
    <svg width="960" height="400">
    </svg>
    </div>

    <script>
  20. curran revised this gist Apr 8, 2017. 1 changed file with 11 additions and 2 deletions.
    13 changes: 11 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -14,9 +14,18 @@
    </head>

    <body>
    <input type="text" id="color-a" class="form-control demo" data-control="hue" value="#ff6161"></input>
    <div class="container-fluid">
    <div class="row">
    <div class="col">
    <input type="text" id="a" class="form-control picker" value="#ff6161">
    </div>
    <div class="col">
    <input type="text" id="b" class="form-control picker" value="#ff6161">
    </div>
    </div>

    <script>
    $("#color-a").minicolors({
    $(".picker").minicolors({
    change: function(value, opacity) {
    if( !value ) return;
    console.log(value);
  21. curran revised this gist Apr 8, 2017. No changes.
  22. curran revised this gist Apr 8, 2017. No changes.
  23. curran revised this gist Apr 8, 2017. 1 changed file with 1 addition and 4 deletions.
    5 changes: 1 addition & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -19,10 +19,7 @@
    $("#color-a").minicolors({
    change: function(value, opacity) {
    if( !value ) return;
    if( opacity ) value += ', ' + opacity;
    if( typeof console === 'object' ) {
    console.log(value);
    }
    console.log(value);
    },
    theme: 'bootstrap'
    });
  24. curran revised this gist Apr 8, 2017. 1 changed file with 10 additions and 12 deletions.
    22 changes: 10 additions & 12 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -16,17 +16,15 @@
    <body>
    <input type="text" id="color-a" class="form-control demo" data-control="hue" value="#ff6161"></input>
    <script>

    $("#color-a").minicolors({
    change: function(value, opacity) {
    if( !value ) return;
    if( opacity ) value += ', ' + opacity;
    if( typeof console === 'object' ) {
    console.log(value);
    }
    },
    theme: 'bootstrap'
    });

    $("#color-a").minicolors({
    change: function(value, opacity) {
    if( !value ) return;
    if( opacity ) value += ', ' + opacity;
    if( typeof console === 'object' ) {
    console.log(value);
    }
    },
    theme: 'bootstrap'
    });
    </script>
    </body>
  25. curran revised this gist Apr 8, 2017. 1 changed file with 3 additions and 15 deletions.
    18 changes: 3 additions & 15 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -16,19 +16,8 @@
    <body>
    <input type="text" id="color-a" class="form-control demo" data-control="hue" value="#ff6161"></input>
    <script>
    $(document).ready( function() {
    $('.demo').each( function() {
    //
    // Dear reader, it's actually very easy to initialize MiniColors. For example:
    //
    // $(selector).minicolors();
    //
    // The way I've done it below is just for the demo, so don't get confused
    // by it. Also, data- attributes aren't supported at this time...they're
    // only used for this demo.
    //
    $(this).minicolors({


    $("#color-a").minicolors({
    change: function(value, opacity) {
    if( !value ) return;
    if( opacity ) value += ', ' + opacity;
    @@ -38,7 +27,6 @@
    },
    theme: 'bootstrap'
    });
    });
    });

    </script>
    </body>
  26. curran revised this gist Apr 8, 2017. 1 changed file with 1 addition and 9 deletions.
    10 changes: 1 addition & 9 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -28,15 +28,7 @@
    // only used for this demo.
    //
    $(this).minicolors({
    control: $(this).attr('data-control') || 'hue',
    defaultValue: $(this).attr('data-defaultValue') || '',
    format: $(this).attr('data-format') || 'hex',
    keywords: $(this).attr('data-keywords') || '',
    inline: $(this).attr('data-inline') === 'true',
    letterCase: $(this).attr('data-letterCase') || 'lowercase',
    opacity: $(this).attr('data-opacity'),
    position: $(this).attr('data-position') || 'bottom left',
    swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],

    change: function(value, opacity) {
    if( !value ) return;
    if( opacity ) value += ', ' + opacity;
  27. curran revised this gist Apr 8, 2017. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,6 +5,7 @@
    <script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/@claviska/[email protected]/jquery.minicolors.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/@claviska/[email protected]/jquery.minicolors.css">
    <style>
    body {
    margin:0;
  28. curran revised this gist Apr 8, 2017. 1 changed file with 34 additions and 3 deletions.
    37 changes: 34 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    <head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/[email protected]/build/d3.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/jquery.slim.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/@claviska/[email protected]/jquery.minicolors.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
    <style>
    @@ -13,8 +13,39 @@
    </head>

    <body>
    <input type="text" id="color-a" class="form-control" data-control="hue" value="#ff6161">
    <input type="text" id="color-a" class="form-control demo" data-control="hue" value="#ff6161"></input>
    <script>
    $("#color-a").minicolors();
    $(document).ready( function() {
    $('.demo').each( function() {
    //
    // Dear reader, it's actually very easy to initialize MiniColors. For example:
    //
    // $(selector).minicolors();
    //
    // The way I've done it below is just for the demo, so don't get confused
    // by it. Also, data- attributes aren't supported at this time...they're
    // only used for this demo.
    //
    $(this).minicolors({
    control: $(this).attr('data-control') || 'hue',
    defaultValue: $(this).attr('data-defaultValue') || '',
    format: $(this).attr('data-format') || 'hex',
    keywords: $(this).attr('data-keywords') || '',
    inline: $(this).attr('data-inline') === 'true',
    letterCase: $(this).attr('data-letterCase') || 'lowercase',
    opacity: $(this).attr('data-opacity'),
    position: $(this).attr('data-position') || 'bottom left',
    swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
    change: function(value, opacity) {
    if( !value ) return;
    if( opacity ) value += ', ' + opacity;
    if( typeof console === 'object' ) {
    console.log(value);
    }
    },
    theme: 'bootstrap'
    });
    });
    });
    </script>
    </body>
  29. curran revised this gist Apr 8, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -13,8 +13,8 @@
    </head>

    <body>
    <input type="text" id="color-a" class="form-control demo" data-control="hue" value="#ff6161">
    <input type="text" id="color-a" class="form-control" data-control="hue" value="#ff6161">
    <script>
    $(".color--a").minicolors();
    $("#color-a").minicolors();
    </script>
    </body>
  30. curran revised this gist Apr 8, 2017. 1 changed file with 3 additions and 13 deletions.
    16 changes: 3 additions & 13 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@
    <script src="https://unpkg.com/[email protected]/build/d3.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/jquery.slim.min.js"></script>
    <script src="https://unpkg.com/@claviska/[email protected]/jquery.minicolors.min.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
    <style>
    body {
    margin:0;
    @@ -13,18 +13,8 @@
    </head>

    <body>
    <input type="text" id="color-a" class="form-control demo" data-control="hue" value="#ff6161">
    <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500)

    svg.append("text")
    .text("Edit the code below to change me!")
    .attr("y", 200)
    .attr("x", 120)
    .style("font-size", 36)
    .style("font-family", "monospace")

    $(".color--a").minicolors();
    </script>
    </body>