Presentation
The widget-editor is a tool to explore datasets and create widgets. With it, you can create charts (bar, pie, etc.) and simple map widgets. Below you will find a general presentation of its interface.
The widget-editor is divided into two panes: the visualization one on the left, and the settings one on the right.
Depending on where the widget-editor is located, you may also find it in a smaller form:
In such a case, the visualization pane is the default view. To toggle between it and the settings one, click the “Settings” button at the top right corner. The settings panel will be displayed on top of the visualization one.
The widget-editor is a WYSIWYG (What You See Is What You Get) editor, meaning that the visualization you see in the visualization pane is the widget that will end up being created.
The visualization pane contains three modules.
At the top of it, you have the visualization selector. With it, you can decide if you want to create a bar, pie, scatter, map, etc. visualization. Not all these options may be available as some of them depend on the dataset you're using. For example, you may not be able to create a map if the dataset doesn't have geographic information.
In the middle, there is the visualization.
If you chose some kind of chart, you will see it there, with two dropdowns: one to its left and one to its bottom. For the pie chart, only one dropdown is displayed at its bottom. These dropdowns let you choose which of the dataset's columns to use for each of the visualization's axes. If a chart is displayed, placing the mouse cursor on top of it will display a tooltip that contains information about the bar, slice or point.
If you chose the map vizualization, a map will fill up the whole space. At its top left corner, you will find two buttons to increase or decrease the zoom level. You can also use your trackpad or mouse wheel to do the same. Finally, you can move the map around to select a precise location. Remember that what you see is what will get saved, so thoughtfully select the area you're interested in.
At the bottom, if you selected some kind of chart, you will see the legend. By default, the charts are displayed with one color only. If you selected a bar chart and you change the value of the dropdown on the right to something different than “Single color”, you will be able to transform it to a grouped bar or stacked bar chart (depending on the visualization you selected). In such a case, the legend will now contain several colors.
The dropdown can also be used with other types of chart such as the pie chart, but in that case, it will have a different meaning. Feel free to experiment with it. We will explain it in more depth in the other guides.
The settings pane is divided into tabs. If you selected a chart in the visualization selector, you would see the following:
- General
- Visual style
- Advanced
- Table view
If you selected a map visualization, you would see:
- General
- Map
Note that not all of them may be visible. The application that hosts the widget-editor may disable some of them.
Below you will find an explanation for each of them.
The “General” tab, like most of the others is divided into accordions.
There, you will find how to give your widget a title, a description and a caption. You can also give titles to the axes, aggregate the values and change the format in which they are displayed.
You will find options to filter the data too. There are three types of filters:
- General filters: you select a column and decide the criteria that will filter the rows of the dataset
- Geographic filter: if the dataset permits it, you can restrict the data to a geographic area
- End user filters: those are special filters that will live by your widget, letting people dynamically filter the widget outside of the editor
Finally, you will find settings to sort the data. For example, you may want to display data in an ascending (increasing) order.
In the tab “Visual style”, you will be able to customize the color scheme of your widget.
If the application that hosts the widget-editor offers color schemes, you will be able to choose between one of them. The color scheme corresponds to the colors displayed in the chart. For example, the default color of a bar chart may be blue, but if you change the color scheme, it may be green. In addition, if your chart contains multiple colors, all of them will be updated according to the scheme.
If you wish to hand-pick the colors of your chart, you can click the “Create custom scheme” button. It will duplicate the currently selected scheme, and will let you change any of them. Use the visualization pane on the left to preview the color changes.
The “Advanced” tab lets you switch to the advanced mode. When enabled by clicking the “Switch to the advanced mode” button, most of the tabs (and thus settings) will disappear. This mode lets you edit a chart using code instead of the more user-friendly interactive interface.
Activating this mode is not recommended for beginners. Switching from one mode to another may also lead to data loss as most of the features are not translatable from one mode to the other.
The advanced mode is useful if you know about Vega (the underlying charting library) and want to create advanced charts that are not possible to make through the interactive interface.
The “Map” tab contains the settings dedicated to the map visualization. In addition to selecting its zoom level and position in the visualization panel, here you can select which of the dataset's layers you want to display, which background color you want for the map, whether or not you want to display labels and whether or not you want to see the country boundaries.
The “Table view” is very useful when you want to understand the kind of information the dataset owns, or why certain types of chart look like they do.
If no visualization is displayed on the left pane, the table contains a subset of the rows of the dataset. You can scroll in both direction (vertically and horizontally) to see all the rows/columns.
If a visualization is displayed, then the table contains only the data that is used to compute the chart.