transitland crayons

colors.js

// 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
  }
}

crayola.js

// 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"
}]

index.html

<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>