Data Conversion
Echarts
You may convert your data into interactive charts by embedding it in a 'echarts' code block like this:
```echarts
Marketing Funnel:Display>Click>Visit>Consult>Order
```
Then chart is generated as the right is.
Marketing Funnel:Display>Click>Visit>Consult>Order
By clicking the bottom-right icon you may view the original data we just put in the code block.
There are five forms of data we may convert to charts:
- Pyramid
- Points
- Table
- Tree
- Graph
1. Pyramid
With just one line we can generate a funnel chart or a pyramid chart:
Marketing Funnel:Display>Click>Visit>Consult>Order
Maslow's Hierarchy of Needs:Self-actualization<Esteem<Love and belonging<Safety needs<Physiological needs
Click the bottom-right icon (it's called DataView) to see the original data.
2. Points
:x,y
28604,77
31163,77.4
1516,68
13670,74.7
28666,78.1
1777,57.7
29550,79.1
2076,67.9
12087,72
24021,75.4
43296,76.8
10670,67.3
26424,75.7
37062,75.4
It is easy to draw some points by supplying the 2-tuple coordinates.
You can also generate something much more complex with size and label extended.
Life Expectancy and GDP at 1990 ~ 2000:GDP,Average Life,Population,Country
1990
28604,77,17096869,Australia
31163,77.4,27662440,Canada
1516,68,1154605773,China
13670,74.7,10582082,Cuba
28599,75,4986705,Finland
29476,77.1,56943299,France
1995
31476,75.4,78958237,Germany
28666,78.1,254830,Iceland
1777,57.7,870601776,India
29550,79.1,122249285,Japan
2076,67.9,20194354,North Korea
12087,72,42972254,South Korea
24021,75.4,3397534,New Zealand
2000
43296,76.8,4240375,Norway
10088,70.8,38195258,Poland
19349,69.6,147568552,Russia
10670,67.3,53994605,Turkey
26424,75.7,57110117,United Kingdom
37062,75.4,252847810,United States
3. Table
Tabled data are easy to be understand, even in plain text.
They can be converted into three kinds of chart:
- Barline.
- Radar.
- Parallel.
3.1 Barline
Weekday\Request\Request Trend by Channels:Mail,Moba,Vedio Ads,Direct,Search Engine
Sunday,210,310,410,320,1320
Monday,120,220,150,320,820
Tuesday,132,182,232,332,932
Wednesday,101,191,201,301,901
Thursday,134,234,154,334,934
Friday,90,290,190,390,1290
Saturday,230,330,330,330,1330
Click DataView. I hope the headcell [xAxis]\[yAxis]\[title] can remind you of the top-left corner of tables which you might always see in daily life.
Weekday\Request\Request Trend by Channels:-Mail+-Moba+-Vedio Ads+-Direct,.Search Engine
Sunday,210,310,410,320,1320
Monday,120,220,150,320,820
Tuesday,132,182,232,332,932
Wednesday,101,191,201,301,901
Thursday,134,234,154,334,934
Friday,90,290,190,390,1290
Saturday,230,330,330,330,1330
Besides bars, you may represent your data in lines and scatters.
And you may stack some of them together.
Weekday\Request|Request2\Request Trend by Channels:Mail,Moba+Vedio Ads|-Direct,-Search Engine
Sunday,210,310,410,320,1320
Monday,120,220,150,320,820
Tuesday,132,182,232,332,932
Wednesday,101,191,201,301,901
Thursday,134,234,154,334,934
Friday,90,290,190,390,1290
Saturday,230,330,330,330,1330
Involving different kinds of series, it is common to have some of them much larger or smaller than others. In this situation you may add another yAxis with a simple '|'.
3.2 Radar and Parallel
*\\Air Quality:Beijing,Shanghai,Guangzhou,Shenzhen,Hangzhou,Chengdu,Wuhan
AQI,55,25,56,33,82,42,74
PM2.5,9,11,7,7,58,24,49
PM10,56,21,63,29,90,44,77
CO,0.46,0.65,0.3,0.33,1.77,0.76,1.46
NO2,18,34,14,16,68,40,48
SO2,6,9,5,6,33,16,27
Sometimes what is layed on xAxis are meaningless to compare with each other that you can only put a '*' to sum them up. What's more, '*' looks like a radar.
*\\Air Quality:Beijing,Shanghai,Guangzhou,Shenzhen,Hangzhou,Chengdu,Wuhan
AQI,55,25,56,33,82,42,74
PM2.5,9,11,7,7,58,24,49
PM10,56,21,63,29,90,44,77
CO,0.46,0.65,0.3,0.33,1.77,0.76,1.46
NO2,18,34,14,16,68,40,48
SO2,6,9,5,6,33,16,27
Level,Good,Excellent,Good,Bad,Medium,Bad,Medium
After adding a new row called 'level' with non-numeric data, radar is not suitable anymore. But a chart with parallel axis is.
4. Tree
A data in tree is nothing more than indentations:
```echarts
Request Trend by Channels
Direct:335
*Mail:310
Moba:274
*Vedio Ads:85
Search Engine:400
```
See what it will become.
Request Trend by Channels
Direct:335
*Mail:310
Moba:274
*Vedio Ads:85
Search Engine:400
A tree with only two levels is converted into a pie chart, with root being used as title.
WORLD COFFEE RESEARCH SENSORY LEXICON
Flora:
Black Tea: 1
Floral:
Chamomile: 1
Rose: 1
Jasmine: 1
*Fruity:
Berry:
Blackberry: 1
Raspberry: 1
Blueberry: 1
Dried Fruit:
Raisin: 1
Prune: 1
Citrus Fruit:
*Grapefruit: 1
Orange: 1
Lime: 1
Sour Fermented:
*Sour:
Sour Aromatics: 1
Acetic Acid: 1
Malic Acid: 1
*Alcohol Fremented:
Winey: 1
Fremented: 1
Overripe: 1
Green Vegetative:
Olive Oil: 1
Raw: 1
Green Vegetative:
Dark Green: 1
Vegetative: 1
Herb-like: 1
Other:
Papery/Musty:
Animalic: 1
Meaty Brothy: 1
Phenolic: 1
Chemical:
Medicinal: 1
Skunky: 1
Rubber: 1
Roasted:
Spices:
Pungent: 1
Pepper: 1
Brown Spice:
Nutmeg: 1
Cinnamon: 1
Clove: 1
Nutty Cocoa:
Nutty:
Peanuts: 1
Hazelnut: 1
Almond: 1
Cocoa:
Chocolate: 1
Dark Chocolate: 1
Sweet:
Brown Sugar:
Maple Syrup: 1
Caramelized: 1
Honey: 1
Vanilla: 1
Vanillin: 1
Overall Sweet: 1
Sweet Aromatics: 1
A tree with more than two levels is converted into a nested pie chart, with root being used as title.
WORLD COFFEE RESEARCH SENSORY LEXICON
Flora: Comment Me!
Black Tea
Floral
Chamomile
Rose
Jasmine
*Fruity:测试
Berry
Blackberry
Raspberry
Blueberry
Dried Fruit
Raisin:这是什么？
Prune
Citrus Fruit
*Grapefruit
Orange
Lime
Sour Fermented
*Sour
Sour Aromatics
Acetic Acid
Malic Acid
Alcohol Fremented
Winey
Fremented
Overripe
Green Vegetative
*Olive Oil
*Raw
Green Vegetative
Dark Green
Vegetative
Herb-like
Other
Papery/Musty
Animalic
Meaty Brothy
Phenolic
Chemical
Medicinal
Skunky
Rubber
With any value that is not numeric, a data is converted into a tree.
Graph
node1 -> node2 [10]
node1 -> node3 [20]
node1 -> node4 [1]
node2 -> node4 [1]
```echarts
node1:10,20,node4
node2:node4
node3:
node4:
```
A graph of the left one may be represented in an adjacency matrix of upper triangle like the right one.
TODO: Graph
But data representing a graph is always not so readable in plaintext as a table.
And I hope to create a tool only for readable data.
So it is time to check out mermaid now.
mermaid
Mermaid is used to generate diagrams, charts, graphs or flows from markdown-like text.
Flow
```mermaid
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server01]
B --> D[Server02]
```
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server01]
B --> D[Server02]
Gantt
gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
```mermaid
gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
```
More
Page Not Found
Try to search through the entire repo.