The latest 1.4.0 update of the Markdown & Mermaid Diagrams visual introduces exciting new features and enhancements:

✨ New Features​

📌 Custom Styling with the styles Block​

You can now define custom styles for text elements using the new styles block.

All content within this block is added as a <style> tag in the final HTML render.

Example:

h1 {
    color: red;
}

This will make all <h1> headings appear in red.

🛠 New Handlebars.js Helper Functions​

We've added several new helper functions for the Handlebars.js templating engine, including:

• Equal (eq)
• Not Equal (ne)
• Less Than (lt)
• Less Than or Equal (lte)
• Greater Than (gt)
• Greater Than or Equal (gte)
• Logical AND (and)
• Logical OR (or)

📖 Read the full Handlebars.js helpers documentation →

🔍 Improved Debugging: View Source on Render Failure​

If rendering fails, the visual now displays the source configuration of the chart. This helps you quickly identify and fix any issues.

⚡ Increased Diagram Rendering Limit​

The maxEdges configuration parameter has been set to 30,000, allowing the visual to render diagrams with up to 30,000 nodes.

This post summarizes my work on the Charticulator App and Power BI visual for 2024. It includes an overview of the new features and a brief history of the project. The project is live, and my focus moving forward will be on improving the documentation and creating tutorials to showcase how to use the new features. Currently, the documentation is outdated and does not cover the latest updates.

GeoJSON is a format for encoding a variety of geographic data structures.

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "Dinagat Islands"
  }
}

The Charticulator has sub-layout features that allow to authors arrange Glyphs on Plot Segments.

Usually Charticulator uses x or y axes to determine positions of each Glyph.

Sub-layouts is one approach to integrate third party layouts like d3-geo, d3-hierarchy/tree, d3-hierarchy/pack e.t.c.

The d3-geo package uses to render GeoJSON into SVG path as part of Plot Segment and positioning Glyphs by given latitude, longitude column bindings.

Geo sub-layout has properties to load GeoJSON file, to specify expression for geo coordinate columns, projections, center of map, rotations, scale and translates rendering SVG on Plot Segment.

The Charticulator is going to get new Treemap sub-layout for cartesian Plot Segment in the next version 1.5.0.0 of the visual.

The sub-layout has Inner padding, Outer padding, attributes to configure visual appearance.

Value Expression sets values for nodes.

Data Expressions set grouping of data by given columns.

The feature powered by D3.js library

The Charticulator binds glyphs to tree leaves.

The Charticulator application has a new dataset list that allows you to import datasets with a single click to create a chart from scratch.

The chart list view also supports quick filtering of datasets by name.

If you want to see data samples on list, contact with me. But make sure that dataset is allowed to copy and using doesn't breaks laws or agreements.

The next version of the Editor visual (1.3.0.0) will support importing pre build charts and templates from public source.

On importing chart the visual imports data and rewrites current data passed from Power BI.

Then on saving imported chart the visual opens mapping view to map chart columns to current data passed from Power BI.

On importing template the visual opens data mapping view to map current data passed from Power BI to template columns.

The Charticulator App can allow to import data from *.csv files, but there is no opportunities to pre edit, enter or edit data on chart development phase.

Charticulator data editor​

The PR48 closes this gap. Powered by ReactGrid component brings feature to edit current data, creating table from scratch, inserting rows and columns.

Wide view​

The layout of current charts are changed from vertical list to grid to display private and publicly available charts.

On PR48 page you can find link to deployment of the latest development branch.

Charticulator Gallery​

The Charticulator App now has a built-in list of charts (gallery) that can be imported with a single click.

There are only few examples in the diagram list so far, but it will be updated soon, and will also support importing templates. If you want to add your own examples, feel free to contact me.

Chart filter​

The list of charts has a filter of charts by name and type (private, charts that are stored in the browser's indexed database, and public, which are downloaded from a CDN).

The new feature for Charticulator​

This is one of the most significant updates for Charticulator. The mark allows to draw arbitrary shape for data visualization. The polygon support snapping to other marks or parent objects and supports basic styling like rectangle, ellipsis or triangle marks.

The mark doesn't have a icon yet. But already available for testing in application on https://ilfat-galiev.im/charticulator/ page.

Current limitations:

• The mark doesn't have internal constraints (no middle points like in line mark)
• Rendering in polar coordinates has not implemented yet

Markdown and Mermaid Visual​

There is POC of the visual for rendering Markdown layout and Mermaid diagrams in Power BI reports.

The visual has built in editor powered by react-md-editor with preview feature.

Diagrams rendering powered by Mermaid

Future work:

• Implement click handlers on nodes
• Power BI Data binding to nodes

The preview version of the visual available in Visuals menu (above)

Demo: