US State Map - vary color by a dimension?

EChampagne · October 1

We're using the US state map to look at our staff by zip codes. Is there a way to have all staff on one map with each department as a different color?

DavidChurchman · October 1

Also, something weird about the lat/long maps are that you can apply color rules, but they don't show up in the "Chart Properties" panel. You have to access them through the color rules menu up top

ArborRose · October 1

I'm not sure if you can do it with one of the existing chart types. But you could do it with a blank brick.

In this example, I'm cheating and using a translation of longitude and latitude to plot the zip codes. To do it properly, you would need to append your data with long, lat or find a conversion method to plot them by address. I was shortcutting it to create an output example.

To see this work on your own instance, go to AppStore, find blank brick and create on new dashboard. Import the sample dataset. Then insert the code below into Javascript, html, and css. This method will plot around the world. So if you have staff in other states or countries, they can plot as well. And you can zoom in to see the streets. One problem though…I am summarizing. I'm not exactly plotting to the address. So if you want to zoom in with accuracy, you have to solve that plot by address issue.

Sample data loaded as "staff sample". Set as dataset0 (also set as 1 and 2).

Employee ID,Employee Name,Department,City,State,Zip Code
1,John Smith,Sales,Los Angeles,CA,90001
2,Jane Doe,Sales,Los Angeles,CA,90002
3,Bob Johnson,Sales,Santa Barbara,CA,93105
4,Alice Brown,Marketing,Bakersfield,CA,93301
5,Mark Wilson,Marketing,Los Angeles,CA,90005
6,Sarah Davis,Marketing,Los Angeles,CA,90006
7,David Miller,HR,Los Angeles,CA,90007
8,Linda Garcia,HR,Los Angeles,CA,90008
9,James Rodriguez,HR,Los Angeles,CA,90009
10,Mary Martinez,IT,Los Angeles,CA,90010
11,Charles Lee,IT,Los Angeles,CA,90011
12,Patricia Young,IT,Los Angeles,CA,90012
13,Thomas Hall,Finance,Los Angeles,CA,90013
14,Jennifer Scott,Finance,Los Angeles,CA,90014
15,Karen Baker,Finance,Los Angeles,CA,90015
16,George Wright,Operations,San Jose,CA,95113
17,Emma Taylor,Operations,Reno,NV,89502
18,Samuel Lewis,Operations,Reno,NV,89503
19,Nancy Clark,Customer Support,Reno,NV,89504
20,Kevin Harris,Customer Support,San Francisco,CA,94103
21,Laura Allen,Customer Support,San Jose,CA,95112
22,Christopher King,R&D,Reno,NV,89507
23,Michelle Lee,R&D,Reno,NV,89508
24,Brian Hall,R&D,Reno,NV,89509
25,Olivia Lopez,Admin,Los Angeles,CA,90016
26,Scott Lewis,Admin,Los Angeles,CA,90017
27,Jessica Hill,Admin,Los Angeles,CA,90018
28,Matthew Young,Sales,Los Angeles,CA,90019
29,Megan Lopez,Marketing,Los Angeles,CA,90020
30,Jason Adams,Finance,Los Angeles,CA,90021

#map {

    height: 800px; /* Set the height of the map */

    width: 100%;   /* Full width */

}


.legend {

    background-color: white;

    padding: 10px;

    border-radius: 5px;

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

    position: absolute;

    top: 10px;

    left: 10px;

    z-index: 1000; /* On top of the map */

}

<div id="map"></div>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<div class="legend" id="legend">

    <strong>Departments</strong>

    <div style="color: #FF5733">Sales</div>

    <div style="color: #33FF57">Marketing</div>

    <div style="color: #3357FF">HR</div>

    <div style="color: #FFD700">IT</div>

    <div style="color: #FF4500">Finance</div>

    <div style="color: #8A2BE2">Operations</div>

</div>

function initMap() {

    // Create a map centered on California

    var map = L.map('map').setView([36.7783, -119.4179], 6); // Center on California


    // Add OpenStreetMap tile layer

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

    }).addTo(map);


    // Define a dot style

    var dotStyle = {

        radius: 8,

        fillOpacity: 0.8,

        stroke: true,

        color: '#000',

        weight: 1

    };


    // Color mapping for departments

    var departmentColors = {

        'Sales': '#FF5733',

        'Marketing': '#33FF57',

        'HR': '#3357FF',

        'IT': '#FFD700',

        'Finance': '#FF4500',

        'Operations': '#8A2BE2'

    };


    // Create a mapping of zip codes to coordinates in different cities

    var zipCodeCoords = {

        '90001': { latitude: 34.0407, longitude: -118.2468 }, // Los Angeles, CA

        '90002': { latitude: 38.5795, longitude: -121.4931 }, // Sacramento, CA

        '90003': { latitude: 34.0600, longitude: -118.2200 }, // Los Angeles, CA

        '90004': { latitude: 34.0700, longitude: -118.2400 }, // Los Angeles, CA

        '89501': { latitude: 39.5296, longitude: -119.8138 }, // Reno, NV

        '89502': { latitude: 39.5000, longitude: -119.8000 }, // Reno, NV

        '89503': { latitude: 39.4800, longitude: -119.8100 }, // Reno, NV

        '89504': { latitude: 39.5100, longitude: -119.7900 }, // Reno, NV

        '89505': { latitude: 39.5500, longitude: -119.8200 }, // Reno, NV

        '89506': { latitude: 39.5700, longitude: -119.8300 },  // Reno, NV

        '95112': { latitude: 37.3382, longitude: -121.8863 }, // San Jose, CA

        '94103': { latitude: 37.7749, longitude: -122.4194 }, // San Francisco, CA

        '93301': { latitude: 35.3733, longitude: -119.0187 }, // Bakersfield, CA

        '93101': { latitude: 34.4208, longitude: -119.6982 }, // Santa Barbara, CA

        '89101': { latitude: 36.1699, longitude: -115.1398 }, // Las Vegas, NV

        '93454': { latitude: 34.9530, longitude: -120.4357 }, // Santa Maria, CA

        '95113': { latitude: 37.3382, longitude: -121.8863 }, // San Jose, CA

        '94107': { latitude: 37.7749, longitude: -122.4194 }, // San Francisco, CA

        '93305': { latitude: 35.3733, longitude: -119.0187 }, // Bakersfield, CA

        '93105': { latitude: 34.4208, longitude: -119.6982 }  // Santa Barbara, CA

    };


    // Fetch data from `dataset0`

    domo.get('/data/v1/dataset0').then(function(response) {

        // Loop through the dataset and plot on the map

        response.forEach(function(record) {

            const employeeName = record['Employee Name'];

            const department = record['Department'];

            const zipCode = record['Zip Code'];


            // Get coordinates from zip code mapping

            const coords = zipCodeCoords[zipCode]; // Directly access the coordinates using the zip code


            // Check if the coordinates exist

            if (coords) {

                // Set dot color based on department

                dotStyle.fillColor = departmentColors[department] || '#000'; // Default to black if department not found


                // Create a circle marker for each employee

                L.circleMarker([coords.latitude, coords.longitude], dotStyle)

                    .addTo(map)

                    .bindPopup(`${employeeName}<br>${department}<br>${zipCode}`);

            }

        });

    }).catch(function(error) {

        console.error('Error fetching data from dataset0:', error);

    });

}


// Initialize the map

initMap();

MarkSnodgrass · October 2

I would look into the custom charts option that is available. Here is a video about it as well as some KB articles:

https://youtu.be/SHnXk9LtK7s

https://domo-support.domo.com/s/article/360043428793?language=en_US

https://domo-support.domo.com/s/article/360042924454?language=en_US

DavidChurchman · October 1

Yes, but…

Are all staff that work in a department in the same State? If not, then you'd need a different card type. I'd say the best card type for this level of detail is the lat/long map, but for that you'll need to get the lat/longs instead of the zip codes (I'm sure there are tables you can join to your zips to get lat/longs).

DavidChurchman · October 1

Also, something weird about the lat/long maps are that you can apply color rules, but they don't show up in the "Chart Properties" panel. You have to access them through the color rules menu up top

ArborRose · October 1

I'm not sure if you can do it with one of the existing chart types. But you could do it with a blank brick.

In this example, I'm cheating and using a translation of longitude and latitude to plot the zip codes. To do it properly, you would need to append your data with long, lat or find a conversion method to plot them by address. I was shortcutting it to create an output example.

To see this work on your own instance, go to AppStore, find blank brick and create on new dashboard. Import the sample dataset. Then insert the code below into Javascript, html, and css. This method will plot around the world. So if you have staff in other states or countries, they can plot as well. And you can zoom in to see the streets. One problem though…I am summarizing. I'm not exactly plotting to the address. So if you want to zoom in with accuracy, you have to solve that plot by address issue.

Sample data loaded as "staff sample". Set as dataset0 (also set as 1 and 2).

Employee ID,Employee Name,Department,City,State,Zip Code
1,John Smith,Sales,Los Angeles,CA,90001
2,Jane Doe,Sales,Los Angeles,CA,90002
3,Bob Johnson,Sales,Santa Barbara,CA,93105
4,Alice Brown,Marketing,Bakersfield,CA,93301
5,Mark Wilson,Marketing,Los Angeles,CA,90005
6,Sarah Davis,Marketing,Los Angeles,CA,90006
7,David Miller,HR,Los Angeles,CA,90007
8,Linda Garcia,HR,Los Angeles,CA,90008
9,James Rodriguez,HR,Los Angeles,CA,90009
10,Mary Martinez,IT,Los Angeles,CA,90010
11,Charles Lee,IT,Los Angeles,CA,90011
12,Patricia Young,IT,Los Angeles,CA,90012
13,Thomas Hall,Finance,Los Angeles,CA,90013
14,Jennifer Scott,Finance,Los Angeles,CA,90014
15,Karen Baker,Finance,Los Angeles,CA,90015
16,George Wright,Operations,San Jose,CA,95113
17,Emma Taylor,Operations,Reno,NV,89502
18,Samuel Lewis,Operations,Reno,NV,89503
19,Nancy Clark,Customer Support,Reno,NV,89504
20,Kevin Harris,Customer Support,San Francisco,CA,94103
21,Laura Allen,Customer Support,San Jose,CA,95112
22,Christopher King,R&D,Reno,NV,89507
23,Michelle Lee,R&D,Reno,NV,89508
24,Brian Hall,R&D,Reno,NV,89509
25,Olivia Lopez,Admin,Los Angeles,CA,90016
26,Scott Lewis,Admin,Los Angeles,CA,90017
27,Jessica Hill,Admin,Los Angeles,CA,90018
28,Matthew Young,Sales,Los Angeles,CA,90019
29,Megan Lopez,Marketing,Los Angeles,CA,90020
30,Jason Adams,Finance,Los Angeles,CA,90021

#map {

    height: 800px; /* Set the height of the map */

    width: 100%;   /* Full width */

}


.legend {

    background-color: white;

    padding: 10px;

    border-radius: 5px;

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

    position: absolute;

    top: 10px;

    left: 10px;

    z-index: 1000; /* On top of the map */

}

<div id="map"></div>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<div class="legend" id="legend">

    <strong>Departments</strong>

    <div style="color: #FF5733">Sales</div>

    <div style="color: #33FF57">Marketing</div>

    <div style="color: #3357FF">HR</div>

    <div style="color: #FFD700">IT</div>

    <div style="color: #FF4500">Finance</div>

    <div style="color: #8A2BE2">Operations</div>

</div>

function initMap() {

    // Create a map centered on California

    var map = L.map('map').setView([36.7783, -119.4179], 6); // Center on California


    // Add OpenStreetMap tile layer

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

    }).addTo(map);


    // Define a dot style

    var dotStyle = {

        radius: 8,

        fillOpacity: 0.8,

        stroke: true,

        color: '#000',

        weight: 1

    };


    // Color mapping for departments

    var departmentColors = {

        'Sales': '#FF5733',

        'Marketing': '#33FF57',

        'HR': '#3357FF',

        'IT': '#FFD700',

        'Finance': '#FF4500',

        'Operations': '#8A2BE2'

    };


    // Create a mapping of zip codes to coordinates in different cities

    var zipCodeCoords = {

        '90001': { latitude: 34.0407, longitude: -118.2468 }, // Los Angeles, CA

        '90002': { latitude: 38.5795, longitude: -121.4931 }, // Sacramento, CA

        '90003': { latitude: 34.0600, longitude: -118.2200 }, // Los Angeles, CA

        '90004': { latitude: 34.0700, longitude: -118.2400 }, // Los Angeles, CA

        '89501': { latitude: 39.5296, longitude: -119.8138 }, // Reno, NV

        '89502': { latitude: 39.5000, longitude: -119.8000 }, // Reno, NV

        '89503': { latitude: 39.4800, longitude: -119.8100 }, // Reno, NV

        '89504': { latitude: 39.5100, longitude: -119.7900 }, // Reno, NV

        '89505': { latitude: 39.5500, longitude: -119.8200 }, // Reno, NV

        '89506': { latitude: 39.5700, longitude: -119.8300 },  // Reno, NV

        '95112': { latitude: 37.3382, longitude: -121.8863 }, // San Jose, CA

        '94103': { latitude: 37.7749, longitude: -122.4194 }, // San Francisco, CA

        '93301': { latitude: 35.3733, longitude: -119.0187 }, // Bakersfield, CA

        '93101': { latitude: 34.4208, longitude: -119.6982 }, // Santa Barbara, CA

        '89101': { latitude: 36.1699, longitude: -115.1398 }, // Las Vegas, NV

        '93454': { latitude: 34.9530, longitude: -120.4357 }, // Santa Maria, CA

        '95113': { latitude: 37.3382, longitude: -121.8863 }, // San Jose, CA

        '94107': { latitude: 37.7749, longitude: -122.4194 }, // San Francisco, CA

        '93305': { latitude: 35.3733, longitude: -119.0187 }, // Bakersfield, CA

        '93105': { latitude: 34.4208, longitude: -119.6982 }  // Santa Barbara, CA

    };


    // Fetch data from `dataset0`

    domo.get('/data/v1/dataset0').then(function(response) {

        // Loop through the dataset and plot on the map

        response.forEach(function(record) {

            const employeeName = record['Employee Name'];

            const department = record['Department'];

            const zipCode = record['Zip Code'];


            // Get coordinates from zip code mapping

            const coords = zipCodeCoords[zipCode]; // Directly access the coordinates using the zip code


            // Check if the coordinates exist

            if (coords) {

                // Set dot color based on department

                dotStyle.fillColor = departmentColors[department] || '#000'; // Default to black if department not found


                // Create a circle marker for each employee

                L.circleMarker([coords.latitude, coords.longitude], dotStyle)

                    .addTo(map)

                    .bindPopup(`${employeeName}<br>${department}<br>${zipCode}`);

            }

        });

    }).catch(function(error) {

        console.error('Error fetching data from dataset0:', error);

    });

}


// Initialize the map

initMap();

MarkSnodgrass · October 2

I would look into the custom charts option that is available. Here is a video about it as well as some KB articles:

https://youtu.be/SHnXk9LtK7s

https://domo-support.domo.com/s/article/360043428793?language=en_US

https://domo-support.domo.com/s/article/360042924454?language=en_US

US State Map - vary color by a dimension?

Best Answers

Answers

Categories