US State Map - vary color by a dimension?

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?

Answers

  • 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).

    Please πŸ’‘/πŸ’–/πŸ‘/😊 this post if you read it and found it helpful.

    Please accept the answer if it solved your problem.

  • 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

    Please πŸ’‘/πŸ’–/πŸ‘/😊 this post if you read it and found it helpful.

    Please accept the answer if it solved your problem.

  • ArborRose
    ArborRose Coach
    edited 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();

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

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

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

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

    **Check out my Domo Tips & Tricks Videos

    **Make sure to <3 any users posts that helped you.
    **Please mark as accepted the ones who solved your issue.