← All tutorials · RavingDesk

Tutorial 11 of 13

Maps, embeddable charts and diagrams

Intermediate 7 min

Turn coordinates or country codes into world maps, publish a self-contained chart on your website, and draw a flowchart of how data moves through your project.

Maps from coordinates or countries

Open the example Offices and customers on maps. It has two datasets from the Geo Data Visualizer’s examples: offices with lat, lon and staff, and customers by country.

The step Staff per office uses Map type: Proportional circles with Latitude column lat, Longitude column lon, Value column staff and Label column office. Customers by country uses Choropleth (countries) with Country column country — ISO codes like DE or DEU and English names like Norway both work. Press Run all.

The findings report how many points or countries were drawn and whether some country names were not recognised (fix them in the dataset and run again). Choose a Projection: Equal Earth keeps areas honest, Mercator is familiar from web maps.

A chart for your website

Select a local chart and press Make it embeddable. RavingDesk adds an Embeddable chart step with the same columns. Set:

  • Text alternative (description) — what a screen-reader user should hear,
  • Source / credit line — shown under the chart,
  • Width and Height,
  • Hover and keyboard tooltips in the HTML file, if you want a tiny inline script in the standalone file.

After Run, the results contain a paste-ready figure snippet with the inline SVG and a data-table fallback, an img snippet for a self-hosted SVG file and downloads for the standalone SVG and HTML. The files load nothing from other servers, so they work in any CMS. Host them yourself: download links of the site are temporary.

Verify a chart with the Chart Studio

Verify with the Chart Studio adds a Chart studio step: the server-side CSV/Excel Chart Studio detects the column types itself and renders the chart, with SVG and PNG files and the data table. If its numbers differ from your local chart, check the aggregation (Combine repeated X values) and the detected column types.

Diagrams — including your project

Add a Diagram step. The Diagram text uses a Mermaid-like syntax:

flowchart LR
  raw[(Raw data)] --> clean[Clean & check]
  clean --> stats{Significant?}
  stats -->|Yes| report([Report])

Press Generate from this project to replace the text with the flow of the current project: datasets (cylinders), public-data steps (parallelograms), analyses and decisions, and dotted arrows into the report. Run lays it out with the Diagram & Flowchart Maker. It makes a good first page for a report or a handover document.

Sequence diagrams (sequenceDiagram) and mind maps (mindmap) work as well; syntax errors are reported with their line number.

Export everything

Every chart, map and diagram has SVG and PNG buttons. When another usefulweb app can open the format, Send SVG…, Send PNG… and Send table… hand it over without uploading anything.

Ready to try it?

Launch RavingDesk →