View editors
Last updated
Was this helpful?
Last updated
Was this helpful?
Kumu allows you to create multiple different views to visualize your data in multiple different ways.
To create a new view: click on the first dropdown next to the project title in the top-left corner of your screen, and choose + NEW VIEW.
To rename a view: click on the first dropdown next to the project title in the top-left corner of your screen, hover over a view, and choose the edit pencil. Alternatively, right-click on any blank space in your map, click on View, choose Rename View.
To duplicate a view: right-click on any blank space in your map, click on View, choose Duplicate View. NOTE: making changes to a duplicate view may affect your original view. Read more about that in .
To delete a view, click on the first dropdown next to the project title in the top-left corner of your screen, hover over a view, and choose the trash icon. Alternatively, right-click on any blank space in your map, click on View, choose Delete View.
You can edit with two different editors: the Basic Editor and the Advanced Editor.
The Basic Editor allows you to click through different menus to access many of Kumu's powerful features—decorations, filtering, clustering, layouts, and more. The Advanced Editor allows you to write code in Kumu's CSS-inspired coding language to access all of the same features.
There are also some features of Kumu that can only be accessed through the Advanced Editor, but if you're unfamiliar with coding, we recommend starting with the Basic and switching to the Advanced as needed. The features that are exclusive to the Advanced Editor are thoroughly documented on this site, and if you ever need help writing some code, just reach out to the Kumu team!
To open the Basic Editor, open your map and click the settings icon on the right side of the map.
You'll see Kumu's most commonly used view settings:
Size by allows you to scale the size of your elements based on numbers stored inside them. For example, if you have a map of organizations, you could create a field called "Net Assets" and fill out the numbers for each element. Then you can use the Basic Editor to scale the size the organizations according to their Net Assets, allowing you to quickly compare everyone's resources.
Don't like the default sizes? Click the expand icon next to the Size by dropdown to fine-tune your sizing options.
Color by allows you to color-code your elements based on any field. Select a field from the dropdown, and any elements that have data in that field will be colored!
Don't like the default colors? Click the expand icon next to the Color by dropdown to fine-tune your coloring options. This example colors by Element Type using the bujumbra scale:
If you color by a multi-pick field like Tags, Kumu will color code your elements with flags (colored arcs around the outside of your elements). Each flag represents one of the possible values in the multi-pick field.
Shape by allows you to shape your elements based on any field that can hold only one value. Select a field from the dropdown, and any elements that have data in that field will get a new shape!
Connect by allows you to activate clustering on your map. Clustering is a powerful tool that allows you to connect elements based on the data in their fields, and it's particularly useful on stakeholder and network maps.
When clustering is activated, Kumu will create new elements to represent each possible value for a field of your choice, and it will draw a connection between your elements and the value(s) in their field.
Filter allows you to show and hide elements, connections or loops based on data stored in the profile. Click on Filter to open up your filter settings.
Showcase is similar to Filter, which allows you to show or hide elements, connections, and loops based on the information they contain. But, instead of hiding your unselected data, showcase will make it translucent, effectively fading it into the background.
Underneath the three core tools in the "Structure" section of the Basic Editor, you'll see a MORE link. Clicking this link will bring up a list of three additional features.
Follow these links below to learn more about any of these individual options:
Controls is a super powerful feature that allows you to customize how people interact with your maps. You can use them to add buttons, images, text and more to your map! You can also use interactive controls to transform the current view's setting, such as filter, focus, and clustering.
If you need more precise control over the size and color of your decorations, you can choose either of the last two options on the list. If you click Decorate elements, Kumu will bring up the custom decoration builder for elements, which allows you to decorate your map in great detail. Similarly, if you wish to decorate your connections, choose Decorate connections to bring up the decoration builder for connections.
If you have already one or more decorations to your map, the Basic Editor will show those existing decorations underneath the Rules section (below Decorate connections). They'll be listed in chronological order from top to bottom (the most recently created decoration rules will be at the bottom of the list).
This section of the Basic Editor shows each decoration's legend label you added through the Decoration Builder. You can click the pencil icon next to a decoration to edit it, or click the delete icon to delete it.
Everything you change in the Basic Editor is automatically coded into the Advanced Editor, and most Advanced Editor code follows the same pattern:
At-rules are pieces of code in the Advanced Editor that look and behave a bit differently, compared to the usual selector {property: value;} code. They start with an @ symbol, and they give Kumu special instructions on how to display your map.
Unless you have coded in @controls or @import rules, your Advanced Editor code will have a block of @settings code right at the top, where you can adjust default view settings like layout, template, render quality, and more.
Whether you're using the Basic Editor or Advanced Editor, your changes don't get saved automatically. However, as soon as you make a change, Kumu will show a prompt at the bottom of the view editors to either SAVE your changes or REVERT to your last saved version.
A best practice when working in the view editors is to save your changes frequently! This will allow you to revert when you need to, without undoing a lot of progress that you wanted to keep.
Note that if you don't have any fields with numbers, the Size by dropdown menu won't have any options in it. If you don't have this kind of data available, try using Kumu's feature to create some!
Need more precise control over your sizes? Check out our guide on .
Are your fields with numbers not showing up in the Size by dropdown? Try .
The default color scale, neon2, can support seven different colors. If you need more colors (for example if you have 10 or 11 different element types), to find a scale that will work for your data.
To learn more about flags, .
Need more precise control over your colors? Check out our guide on .
To learn more about shapes, .
The is your one-stop-shop for adjusting the underlying settings in your . Templates, layouts, default element and connection styles, and more, can all be changed with default view settings.
to learn more.
to learn more.
To learn more about Showcase, .
: draw connections between any two elements that are connected to a mutual element
: arrange a custom selection of elements in a perfect circle or line
: use a grid-based layout for arranging with numerical field data.
Check out to learn more.
To learn more about how to add custom decorations, find the .
To open the Advanced Editor, click the settings icon to open the Basic Editor, then click SWITCH TO ADVANCED EDITOR at the bottom of the Basic Editor.
selector can be replaced with any valid , and you can read our to find documentation on properties and their possible values. You can also use some standard throughout the Advanced Editor.
@controls allow you to customize how people interact with your maps. If you have coded in any @controls, they will show up at the top of your Advanced Editor code. To learn more about @controls, .
@import rules allow you to import code from one of your project's views to another. To learn more about @import rules, .
to learn more about @settings.
@view can be used to define partial views. You can find more info in the .
