Charticulator Visual Community: A New Chapter in Custom Visual Design

The new application has a built-in table editor that allows you to easily fix outlines in data or create mock data for prototyping charts.

Quick overview of the feature:

Click on "+New" button to create an empty table with one sample column and row.

Use the context menu to add/remove columns and rows.

Or import existing data and edit the data before using it in the application.

Another feature is the list of publicly available datasets that can be imported with one click.

On the list, you can find dataset samples used in most demos of Charticulator and also dataset samples from the Vega repository. The list can be filtered by typing the dataset name in the textbox on top of the view.

The feature allows newcomers to start playing with Charticulator without worrying about data samples.

The next feature is a list of public and private charts and templates built by using the Charticulator App.

The chart list can be filtered by using two buttons (Public and Private) and the name of the chart by typing the chart name in the textbox.

The private list is user charts saved in the local browser DB (IndexedDB), that the user had before.

Public list is publicly available charts and templates that can be imported by one click.

On importing the template (the file doesn't contain the dataset in the file) the Charticulator requires mapping current data to template columns or importing new data for tables.

The public chart list works in the app and visual too.

On importing a chart in the visual, the Editor replaces the dataset given by Power BI, but after saving the chart, Editor Visual requires mapping template columns to visual columns.

Marks objects have gradient fill attributes with two colors.

To set the gradient need to clear the Fill attribute of the mark then three attributes Gradient start, Gradient stop, and Gradient rotation are available for editing. The feature works for Shape mark. Gradient for Links will be add in the first version of 2025.

In the future, the feature can be extended to use the entire capabilities of SVG gradient (offsets, spreads, more than 2 colors e.t.c.)

Another new feature is Treemap layout powered by D3.js library. Introduced by Ben Shneiderman in 1991, a treemap recursively subdivides area into rectangles according to each node’s associated value.

The Charticulator uses D3.js library for positioning and sizing glyphs on Plot Segments.

For example, above a glyph contains one Rectangle mark to build a classic treemap visualization.

Sub-layout properties has Data Expressions for build hierarchical structure and Measure Expression for values.

The Add grouping expression button adds more expression input fields for nested hierarchy.

Inner padding and Outer paddings are responsible for the

gap between glyphs.

The next sub-layout is Geo which allows to import GeoJSON data to draw maps. It is also powered by the D3.js library.

Latitude Expression and Longitude Expression define columns for coordinate values and use those values to map glyphs on Plot Segment with a map.

The properties allow to configure (set projections, rotate, translate, scale) rendering of GeoJSON.

Read more in the D3.js documentation and Making maps with D3 article for more context.

Future development idea is allow to bind GeoJSON features to glyphs. It brings interactions with map shapes and figures.

Visuals in Power BI change the opacity of other selected elements (bar, circle e.t.c.) on selection by mouse or keyboard to highlight the user selection. There was an issue when the Charticulator template had embedded images.

The charticulator changes the opacity of the image to get a similar effect on images too.

The packing layout positions marks by Force simulations of D3.js library, which implements a velocity Verlet numerical integrator for simulating physical forces on particles (nodes).

The new properties of Packing into a container (Packing X and Packing Y) allow to set borders by glyph size for marks in simulation.

In the above example centers of all circles are inside the glyph area when Packing X is enabled (There is enough space vertically, and enabling Packing Y doesn't give effect).

The new Editor visual supports several levels of nested chart (The original version supported only one level of nested chart).

Now, users can work with all nested charts in the editor and not need to use Charticulator App to edit several nested charts.

The new mark Polygon brings the tool to create any figure on glyphs and charts. Currently, the marks are in the preview feature and not final and have some limitations.

To create a polygon, select the Polygon mark in the marks dropdown, then click several times on the chart or glyph editor area to set the vertexes of the polygon. Use double-click by mouse to finish creating the polygon. By default, the Charticulator creates a closed polygon.

On attributes editor you can uncheck the Closed property to remove the last edge.

Text marks have the property that blocks rotating the text depending on the angle of the glyph on polar coordinates.

Checking of Ignore polar coordinate rotation on Attributes panel of text mark orients all text by X axis of cartesian coordinates instead polar coordinates.

Scales are the next core item of the Charticulator after constraints. Old Charticulator creates scales implicitly on binding data to mark attributes or to plot axes.

The new scale editor allows to explicitly create scale and set parameters. Then scale can be bound to mark attributes in the current chart or nested chart. It helps to solve the problem of scaling the domain of scale in nested charts, because nested charts work with a subset of data and nested chart scale values aren't unique due to using the same ranges. This is very noticeable when binding data to the color of an object.

In the example below Ruth Pozuelo Martinez shows that the scale applies to the Y-axis of the plot segment in the nested chart, and objects in some nested chart instances aren't visible.

In the final version, the lines in nested charts are on the same level, but the values are significantly different

The Constraint solver is a core feature of the Charticulator that is responsible for positioning all objects on canvas.

Snapping marks by mouse does not always allow users to bind one mark to another properly. Especially when several other objects are close to each other.

To bind the text mark to the center of the Rectangle mark we need to use the constraints editor by specifying equality equations between mark attribute values.