USA Counties map with random colors and javascript code
Ever wondered how these randomly colored maps are created? Save time and use the browser Console to achieve this result.

While doing this manually is certainly possible, it can quickly get tiresome for the largest maps, that feature a lot of countries or subdivisions (e.g. the USA Counties map, the EU NUTS 3 map or any of the Detailed continents maps).

To randomly color a map instantly with a simple copy-paste of a script, please follow these steps:

Note: These instructions require the use of the Browser’s Console, so it is not possible when using the website through a mobile device.

First, visit the map page you want (I am going to use the USA Counties map for this tutorial). You need then to open your browser’s Console; how to do that depends on the browser, but here you can find quick instructions for each one.

Google Chrome is used here, so I opened the Console by pressing CTRL + SHIFT + J.

Second, copy the below code snippet:

// Randomly Color all paths on a map.
let palette = ["8c510a", "bf812d", "dfc27d", "f6e8c3", "f5f5f5", "c7eae5", "80cdc1", "35978f", "01665e",
    "b2182b", "d6604d", "f4a582", "fddbc7", "f7f7f7", "d1e5f0", "92c5de", "4393c3", "2166ac",
    "d73027", "f46d43", "fdae61", "fee090", "ffffbf", "e0f3f8", "abd9e9", "74add1", "4575b4",
    "a6cee3", "1f78b4", "b2df8a", "33a02c", "fb9a99", "e31c2c", "fdbf6f", "ff7f00", "cab2d6",
    "fbb4ae", "e41a1c", "377eb8", "4daf4a", "984ea3", "ff2000", "ffff33", "a65628", "999999",
    "8dd3c7", "ffffb3", "bebada", "fb8072", "80b1d3", "fdb462", "b3de69", "fccde5", "ffa07a",
    "b15928", "6a3d9a", "ffed6f", "9e0142", "5e4fa2", "ffffbf", "1a9850", "4d4d4d", "6baed6",
    "71c671", "388e8e", "7d9ec0", "7171c6", "8e388e", "8e8e38", "00c957", "cc3333", "d1dbdd"
];
$('#map>path').each(function() {
    let $p = $(this);
    if (mapchart.verifyPath($p.attr('id'))) {
        let rd = Math.floor(Math.random() * palette.length);
        $p.attr('fill', '#' + palette[rd]);
    }
});

Third, paste the code in the Console and press Enter/Return:

Paste the snippet in the Console and hit Enter or Return.

This script will pass every county on the map and fill it randomly with a color from the specified color palette. You can now close the Console and continue customizing your map or download it.

The generated map after using the script.

This is the ‘quick’ way to randomly color the map.

There is also a variation of this where all colors are properly added in the legend too, by using this modified code in the Console:

// Randomly color and click on each path.
let palette = ["8c510a", "bf812d", "dfc27d", "f6e8c3", "f5f5f5", "c7eae5", "80cdc1", "35978f", "01665e",
    "b2182b", "d6604d", "f4a582", "fddbc7", "f7f7f7", "d1e5f0", "92c5de", "4393c3", "2166ac",
    "d73027", "f46d43", "fdae61", "fee090", "ffffbf", "e0f3f8", "abd9e9", "74add1", "4575b4",
    "a6cee3", "1f78b4", "b2df8a", "33a02c", "fb9a99", "e31c2c", "fdbf6f", "ff7f00", "cab2d6",
    "fbb4ae", "e41a1c", "377eb8", "4daf4a", "984ea3", "ff2000", "ffff33", "a65628", "999999",
    "8dd3c7", "ffffb3", "bebada", "fb8072", "80b1d3", "fdb462", "b3de69", "fccde5", "ffa07a",
    "b15928", "6a3d9a", "ffed6f", "9e0142", "5e4fa2", "ffffbf", "1a9850", "4d4d4d", "6baed6",
    "71c671", "388e8e", "7d9ec0", "7171c6", "8e388e", "8e8e38", "00c957", "cc3333", "d1dbdd"
];
$('#map>path').each(function() {
    let pathId = this.id;
    if (mapchart.verifyPath(pathId)) {
        let rd = Math.floor(Math.random() * palette.length);
        let colorToPaint = '#' + palette[rd];
        mapchart.colorPath(colorToPaint, pathId);
    }
});

This script will take a bit longer to execute, but will result in a map with all the colors added properly, so you can then remove or customize them without unexpected errors:

With this variation of the script, the colors are shown in the map’s legend.

Finally, if you are a bit more technical, you could change the values inside the palette variable of the script, in order to alter the selection of colors that are used to your desired ones. For example, you can use only 9 colors in the palette to have a more consistent randomly colored map:

A randomly colored EU NUTS 3 map.

Of course, you may ask what use would such a map have? It can be used for quickly coloring some of the largest maps, but mainly it is just for fun! So, feel free to experiment with the provided script and randomly color any map on MapChart and Historical MapChart!