Skip to content

Instantly share code, notes, and snippets.

@irees
Last active March 17, 2016 18:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save irees/95ec62b7a8f68080d08a to your computer and use it in GitHub Desktop.
Save irees/95ec62b7a8f68080d08a to your computer and use it in GitHub Desktop.
transitland crayons
// Inspired by https://github.com/cooperhewitt/py-cooperhewitt-swatchbook
RGBColor = function(r, g, b, name) {
this.r = r;
this.g = g;
this.b = b;
this.name = name;
};
RGBColor.from_hex = function (hex, name) {
hex = hex.replace('#','');
return new RGBColor(
parseInt(hex.substring(0,2),16) / 255.0,
parseInt(hex.substring(2,4),16) / 255.0,
parseInt(hex.substring(4,6),16) / 255.0,
name
)
}
RGBColor.prototype = {
distance: function(other) {
return (
Math.pow(other.r - this.r, 2) +
Math.pow(other.g - this.g, 2) +
Math.pow(other.b - this.b, 2)
)
},
distance_delta_e: function(other) {
}
};
Palette = function() {
this.colors = [];
};
Palette.prototype = {
load: function(colors) {
var self = this;
colors.forEach(function(i) {
self.add(RGBColor.from_hex(i.hex, i.name))
});
},
add: function(color) {
this.colors.push(color);
},
closest: function(color) {
var best_distance = Infinity;
var best_color = null;
this.colors.forEach(function(i) {
var distance = color.distance(i);
if (distance < best_distance) {
best_distance = distance;
best_color = i;
}
});
return best_color;
},
closest_delta_e: function(color) {
// magic
}
}
// Pallette from https://github.com/cooperhewitt/py-cooperhewitt-swatchbook
var colors = [{
"hex": "#fc89ac",
"name": "Tickle Me Pink",
"family": "pink"
}, {
"hex": "#cb4154",
"name": "Brick Red"
}, {
"hex": "#1f75fe",
"name": "Blue",
"family": "blue"
}, {
"hex": "#1dacd6",
"name": "Cerulean"
}, {
"hex": "#ffa089",
"name": "Vivid Tangerine"
}, {
"hex": "#a8e4a0",
"name": "Granny Smith Apple",
"family": "green"
}, {
"hex": "#cdc5c2",
"name": "Silver"
}, {
"hex": "#17806d",
"name": "Tropical Rain Forest"
}, {
"hex": "#fc74fd",
"name": "Pink Flamingo",
"family": "pink"
}, {
"hex": "#fd7c6e",
"name": "Bittersweet"
}, {
"hex": "#7366bd",
"name": "Blue Violet",
"family": "violet"
}, {
"hex": "#ace5ee",
"name": "Blizzard Blue"
}, {
"hex": "#1164b4",
"name": "Green Blue",
"family": "blue"
}, {
"hex": "#b2ec5d",
"name": "Inchworm"
}, {
"hex": "#6699cc",
"name": "Blue Gray"
}, {
"hex": "#ea7e5d",
"name": "Burnt Sienna"
}, {
"hex": "#58427c",
"name": "Cyber Grape"
}, {
"hex": "#bf4f51",
"name": "Bittersweet Shimmer"
}, {
"hex": "#c46210",
"name": "Alloy Orange"
}, {
"hex": "#5d76cb",
"name": "Indigo"
}, {
"hex": "#c5e384",
"name": "Yellow Green"
}, {
"hex": "#fdbcb4",
"name": "Melon"
}, {
"hex": "#d68a59",
"name": "Raw Sienna"
}, {
"hex": "#6e5160",
"name": "Eggplant"
}, {
"hex": "#ffaacc",
"name": "Carnation Pink"
}, {
"hex": "#45cea2",
"name": "Shamrock"
}, {
"hex": "#8fd400",
"name": "Sheen Green"
}, {
"hex": "#cd9575",
"name": "Antique Brass"
}, {
"hex": "#ef98aa",
"name": "Mauvelous"
}, {
"hex": "#6dae81",
"name": "Forest Green"
}, {
"hex": "#4a646c",
"name": "Deep Space Sparkle"
}, {
"hex": "#ffbcd9",
"name": "Cotton Candy"
}, {
"hex": "#ffa474",
"name": "Atomic Tangerine"
}, {
"hex": "#ff7f49",
"name": "Burnt Orange"
}, {
"hex": "#fefe22",
"name": "Laser Lemon"
}, {
"hex": "#bc5d58",
"name": "Chestnut"
}, {
"hex": "#fddde6",
"name": "Piggy Pink"
}, {
"hex": "#ffcf48",
"name": "Sunglow"
}, {
"hex": "#9fe2bf",
"name": "Sea Green"
}, {
"hex": "#324ab2",
"name": "Violet Blue"
}, {
"hex": "#0d98ba",
"name": "Blue Green"
}, {
"hex": "#c54b8c",
"name": "Mulberry"
}, {
"hex": "#f78fa7",
"name": "Pink Sherbert"
}, {
"hex": "#000000",
"name": "Black"
}, {
"hex": "#f75394",
"name": "Violet Red"
}, {
"hex": "#dd9475",
"name": "Copper"
}, {
"hex": "#7851a9",
"name": "Royal Purple"
}, {
"hex": "#fb7efd",
"name": "Shocking Pink"
}, {
"hex": "#18a7b5",
"name": "Teal Blue",
"family": "blue"
}, {
"hex": "#9d81ba",
"name": "Purple Mountain\'s Majesty"
}, {
"hex": "#a2add0",
"name": "Wild Blue Yonder"
}, {
"hex": "#2b6cc4",
"name": "Denim"
}, {
"hex": "#ffffff",
"name": "White"
}, {
"hex": "#efdecd",
"name": "Almond"
}, {
"hex": "#ffff99",
"name": "Canary"
}, {
"hex": "#bab86c",
"name": "Olive Green"
}, {
"hex": "#fce883",
"name": "Yellow"
}, {
"hex": "#0a7e8c",
"name": "Metallic Seaweed"
}, {
"hex": "#414a4c",
"name": "Outer Space"
}, {
"hex": "#ff8243",
"name": "Mango Tango"
}, {
"hex": "#c8385a",
"name": "Maroon"
}, {
"hex": "#ceff1d",
"name": "Electric Lime"
}, {
"hex": "#319177",
"name": "Illuminating Emerald"
}, {
"hex": "#1974d2",
"name": "Navy Blue"
}, {
"hex": "#b4674d",
"name": "Brown"
}, {
"hex": "#ee204d",
"name": "Red"
}, {
"hex": "#ff5349",
"name": "Red Orange"
}, {
"hex": "#e3256b",
"name": "Razzmatazz"
}, {
"hex": "#ebc7df",
"name": "Thistle"
}, {
"hex": "#8f509d",
"name": "Vivid Violet"
}, {
"hex": "#ff9baa",
"name": "Salmon"
}, {
"hex": "#ff43a4",
"name": "Wild Strawberry"
}, {
"hex": "#b0b7c6",
"name": "Cadet Blue"
}, {
"hex": "#faa76c",
"name": "Tan"
}, {
"hex": "#a5694f",
"name": "Sepia"
}, {
"hex": "#87a96b",
"name": "Asparagus"
}, {
"hex": "#76ff7a",
"name": "Screamin\' Green"
}, {
"hex": "#71bc78",
"name": "Fern"
}, {
"hex": "#8e4585",
"name": "Plum"
}, {
"hex": "#f664af",
"name": "Magenta"
}, {
"hex": "#fae7b5",
"name": "Banana Mania"
}, {
"hex": "#979aaa",
"name": "Manatee"
}, {
"hex": "#1fcecb",
"name": "Robin\'s Egg Blue"
}, {
"hex": "#fcb4d5",
"name": "Lavender"
}, {
"hex": "#aaf0d1",
"name": "Magic Mint"
}, {
"hex": "#c0448f",
"name": "Red Violet"
}, {
"hex": "#926eae",
"name": "Violet (Purple)"
}, {
"hex": "#c5d0e6",
"name": "Periwinkle"
}, {
"hex": "#de5d83",
"name": "Blush"
}, {
"hex": "#fd5e53",
"name": "Sunset Orange"
}, {
"hex": "#158078",
"name": "Pine Green"
}, {
"hex": "#80daeb",
"name": "Sky Blue"
}, {
"hex": "#c364c5",
"name": "Fuchsia"
}, {
"hex": "#2e5894",
"name": "B\'dazzled Blue"
}, {
"hex": "#ff48d0",
"name": "Razzle Dazzle Rose"
}, {
"hex": "#dd4492",
"name": "Cerise"
}, {
"hex": "#ffcfab",
"name": "Peach"
}, {
"hex": "#eceabe",
"name": "Spring Green"
}, {
"hex": "#85754e",
"name": "Gold Fusion"
}, {
"hex": "#1a4876",
"name": "Midnight Blue"
}, {
"hex": "#9aceeb",
"name": "Cornflower"
}, {
"hex": "#f0e891",
"name": "Green Yellow"
}, {
"hex": "#714b23",
"name": "Raw Umber"
}, {
"hex": "#f8d568",
"name": "Orange Yellow"
}, {
"hex": "#deaa88",
"name": "Tumbleweed"
}, {
"hex": "#77dde7",
"name": "Turquoise Blue"
}, {
"hex": "#e6a8d7",
"name": "Orchid"
}, {
"hex": "#d98695",
"name": "Shimmering Blush"
}, {
"hex": "#757575",
"name": "Sonic Silver"
}, {
"hex": "#ffbd88",
"name": "Macaroni and Cheese"
}, {
"hex": "#e7c697",
"name": "Gold"
}, {
"hex": "#1cac78",
"name": "Green"
}, {
"hex": "#1ca9c9",
"name": "Pacific Blue"
}, {
"hex": "#9c7c38",
"name": "Metallic Sunburst"
}, {
"hex": "#ff496c",
"name": "Radical Red"
}, {
"hex": "#9f8170",
"name": "Beaver"
}, {
"hex": "#cc6666",
"name": "Fuzzy Wuzzy"
}, {
"hex": "#a57164",
"name": "Blast Off Bronze"
}, {
"hex": "#a2a2d0",
"name": "Blue Bell"
}, {
"hex": "#7442c8",
"name": "Purple Heart"
}, {
"hex": "#cd4a4c",
"name": "Mahogany"
}, {
"hex": "#fdd9b5",
"name": "Apricot"
}, {
"hex": "#ca3767",
"name": "Jazzberry Jam"
}, {
"hex": "#ff2b2b",
"name": "Orange Red"
}, {
"hex": "#ffae42",
"name": "Yellow Orange"
}, {
"hex": "#ff6e4a",
"name": "Outrageous Orange"
}, {
"hex": "#3bb08f",
"name": "Jungle Green"
}, {
"hex": "#fc2847",
"name": "Scarlet"
}, {
"hex": "#fc6c85",
"name": "Wild Watermelon"
}, {
"hex": "#fddb6d",
"name": "Dandelion"
}, {
"hex": "#fff44f",
"name": "Lemon Yellow"
}, {
"hex": "#dbd7d2",
"name": "Timberwolf"
}, {
"hex": "#8a795d",
"name": "Shadow"
}, {
"hex": "#ffff66",
"name": "Unmellow Yellow"
}, {
"hex": "#1cd3a2",
"name": "Caribbean Green"
}, {
"hex": "#95918c",
"name": "Gray"
}, {
"hex": "#9c2542",
"name": "Big Dip O\' Ruby"
}, {
"hex": "#78dbe2",
"name": "Aquamarine"
}, {
"hex": "#cda4de",
"name": "Wisteria"
}, {
"hex": "#fcd975",
"name": "Goldenrod"
}, {
"hex": "#30ba8f",
"name": "Mountain Meadow"
}, {
"hex": "#ffa343",
"name": "Neon Carrot"
}, {
"hex": "#edd19c",
"name": "Maize"
}, {
"hex": "#efcdb8",
"name": "Desert Sand"
}, {
"hex": "#0081ab",
"name": "Steel Blue"
}, {
"hex": "#ff1dce",
"name": "Hot Magenta"
}, {
"hex": "#8d4e85",
"name": "Razzmic Berry"
}, {
"hex": "#ff7538",
"name": "Orange"
}, {
"hex": "#fe4eda",
"name": "Purple Pizzazz"
}]
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.1.js"></script>
<script src="crayola.js"></script>
<script src="colors.js"></script>
</head>
<body>
<div id="loading">Loading routes...</div>
<table id="colors" cellpadding="5" cellspacing="0">
<thead>
<th>Operator</th>
<th>Route</th>
<th>Color</th>
<th>Crayon</th>
</thead>
</table>
<script>
var url = 'http://transit.land/api/v1/routes.json?vehicle_type=metro&per_page=100';
var table = $('#colors');
var palette = new Palette();
palette.load(colors);
$.getJSON(url, function(data) {
$('#loading').remove();
var routes = data['routes'];
routes.forEach(function(route) {
var color = route.color;
if (!color) { return }
var closest_color = palette.closest(RGBColor.from_hex(color));
var row = $('<tr />');
$('<td />').append($('<a />').text(route.operated_by_name).attr('href', url+'&operated_by='+route.operated_by_onestop_id)).appendTo(row);
$('<td />').append($('<a />').text(route.name).attr('href', url+'&onestop_id='+route.onestop_id)).appendTo(row);
$('<td />').text(color).css('background-color', color).appendTo(row);
$('<td />').text(closest_color.name).appendTo(row);
table.append(row);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment