# Visualization

- Page: https://shared.btbytes.com/p/visualization
- Date: 2023-07-26
- Tags: visualization

Fundamental rule -- [Friends don't let friends make certain types of data visualization - What are they and why are they bad.](https://github.com/cxli233/FriendsDontLetFriends)

[Vega-Lite](https://vega.github.io/vega-lite/examples/) <q>Vega is a declarative format for creating, saving, and sharing visualization designs. With Vega, visualizations are described in JSON, and generate interactive views using either HTML5 Canvas or SVG.</q>

[Domain Storytelling - Domain Storytelling](https://domainstorytelling.org/) <q>Domain Storytelling is a technique to transform domain knowledge into effective business software. It **_brings together domain experts and development teams_**. The domain experts can see immediately whether we understand their story correctly.</q>


## Visualization Stories

- [Spain lives in flats: why we have built our cities vertically](https://especiales.eldiario.es/spain-lives-in-flats/)

## Python Libraries

[Manim Community](https://docs.manim.community/en/stable/) is the library developed by "3blue1green" and the community to produce dynamic visualizations.

## Javascript libraries

[Apache ECharts](https://echarts.apache.org/en/index.html) via [A love letter to Apache Echarts](https://alicegg.tech//2024/02/14/echarts.html)

> What makes it stand out from other charting libraries is that it manages to cover a very wide range of use cases while remaining simple to use. On top of that, the documentation never failed to point me in the right direction. And most importantly, the results look good and are interactive.

Bar chart code.. I like the direct injection into an HTML element:

```js
		const bar = echarts.init(document.getElementById('bar'));
bar.setOption({
  legend: {},
  tooltip: {},
  dataset: {
    // dataset.source contains your data in table form
    source: [
      ['repo', 'stars'],
      ['Mikochi', 129],
      ['crud_benchmark', 40],
      ['sql-repository', 7],
    ],
  },
  xAxis: {
    // category will use the first column for the x axis
    type: 'category',
  },
  yAxis: {},
  series: [
    // this creates a bar chart
    { type: 'bar' },
  ],
});
```


## Blogs

<a href="#stefaner" id="stefaner" class="pilcrow">¶</a> [Truth & Beauty - Data visualization by Moritz Stefaner](https://truth-and-beauty.net/)

## Courses

- [Data Visualization – Data Visualization with R](https://datavizs24.classes.andrewheiss.com/) by Andrew Heiss at GSU.


## Projects

[ClickPy](https://clickpy.clickhouse.com) is an analytics dashboard to explore PyPI using Clickhouse backend.


## Skills

[tufte-viz Claude Code skill — Edward Tufte data visualization principles · GitHub](https://gist.github.com/aparente/e48c353755958621b3c0004593105a90)

----

See also Display Tables