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.
0 -
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.
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: '© <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! **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://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 any users posts that helped you.
**Please mark as accepted the ones who solved your issue.1
Categories
- All Categories
- 1.7K Product Ideas
- 1.7K Ideas Exchange
- 1.5K Connect
- 1.2K Connectors
- 295 Workbench
- 6 Cloud Amplifier
- 8 Federated
- 2.8K Transform
- 97 SQL DataFlows
- 608 Datasets
- 2.1K Magic ETL
- 3.8K Visualize
- 2.5K Charting
- 712 Beast Mode
- 50 App Studio
- 39 Variables
- 668 Automate
- 170 Apps
- 446 APIs & Domo Developer
- 45 Workflows
- 7 DomoAI
- 34 Predict
- 14 Jupyter Workspaces
- 20 R & Python Tiles
- 391 Distribute
- 111 Domo Everywhere
- 274 Scheduled Reports
- 6 Software Integrations
- 116 Manage
- 113 Governance & Security
- Domo Community Gallery
- 31 Product Releases
- 9 Domo University
- 5.3K Community Forums
- 40 Getting Started
- 30 Community Member Introductions
- 104 Community Announcements
- 4.8K Archive