# Echarts visualizations with the Std.lang transpiler

**URL:** https://clojureverse.org/t/echarts-visualizations-with-the-std-lang-transpiler/11184
**Category:** Showcase
**Tags:** data-visualization
**Created:** [January 31, 2025, 12:30pm UTC](https://clojureverse.org/t/echarts-visualizations-with-the-std-lang-transpiler/11184 "2025-01-31T12:30:09Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![daslu](https://clojureverse.org/user_avatar/clojureverse.org/daslu/32/4173_2.png) [@daslu](https://clojureverse.org/u/daslu)
#### Post date: [January 31, 2025, 12:30pm UTC](https://clojureverse.org/t/echarts-visualizations-with-the-std-lang-transpiler/11184/1 "2025-01-31T12:30:09Z")

</div>

(in collaboration with @zcaudate)

Very often, data visualization with [Apache Echarts](https://echarts.apache.org/en/index.html) can be done with nothing more than a JSON data structure.

This can be conveniently created from plain Clojure data structures, and is supported by the [Kindly](https://scicloj.github.io/kindly/) standard. See, for example, the _(link might change)_ [Data Visualizations with Echarts](https://scicloj.github.io/noj/noj_book.echarts.html) tutorial at the Noj book.

However, sometimes, a little bit of Javascript is necessary to define **custom functions** to be used in Echarts. For example, a function to determine the symbol size in a scatterplot.

One way to achieve that in Clojure is by **transpiling Clojure forms** into Javascript. This can be done using [std.lang](https://v2.clojureverse.org/t/std-lang-a-universal-template-transpiler/), a universal transpiler from Clojure to many languages.

This tutorial will demonstrate that by mimicking Echarts’ [life expectancy timeline example](https://echarts.apache.org/examples/en/editor.html?c=scatter-life-expectancy-timeline) inspired by the famous [Gapminder](https://en.wikipedia.org/wiki/Gapminder_Foundation) demo by [Hans Rosling](https://en.wikipedia.org/wiki/Hans_Rosling).

> **[Creating Echarts plots with transpiled Javascript](https://scicloj.github.io/clojure-data-scrapbook/projects/datavis/echarts-with-transpiled-js//index.html)**
>
> A notebook of the Clojure Data Scrapbook

 ![image](https://v2.clojureverse.org/uploads/default/original/2X/2/2627c5867319d142949c2a770ba93598b100a51a.png)

---

<div class="post-metadata">

### Author: ![zcaudate1](https://clojureverse.org/user_avatar/clojureverse.org/zcaudate1/32/5459_2.png) [@zcaudate1](https://clojureverse.org/u/zcaudate1)
#### Post date: [February 3, 2025, 2:14pm UTC](https://clojureverse.org/t/echarts-visualizations-with-the-std-lang-transpiler/11184/2 "2025-02-03T14:14:22Z")

</div>

Really glad to be able to contribute to the growing ecosystem behind scicloj/kindly/clay.

---

<div class="post-metadata">

### Author: ![daslu](https://clojureverse.org/user_avatar/clojureverse.org/daslu/32/4173_2.png) [@daslu](https://clojureverse.org/u/daslu)
#### Post date: [February 4, 2025, 2:17pm UTC](https://clojureverse.org/t/echarts-visualizations-with-the-std-lang-transpiler/11184/3 "2025-02-04T14:17:14Z")

</div>

Thanks.

This experiment resulted in a new API for Tableplot:  
[https://v2.clojureverse.org/t/tableplot-now-uses-std-lang-for-a-new-transpile-api/](https://v2.clojureverse.org/t/tableplot-now-uses-std-lang-for-a-new-transpile-api/)

---

<div class="post-metadata">

### Author: ![system](https://clojureverse.org/uploads/default/original/2X/5/51079bf9e4b7d9466242c06cf1e43b9f8bd6da14.png) [@system](https://clojureverse.org/u/system)
#### Post date: [August 6, 2025, 2:17am UTC](https://clojureverse.org/t/echarts-visualizations-with-the-std-lang-transpiler/11184/4 "2025-08-06T02:17:27Z")

</div>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.