I have been immersing myself in the world of d3js and more, specifically Plotly.js. This has required me to look at palettes, and to create some palettes - which I did with Paletton. I find it tedious, so I am creating some helpers, like the code below which displays a given list of palettes (each of which is simply an array of colors in your favorite format).
<table id="Palette">
<tbody></tbody>
</table>
<script>
var defaultColorsPalette = ["#ffd99a", "#225ea8", "#ffc09a", "#9dc4f4", "#ffbf58", "#ffdb58", "#257294", "#ff9658", "#61a1f3", "#ffa719", "#ffce19", "#ff6e19","#ffe99a", "#2a82f2", "#ff9e00", "#ffc900", "#ff5f00", "#036bf0"
];
//via colorweb2
var sequentialMultihueBlueYellowPalette = ["#ffffd9", "#edf8b1", "#c7e9b4", "#7fcdbb", "#41b6c4", "#1d91c0", "#225ea8", "#253494", "#081d58"];
//via colorweb2
var sequentialSingleHueVioletPalette = ["#d6c8e4", "#887caf", "#dadaeb", "#bcbddc", "#9e9ac8", "#2E1483", "#6a51a3", "#54278f", "#3f007d"];
function addTableRowofColors(array,$row) {
for (var jj=0;jj < array.length; jj++ ){
var row = "<td style='width:80px; background-color:" + array[jj] + " '>" + array[jj];
$row.append(row);
} //for
return $row;
}
$(function dumpPalettes(){
var palettes =[defaultColorsPalette, sequentialMultihueBlueYellowPalette, sequentialSingleHueVioletPalette];
var $table = $("#Palette").find('tbody');
var $row = $table;
for ( var ii = 0; ii < palettes.length; ii++){
var pal = palettes[ii];
$row = $table.append("<tr>" ).append(addTableRowofColors(pal,$row )).append("</tr>" );
}
} );
</script>
I know that the cool kids post these to someplace like jsFiddle - except its not working there....Hmmm. More to come.
<tbody></tbody>
</table>
<script>
var defaultColorsPalette = ["#ffd99a", "#225ea8", "#ffc09a", "#9dc4f4", "#ffbf58", "#ffdb58", "#257294", "#ff9658", "#61a1f3", "#ffa719", "#ffce19", "#ff6e19","#ffe99a", "#2a82f2", "#ff9e00", "#ffc900", "#ff5f00", "#036bf0"
];
//via colorweb2
var sequentialMultihueBlueYellowPalette = ["#ffffd9", "#edf8b1", "#c7e9b4", "#7fcdbb", "#41b6c4", "#1d91c0", "#225ea8", "#253494", "#081d58"];
//via colorweb2
var sequentialSingleHueVioletPalette = ["#d6c8e4", "#887caf", "#dadaeb", "#bcbddc", "#9e9ac8", "#2E1483", "#6a51a3", "#54278f", "#3f007d"];
function addTableRowofColors(array,$row) {
for (var jj=0;jj < array.length; jj++ ){
var row = "<td style='width:80px; background-color:" + array[jj] + " '>" + array[jj];
$row.append(row);
} //for
return $row;
}
$(function dumpPalettes(){
var palettes =[defaultColorsPalette, sequentialMultihueBlueYellowPalette, sequentialSingleHueVioletPalette];
var $table = $("#Palette").find('tbody');
var $row = $table;
for ( var ii = 0; ii < palettes.length; ii++){
var pal = palettes[ii];
$row = $table.append("<tr>" ).append(addTableRowofColors(pal,$row )).append("</tr>" );
}
} );
</script>
I know that the cool kids post these to someplace like jsFiddle - except its not working there....Hmmm. More to come.
Comments