I see the code to create a Wilkinson Dot Plot in Vega-Lite:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A Wilkinson Dot Plot",
"height": 100,
"data": {
"values": [
10,11,11,11,14,15,17,
22,25,26,28,
33,33,33,34,37
]
},
"transform": [{
"window": [{"op": "rank", "as": "id"}],
"groupby": ["data"]
}],
"mark": {
"type": "circle",
"opacity": 1
},
"encoding": {
"x": {"field": "data", "type": "ordinal"},
"y": {"field": "id", "type": "ordinal", "axis": null, "sort": "descending"}
}
}
Creates a plot grouping the exact numbers, but I'd like the output to be by the first digit so really theres 7 vertical dots for 1, 4 vertical dots for 2, and 5 vertical dots for 3. I tried adding calculation: "str.map(x => x.charAt(0))" to the transform array so I could group by that, but was unsuccessful in my execution. Any ideas appreciated!
You were on the right track, except that calculate transforms cannot use arbitrary javascript code, but only the subset made available in Vega Expressions. So, for example, you could do something like this (vega editor):
{
"data": {
"values": [10, 11, 11, 11, 14, 15, 17, 22, 25, 26, 28, 33, 33, 33, 34, 37]
},
"transform": [
{"calculate": "floor(datum.data / 10)", "as": "data"},
{
"window": [{"op": "rank", "field": "data", "as": "id"}],
"groupby": ["data"]
}
],
"mark": {"type": "circle", "opacity": 1},
"encoding": {
"x": {"field": "data", "type": "ordinal"},
"y": {"field": "id", "type": "ordinal", "axis": null, "sort": "descending"}
}
}
Related
There can two sets of objects
First can be a straight forward where is no children
const noChildObj = [{
"id": 1,
"label": ["Description"],
"lines": 1,
"type": "string",
"precision": 2,
"width": 167.8
}, {
"id": 2,
"label": ["Information", "Ratio"],
"lines": 2,
"type": "number",
"precision": 2,
"width": 167.8
}, {
"id": 3,
"label": ["Tracking", "Error"],
"lines": 2,
"type": "number",
"precision": 2,
"width": 167.8
}]
So,in this case, there is no child , so property 'width' is at the topmost layer.
Second is where nesting of objects occur
So each object in the array will have a child object
[{
"id": "257",
"label": [""],
"lines": 1,
"children": [{
"id": "Description",
"label": ["Dates"],
"lines": 1,
"type": "date",
"precision": null,
"width": 839
}]
}, {
"id": "258",
"label": ["Cumulative Return"],
"lines": 1,
"children": [{
"id": 12,
"label": ["Russell 1000 Value - Price Return"],
"lines": 1,
"type": "number",
"precision": 2,
"width": 839
}]
}]
Here each object has a child object where the property width exists
This nesting is not limited to just 1 level
It can go upto 4 levels
So my use case requires if the innermost child has width undefined or not
I do realise that through recursion , we can traverse and find out..
But is there any function which can do it in less lines of code..may be in lodash
Please help
Know only how to do with recursion:
const objArray = [{
"id": 1,
"label": ["Description"],
"lines": 1,
"type": "string",
"precision": 2,
"width": 167.8
}, {
"id": "257",
"label": [""],
"lines": 1,
"children": [{
"id": "Description",
"label": ["Dates"],
"lines": 1,
"type": "date",
"precision": null,
"width": 839
}]
}]
const getWidthDeep = (el) => el.children && el.children[0]
? getWidthDeep(el.children[0])
: el.width
const result = objArray.map(getWidthDeep)
console.log(result)
Is it possible to create parallel coordinates in Vega-Lite? I'm looking for a simple yet powerful plotting library for JavaScript and support for parallel coordinates is a requirement.
I have googled it but only found how to do it in Vega.
Yes, you can create a parallel coordinates plot in Vega-Lite by combining a window transform and a fold transform. Here is an example with the Iris dataset (vega editor link):
{
"data": {
"url": "data/iris.json"
},
"transform": [
{"window": [{"op": "count", "as": "index"}]},
{"fold": ["petalLength", "petalWidth", "sepalLength", "sepalWidth"]}
],
"mark": "line",
"encoding": {
"color": {"type": "nominal", "field": "species"},
"detail": {"type": "nominal", "field": "index"},
"opacity": {"value": 0.3},
"x": {"type": "nominal", "field": "key"},
"y": {"type": "quantitative", "field": "value"}
},
"width": 600,
"height": 300
}
Notice we use a window transform to construct an index, followed by a fold transform to restructure the data for plotting.
Building on #jakevdp's answer, here is an improved version that normalizes each variables and manually draw axes with rule, text and tick marks.
Note that parallel coordinates are often useful when you have interactivity though, so there is more work to be done here.
{
"data": {
"url": "data/iris.json"
},
"width": 600,
"height": 300,
"transform": [
{"window": [{"op": "count", "as": "index"}]},
{"fold": ["petalLength", "petalWidth", "sepalLength", "sepalWidth"]},
{
"window": [
{"op": "min", "field": "value", "as": "min"},
{"op": "max", "field": "value", "as": "max"}
],
"frame": [null, null],
"groupby": ["key"]
},
{
"calculate": "(datum.value - datum.min) / (datum.max-datum.min)",
"as": "norm_val"
},
{
"calculate": "(datum.min + datum.max) / 2",
"as": "mid"
}
],
"layer": [{
"mark": {"type": "rule", "color": "#ccc", "tooltip": null},
"encoding": {
"detail": {"aggregate": "count", "type": "quantitative"},
"x": {"type": "nominal", "field": "key"}
}
}, {
"mark": "line",
"encoding": {
"color": {"type": "nominal", "field": "species"},
"detail": {"type": "nominal", "field": "index"},
"opacity": {"value": 0.3},
"x": {"type": "nominal", "field": "key"},
"y": {"type": "quantitative", "field": "norm_val", "axis": null},
"tooltip": [{
"field": "petalLength"
}, {
"field": "petalWidth"
}, {
"field": "sepalLength"
}, {
"field": "sepalWidth"
}]
}
},{
"encoding": {
"x": {"type": "nominal", "field": "key"},
"y": {"value": 0}
},
"layer": [{
"mark": {"type": "text", "style": "label"},
"encoding": {
"text": {"aggregate": "max", "field": "max", "type": "quantitative"}
}
}, {
"mark": {"type": "tick", "style": "tick", "size": 8, "color": "#ccc"}
}]
},{
"encoding": {
"x": {"type": "nominal", "field": "key"},
"y": {"value": 150}
},
"layer": [{
"mark": {"type": "text", "style": "label"},
"encoding": {
"text": {"aggregate": "min", "field": "mid", "type": "quantitative"}
}
}, {
"mark": {"type": "tick", "style": "tick", "size": 8, "color": "#ccc"}
}]
},{
"encoding": {
"x": {"type": "nominal", "field": "key"},
"y": {"value": 300}
},
"layer": [{
"mark": {"type": "text", "style": "label"},
"encoding": {
"text": {"aggregate": "min", "field": "min", "type": "quantitative"}
}
}, {
"mark": {"type": "tick", "style": "tick", "size": 8, "color": "#ccc"}
}]
}],
"config": {
"axisX": {"domain": false, "labelAngle": 0, "tickColor": "#ccc", "title": false},
"view": {"stroke": null},
"style": {
"label": {"baseline": "middle", "align": "right", "dx": -5, "tooltip": null},
"tick": {"orient": "horizontal", "tooltip": null}
}
}
}
I have a line chart, quite basic (see below for a simplified example that works on the Vega Editor). Basically, it draws lines, the X axis is successive dates, the Y axis is some numerical values.
I am trying to add labels for some of the data points on the line, with the value of Y at that point. Only for some of the data points, because some charts can be for over a year, so there can be hundreds of days (X values).
This is by the way how labels are put on the X axis automatically by Vega. If there are too many X values, it does not display every day, it says e.g. "Jan 1", then "Jan 8", then "Jan 15", etc. (nice one!)
Just for reference, with C3 (a charting library for D3), I used the following to draw one label out of every 7 data point:
data: {
json: data.data,
type: 'spline',
labels: {
format: function(v, id, i, j) {
if ( i % 7 === 3 ) {
return d3.format('.2f')(v);
}
}
...
Unfortunately, I have no idea where to start. I did not find any such example, and could not find anything related in the documentation.
Just for reference, here is an example chart to which I'd like to add these labels:
{
"$schema": "https://vega.github.io/schema/vega/v3.json",
"width": 500,
"height": 250,
"autosize": {
"type": "fit",
"resize": true
},
"data": [{
"name": "table",
"format": {
"parse": {
"date": "date",
"value": "number"
}
},
"values": [
{ "date": "2017-09-01", "value": "12.34", "what": "one" },
{ "date": "2017-09-01", "value": "4.34", "what": "two" },
{ "date": "2017-09-02", "value": "13.34", "what": "one" },
{ "date": "2017-09-02", "value": "13.34", "what": "two" },
{ "date": "2017-09-03", "value": "4.34", "what": "one" },
{ "date": "2017-09-03", "value": "15.34", "what": "two" },
{ "date": "2017-09-04", "value": "15.34", "what": "one" },
{ "date": "2017-09-04", "value": "5.34", "what": "two" },
{ "date": "2017-09-05", "value": "16.34", "what": "one" },
{ "date": "2017-09-05", "value": "6.34", "what": "two" },
{ "date": "2017-09-06", "value": "17.34", "what": "one" },
{ "date": "2017-09-06", "value": "17.34", "what": "two" },
{ "date": "2017-09-07", "value": "18.34", "what": "one" },
{ "date": "2017-09-07", "value": "8.34", "what": "two" },
{ "date": "2017-09-08", "value": "18.34", "what": "one" },
{ "date": "2017-09-08", "value": "14.34", "what": "two" },
{ "date": "2017-09-09", "value": "9.34", "what": "one" },
{ "date": "2017-09-09", "value": "14.34", "what": "two" },
{ "date": "2017-09-10", "value": "20.34", "what": "one" },
{ "date": "2017-09-10", "value": "4.34", "what": "two" }
]
}],
"scales": [{
"name": "x",
"type": "utc",
"range": "width",
"domain": {"data": "table", "field": "date"}
}, {
"name": "y",
"type": "linear",
"range": "height",
"nice": true,
"zero": true,
"domain": {"data": "table", "field": "value"}
}, {
"name": "color",
"type": "ordinal",
"range": "category",
"domain": {"data": "table", "field": "what"}
}],
"axes": [{
"orient": "bottom",
"scale": "x",
"encode": {
"labels": {
"interactive": true,
"update": {
"fill": {"value": "steelblue"},
"angle": {"value": 50},
"fontSize": {"value": 14},
"align": {"value": "left"},
"baseline": {"value": "middle"},
"dx": {"value": 3}
},
"hover": {
"fill": {"value": "firebrick"}
}}}
}, {
"orient": "left",
"scale": "y"
}],
"marks": [{
"type": "group",
"from": {
"facet": {
"name": "series",
"data": "table",
"groupby": "what"
}
},
"marks": [{
"type": "line",
"from": {"data": "series"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "date"},
"y": {"scale": "y", "field": "value"},
"stroke": {"scale": "color", "field": "what"},
"strokeWidth": {"value": 2}
},
"update": {
"interpolate": {"value": "monotone"},
"fillOpacity": {"value": 1}
},
"hover": {
"fillOpacity": {"value": 0.5}
}
}
}]
}]
}
Vega has a property called tickCount that can be added to your axes definitions. Adding this to your y-axis must solve your case:
{
"orient": "left",
"scale": "y",
"tickCount": 4
}
You could use a signal as well if it should be dynamic.
The feature is even more powerful than illustrated. Go check out the docs for other options in below link:
https://vega.github.io/vega/docs/axes/
i want to concat Multiple view in Vega using either vertical or horizontal operator?
i'm trying to put one specification inside "vconcat" array but visiualization is doesn't showing.what i to do for multiple view.
i gone through the following link
https://vega.github.io/vega-lite/docs/concat.html
Any one help to give sample example?
Thanks
https://vega.github.io/editor/#/examples/vega-lite/overview_detail uses concat.
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {"url": "data/sp500.csv"},
"vconcat": [{
"width": 480,
"mark": "area",
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"scale": {"domain": {"selection": "brush"}},
"axis": {"title": "", "labelAngle": 0}
},
"y": {"field": "price","type": "quantitative"}
}
}, {
"width": 480,
"height": 60,
"mark": "area",
"selection": {
"brush": {"type": "interval", "encodings": ["x"]}
},
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"axis": {"format": "%Y", "labelAngle": 0}
},
"y": {
"field": "price",
"type": "quantitative",
"axis": {"tickCount": 3, "grid": false}
}
}
}]
}
I'm trying to draw a combination chart with two series represented with bars. Each one has its own xaxis, on the top and in the bottom. In my example I have one of them with zero values. The problem is that xaxis for the series with zero values is staged (bottom xaxis in the example). I don't know why. If I modify the series to non-zero values the xaxis labels are perfect.
$(function () {
$('#container').highcharts({
"colors": ["#00bdbd","#666666"],
"legend": {
"align": "center",
"verticalAlign": "top",
"x": 0,
"y": 10,
"borderWidth": 0
},
"xAxis": {
"labels": {
"rotation": 0,
"align": "right",
"staggerLines": 1,
"y": 4
},
"title": {
"style": {
"color": "#757477"
}
},
"categories": ["Asturias","Cantabria"],
"lineWidth": 0,
"tickLength": 0
},
"yAxis": [{
"title": {
"text": "Tourists",
"style": {
"color": "#666666"
}
},
"min": 0
},
{
"title": {
"text": "Tourists",
"style": {
"color": "#666666"
}
},
"min": 0,
"opposite": true
}],
"series": [{
"name": "Zero",
"type": "bar",
"data": [0,0],
"yAxis": 0,
"stack": 0,
"zIndex": 0,
"animation": true
},
{
"name": "Visits",
"type": "bar",
"data": [8000,3000],
"yAxis": 1,
"stack": 1,
"zIndex": 0,
"animation": true
}]
});
});
In this highcharts example you can see the problem.
Thank you.
You can set staggerLines parameter as 1.
labels:{
staggerLines:1
},
Example: http://jsfiddle.net/2wusojab/1/