Splunk® Dashboards App

Splunk Dashboards app (beta) for Enterprise and Cloud

Acrobat logo Download manual as PDF


Acrobat logo Download topic as PDF

Format a choropleth SVG

Before you begin to format your SVG visualization, make sure you are familiar with creating and formatting SVG images, as outlined in Generate a choropleth map.

If you want a step by step tutorial on creating your own SVG maps and connecting them to your Splunk data, see the blog, "Painting with Data: Choropleth SVG" at https://www.splunk.com/en_us/blog/tips-and-tricks/painting-with-data-choropleth-svg.html

Almost all configuration and formatting must be done in the source editor.

Prerequisites

  • You must upload your SVG locally; web-based images are not supported.

You can also view an SVG's markup structure here: https://jakearchibald.github.io/svgomg/

Connect your SVG with the Splunk Enterprise app

Follow the steps in the following procedure to connect the path id attributes to your SPL query.

If you would like to use the campus SVG map, you can download, unzip, and add this campus.svg image to your dashboard: Campus.zip.

Steps

  1. Define a path with a d attribute.
    For each section you want to define on your map, you must define a path with a d attribute. For example, if your SVG image is of a school campus, and there are 10 buildings, you must define a path with the d attribute for each building: An SVG map of a school

  2. Assign each path a unique ID.
    The Splunk Dashboard App can only recognize the boundaries set by the d attribute if its path has a unique ID associated with it. For example in the image, the upper-middle building is called "RF-420", so you can use this as the building's unique ID to easily identify it. This path in your SVG will look similar to the following:
    An example of a defined path
    If you want to view or change the path IDs for your SVG, or if someone else designed the image, you can use a text editor to access and edit this information.

  3. Often, an SVG map will have extra meta-data that makes it very difficult to modify. You can use a free application like Inkscape to simplify the image data by saving the file type as an Optimized SVG.

  4. Match your path ids to the first column of results returned by your search.
    There are many ways to do this. You can rename each field in the search using the eval command, you can create a lookup file to match the fields with the unique path IDs, or you can change the path IDs of your SVG image file to match the fields returned by your search. To see an example of how a lookup can be used to map path IDs to values, see: Example.

  5. Ensure there is at least one column of numbers associated with each field in your search results.
    It is these number values that you will use to determine the fill color of each section. For example, if you run a search to measure network connection traffic (TCP/IP connections per hour) in each building on the school campus, your search would return a table similar to the following (this is not real data): A table with two columns. The first column is the list of buildings, the second column is a list of numerical values

  6. Set your color value ranges.
    This is the same process as creating regular choropleth color ranges. For more information on general choropleth map formatting see Format a choropleth map. In the encoding section of your dashboard definition, you set the featureId option to the first set of column results, your fields/path IDs. this is almost always represented by primary[0]. Use the value option to set the numerical values depending on which column they're in. If you have a table with only two columns, for example, this is primary[1]. Use the rangevalues type to then set your color ranges using hex codes or color names. For example:
    "encoding": {
    	"featureId": "primary[0]",
    	"fill": {
    		"field": "primary[1]",
    		"value": "primary[1]",
    		"format": {
    			"type": "rangevalue",
    			"ranges": [
    				{
    					"from": 50000,
    					"value": "#4beba8"
    				},
    				{
    					"from": 30000,
    					"to": 50000,
    					"value": "#f4df7a"
    				},
    				{
    					"from": 1000,
    					"to": 30000,
    					"value": "#fc9850"
    				},
    		              {
    		                        "to": 1000,
    					"value": "#ff7152"
    					} 
    

Example

The following example is the lookup table for the campus image. When used with the table visualization, it shows the columns that map the path id to the fields of the same name in the table and their associated numerical values.

| inputlookup choropleth_campus.csv

the table representing the lookup that creates the SVG choropleth map

If the Visualization Picker is used to change this visualization from table to Choropleth SVG, the following image is created (you may need to refresh your browser).


Source options for choropleth SVG

Choropleth SVG options

The following options are available for editing choropleth SVG visualizations in the source editor:

Property Type Default Description
SVG string N/A KV store location of the SVG image.
backgroundColor string Light mode: "#FFFFFF". Dark mode: "#212527", Specify, using a hex code, the background color behind the SVG map, title, and description. For example, "#0000FF"


A choropleth SVG map

Last modified on 20 November, 2020
PREVIOUS
Generate a choropleth SVG
  NEXT
Use inputs and tokens to make dashboards dynamic

This documentation applies to the following versions of Splunk® Dashboards App: 0.5.2, 0.6.0, 0.7.0, 0.8.0, 0.9.0


Was this documentation topic helpful?

You must be logged into splunk.com in order to post comments. Log in now.

Please try to keep this discussion focused on the content covered in this documentation topic. If you have a more general question about Splunk functionality or are experiencing a difficulty with Splunk, consider posting a question to Splunkbase Answers.

0 out of 1000 Characters