Some text lorem ipsum
vega-lite:
{
"data": {
"values": [
{"a": "C", "b": 2}, {"a": "C", "b": 7}, {"a": "C", "b": 4},
{"a": "D", "b": 1}, {"a": "D", "b": 2}, {"a": "D", "b": 6},
{"a": "E", "b": 8}, {"a": "E", "b": 4}, {"a": "E", "b": 7}
]
},
"mark": "point",
"encoding": {
"x": {"field": "a", "type": "nominal"},
"y": {"field": "b", "type": "quantitative"}
}
}
... and vega:
{
"width": 1,
"height": 1,
"padding": "auto",
"data": [
{
"name": "source",
"url": "wikidatasparql://query.wikidata.org/?query=SELECT%20%3Fitem%20%3FitemLabel%20%3FcountryLabel%20%3Fdates%20%3FtestNo%20WHERE%20%7B%0A%20%20%3Fitem%20wdt%3AP361%20wd%3AQ83741704.%0A%20%20%3Fitem%20p%3AP8011%20%3Ftest.%20%0A%20%20%3Ftest%20pq%3AP585%20%3Fdates%3B%0A%20%20%20%20ps%3AP8011%20%3FtestNo%0A%20%20OPTIONAL%20%7B%20%3Fitem%20wdt%3AP17%20%3Fcountry.%20%7D%0A%20%20SERVICE%20wikibase%3Alabel%20%7B%20bd%3AserviceParam%20wikibase%3Alanguage%20%22%5BAUTO_LANGUAGE%5D%2Cen%22.%20%7D%0A%7D%0AORDER%20BY%20%28%3FcountryLabel%29%20%28%3FitemLabel%29%20%28%3Fdates%29",
"format": {"type": "json","parse": {"dates": "date","testNo": "number"}},
"transform": [
{
"type": "filter",
"test": "datum[\"dates\"] !== null && !isNaN(datum[\"dates\"]) && datum[\"testNo\"] !== null && !isNaN(datum[\"testNo\"])"
},
{"type": "filter","test": "datum[\"testNo\"] > 0"}
]
},
{
"name": "layout",
"source": "source",
"transform": [
{
"type": "aggregate",
"summarize": [{"field": "countryLabel","ops": ["distinct"]}]
},
{"type": "formula","field": "child_width","expr": "400"},
{
"type": "formula",
"field": "width",
"expr": "datum[\"child_width\"] + 16"
},
{"type": "formula","field": "child_height","expr": "400"},
{
"type": "formula",
"field": "height",
"expr": "(datum[\"child_height\"] + 16) * datum[\"distinct_countryLabel\"]"
}
]
}
],
"marks": [
{
"name": "root",
"type": "group",
"from": {"data": "layout"},
"properties": {"update": {"width": {"field": "width"},"height": {"field": "height"}}},
"marks": [
{
"name": "x-axes",
"type": "group",
"properties": {
"update": {
"width": {"field": {"parent": "child_width"}},
"height": {"field": {"group": "height"}},
"x": {"value": 8}
}
},
"axes": [
{
"type": "x",
"scale": "x",
"grid": false,
"ticks": 5,
"title": "dates",
"properties": {
"labels": {
"text": {"template": "{{datum[\"data\"] | time:'%Y-%m-%d'}}"},
"angle": {"value": 270},
"align": {"value": "right"},
"baseline": {"value": "middle"}
}
}
}
]
},
{
"name": "y-axes",
"type": "group",
"from": {
"data": "source",
"transform": [
{
"type": "aggregate",
"groupby": ["countryLabel"],
"summarize": {"*": ["count"]}
}
]
},
"properties": {
"update": {
"width": {"field": {"group": "width"}},
"height": {"field": {"parent": "child_height"}},
"y": {"scale": "row","field": "countryLabel","offset": 8}
}
},
"axes": [
{
"type": "y",
"scale": "y",
"format": "s",
"grid": false,
"title": "testNo"
}
]
},
{
"name": "cell",
"type": "group",
"from": {
"data": "source",
"transform": [{"type": "facet","groupby": ["countryLabel"]}]
},
"properties": {
"update": {
"x": {"value": 8},
"y": {"scale": "row","field": "countryLabel","offset": 8},
"width": {"field": {"parent": "child_width"}},
"height": {"field": {"parent": "child_height"}},
"stroke": {"value": "#ccc"},
"strokeWidth": {"value": 1}
}
},
"marks": [
{
"name": "child_marks",
"type": "symbol",
"properties": {
"update": {
"x": {"scale": "x","field": "dates"},
"y": {"scale": "y","field": "testNo"},
"size": {"value": 30},
"shape": {"value": "circle"},
"strokeWidth": {"value": 2},
"opacity": {"value": 0.7},
"stroke": {"scale": "color","field": "countryLabel"},
"fill": {"value": "transparent"}
}
}
}
],
"axes": [
{
"type": "x",
"scale": "x",
"grid": true,
"tickSize": 0,
"properties": {
"labels": {"text": {"value": ""}},
"axis": {"stroke": {"value": "transparent"}}
},
"layer": "back",
"ticks": 5
},
{
"type": "y",
"scale": "y",
"grid": true,
"tickSize": 0,
"properties": {
"labels": {"text": {"value": ""}},
"axis": {"stroke": {"value": "transparent"}}
},
"layer": "back"
}
]
}
],
"scales": [
{
"name": "row",
"type": "ordinal",
"domain": {"data": "source","field": "countryLabel","sort": true},
"range": "height",
"round": true
},
{
"name": "x",
"type": "time",
"domain": {
"data": "source",
"field": "dates",
"sort": {"field": "dates","op": "min"}
},
"rangeMin": 0,
"rangeMax": 400,
"round": true
},
{
"name": "y",
"type": "log",
"domain": {"data": "source","field": "testNo"},
"rangeMin": 400,
"rangeMax": 0,
"round": true,
"nice": true,
"zero": true
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "source","field": "countryLabel","sort": true},
"range": "category10"
}
],
"axes": [
{
"type": "y",
"scale": "row",
"orient": "right",
"tickSize": 0,
"title": "countryLabel",
"properties": {
"axis": {"strokeWidth": {"value": 0}},
"labels": {
"angle": {"value": 90},
"align": {"value": "center"},
"baseline": {"value": "bottom"}
}
}
}
],
"legends": [
{
"stroke": "color",
"title": "countryLabel",
"properties": {
"symbols": {
"strokeWidth": {"value": 2},
"opacity": {"value": 0.7},
"shape": {"value": "circle"}
}
}
}
]
}
]
}
st=>start: Start|past
e=>end: End|future
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|future
st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Some note
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
anything?
Raw html?
Visit Jon Schlinkert's GitHub Profile.
... will you display a SVG file from different domain?
