For this, I have been using the Vega Editor.
So I initially had the code for showing sin and cos absolutely fine, then when I tried to add tan, I understandably had some issues with scale, as the y values of tan were relatively huge when it approached the points where the function becomes undefined.
In order to tackle this, I added a range filter on the tan element, but it seems to be trying to join the points either side of when it is undefined. For some reason, this has also altered the sin line.
Here is the code I have so far:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Plots three functions using a generated sequence.",
"width": 300,
"height": 150,
"data": {
"sequence": {
"start": 0,
"stop": 12.7,
"step": 0.1,
"as": "x"
}
},
"transform": [
{
"calculate": "sin(datum.x)",
"as": "sin(x)"
},
{
"calculate": "cos(datum.x)",
"as": "cos(x)"
},
{
"calculate": "tan(datum.x)",
"as": "tan(x)"
},
{
"filter": {
"field": "tan(x)",
"range": [-1, 1]
}
},
{
"fold": [
"sin(x)",
"cos(x)",
"tan(x)"
]
}
],
"mark": "line",
"encoding": {
"x": {
"type": "quantitative",
"field": "x"
},
"y": {
"field": "value",
"type": "quantitative"
},
"color": {
"field": "key",
"type": "nominal",
"title": null
}
}
}
How I can I get this data to not try and join up points but it instead let the tan line rise until it is out of the range? I also have very little idea what is happening with sin line, it is fine without the addition of the tan line.
Any help is greatly appreciated.
To avoid drawing a line between adjacent points, you'll need to split each segment into a separate group: the detail encoding is useful for this. Unfortunately, a grouping like this will apply to all the lines affected by the encoding, so to avoid breaks in the sin(x) and cos(x) curves, you'll need to split the tangent into a separate layer.
Here is how you might do this (open in editor):
{
"width": 300,
"height": 150,
"data": {"sequence": {"start": 0, "stop": 12.7, "step": 0.1, "as": "x"}},
"transform": [
{"calculate": "sin(datum.x)", "as": "sin(x)"},
{"calculate": "cos(datum.x)", "as": "cos(x)"},
{"calculate": "tan(datum.x)", "as": "tan(x)"},
{"calculate": "floor(datum.x / PI - 0.5)", "as": "phase"}
],
"encoding": {
"x": {"type": "quantitative", "field": "x"},
"y": {
"field": "value",
"type": "quantitative",
"scale": {"domain": [-3, 3]}
},
"color": {"field": "key", "type": "nominal", "title": null}
},
"layer": [
{"transform": [{"fold": ["sin(x)", "cos(x)"]}], "mark": "line"},
{
"transform": [{"fold": ["tan(x)"]}],
"mark": {"type": "line", "clip": true},
"encoding": {"detail": {"field": "phase", "type": "ordinal"}}
}
]
}
Related
Let's start from this example:
https://vega.github.io/vega/examples/heatmap/
This is a glimpse of the underlying data:
date pressure temperature wind
2010-01-01T01:00:00 1016.6 4 3.8
2010-01-01T02:00:00 1016.6 3.9 3.8
2010-01-01T03:00:00 1016.7 3.8 3.8
2010-01-01T04:00:00 1016.7 3.8 3.7
2010-01-01T05:00:00 1016.5 3.7 3.8
2010-01-01T06:00:00 1016.4 3.7 3.8
In the above figure, the color of each cell in the heatmap represents the value of temperature from a single row in the data table.
Suppose we want to change the display, so that the color of each cell in the heatmap represents the average of multiple rows in the data table?
For example, suppose we want to apply binning to both the x-axis and to the y-axis.
For the y-axis, we would create 3 bins:
6am-11am, 12pm-6pm, 7pm-12am
For the x-axis, we would create 12 bins:
one bin for each month
Then, the heatmap would have 3 rows and 12 columns, and the color of each cell in the heatmap would correspond to the average of temperature values in the corresponding bin.
Questions:
How would you do this with vega? Can we use a transform to accomplish this task?
Should we use another javascript library to do the binning first, and then pass the result to vega?
Could you share a code snippet or suggest a library for efficient 2d binning (e.g., for a million items with continuous x,y positions)?
Suppose some of the bins correspond to no data (0 rows in the data table). Can we skip drawing them entirely? Or color them with a background color?
Thanks for your help!
You can use transform calculate to group them in your bands using ternary conditions and create a new field as timeGroup and then use it in your y-axis as done below or in
Try it in the editor: link
Here's the figure:
Here's the code:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"autosize": {"contains": "padding", "type": "fit", "resize": true},
"width": 600,
"height": 150,
"padding": {"left": 15, "right": 60, "bottom": 5},
"data": {
"url": "data/seattle-weather-hourly-normals.csv",
"format": {"type": "csv", "parse": {"date": "date"}}
},
"transform": [
{"calculate": "month(datum.date)", "as": "cvDate"},
{"calculate": "utchours(datum.date)", "as": "hoursDate"},
{
"calculate": "0 < datum.hoursDate && datum.hoursDate < 7 ? '1 am - 6 am': 6 < datum.hoursDate && datum.hoursDate < 13 ? '7 am - 12 pm' : 12 < datum.hoursDate && datum.hoursDate < 19 ? '1 pm - 6 pm': '7 pm - 12 am'",
"as": "timeGroup"
},
{
"calculate": "datum.timeGroup == '1 am - 6 am' ? 0 : datum.timeGroup == '7 am - 12 pm' ? 1 : datum.timeGroup == '1 pm - 6 pm' ? 2 : 3",
"as": "orderRank"
}
],
"encoding": {
"y": {
"field": "timeGroup",
"type": "ordinal",
"sort": {"field": "orderRank", "order": "descending"}
},
"x": {
"field": "date",
"type": "ordinal",
"timeUnit": "month",
"sort": null
}
},
"layer": [
{
"mark": {"type": "rect"},
"encoding": {
"fill": {
"field": "temperature", "type": "quantitative",
"aggregate": "mean"
}
}
}
]
}
After looking through the vega-lite documentation again, I think I stumbled into an answer that looks good.
Try it in the editor: link
Here's the figure:
And the code:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "data/movies.json"},
"transform": [
{
"filter": {
"and": [
{"field": "IMDB Rating", "valid": true},
{"field": "Rotten Tomatoes Rating", "valid": true}
]
}
}
],
"mark": "rect",
"width": 300,
"height": 200,
"encoding": {
"x": {
"bin": {"maxbins": 60},
"field": "IMDB Rating",
"type": "quantitative"
},
"y": {
"bin": {"maxbins": 40},
"field": "Rotten Tomatoes Rating",
"type": "quantitative"
},
"color": {
"aggregate": "mean",
"field": "Worldwide Gross",
"type": "quantitative"
}
},
"config": {"view": {"stroke": "transparent"}}
}
And the link to documentation about how to use "aggregate":
https://vega.github.io/vega-lite/docs/aggregate.html#aggregate-op-def
I am currently trying to display errorBars with a column chart which is working for the most part. The problem is the ordering of the error bars. They are back to font.
I have used the same data on a line chart which works fine for me.
This is my setup for my HighCharts options:
"chart": {
"type": "column",
"renderTo": {}
},
"title": {
"text": "Line chart",
"style": {
"color": "#000",
"fontFamily": "Arial, Helvetica, sans-serif",
"fontSize": "1.1rem",
"fontWeight": "bold"
}
},
"subtitle": {
"text": "Browser market share data 2019-2020",
"style": {
"color": "#000",
"fontFamily": "Arial, Helvetica, sans-serif",
"fontSize": "0.9rem",
"fontWeight": "regular"
}
},
"xAxis": [
{
"categories": [
"Chrome",
"Internet Explorer\n ",
"Firefox\n ",
"Edge\n ",
"Safari\n ",
"Sogou Explorer\n ",
"Opera\n ",
"QQ\n ",
"Other\n "
],
"title": {},
"accessibility": {
"description": "Line chart"
}
}
],
"tooltip": {
"shared": true
},
"plotOptions": {
"series": {
"showInLegend": true,
"events": {}
},
"column": {
"maxPointWidth": 75
}
},
"legend": {
"enabled": true,
"itemStyle": {
"font": "Arial, Helvetica, sans-serif",
"color": "#000"
},
"itemHoverStyle": {
"color": "gray"
}
},
"accessibility": {
"description": null
},
"series": [
{
"name": "2019",
"yAxis": 0,
"data": [
61.41,11.84,10.85,1,1,1.64,1.6,1,2.61
]
},
{
"name": "2020",
"yAxis": 0,
"data": [
50,40,20,15,14,12,6,4,3
]
},
{
"name": "Confidence interval",
"type": "errorbar",
"yAxis": 0,
"data": [
[55,65],
[5,15],
[7,25],
[1,2],
[1,2],
[1,4],
[1,3],
[1,2],
[2,4]
],
"tooltip": {
"pointFormat": "<strong>2019 error range</strong>: {point.low}-{point.high}<br/>"
}
},
{
"name": "Confidence interval",
"type": "errorbar",
"yAxis": 0,
"data": [
[45,55],
[30,50],
[15,30],
[10,20],
[10,20],
[6,18],
[4,8],
[1,6],
[1,6]
],
"tooltip": {
"pointFormat": "<strong>2020 error range</strong>: {point.low}-{point.high}<br/>"
}
}
],
"credits": {
"enabled": false
},
"exporting": {
"enabled": false
},
"colors": [
"#b2182b",
"#d6604d",
"#f4a582",
"#fddbc7",
"#d1e5f0",
"#92c5de",
"#4393c3",
"#2166ac"
]
}
And this is the result:
As you can see from the hover state that the labels are displaying correctly but on the chart the error bars don't match each column. They are in reverse and misaligned. Also they are slightly different shape from each other.
I have used this HighCharts guide for reference, mine doesn't look much different from the example https://www.highcharts.com/demo/error-bar/grid-light
The difference here is because the chart differently places the columns and error bars, especially it is visible with multiple columns.
After simplifying the demo, I was able to add one property called pointPlacement to the error series with the number to shift that series to a proper place.
API: https://api.highcharts.com/highcharts/series.errorbar.pointPlacement
Live demo: https://jsfiddle.net/BlackLabel/L3xwoe92/
I've to change default bar color in a custom tfs widget, how can I do this?
I know there a "color" option but I can't find the correct syntax.
Thanks.
Here's my chart code:
chartOptions = {
"hostOptions": {
"height": "290",
"width": "300"
},
"chartType": "bar",
"series": [{
"data": [myBugs, myVuln, myCodeSm]
}],
"xAxis": {
"labelValues": ["Bugs", "Vulnerabilities", "Code smells"]
},
"specializedOptions": {
"showLabels": "true",
"size": 200
}
};
Try to add your custom colors like below:
chartOptions = {
"hostOptions": {
"height": "290",
"width": "300"
},
"colorCustomizationOptions": {
"customColors": ["#FF0000", "#00CC00", "#302772"]
},
"chartType": "bar",
"series": [{
"data": [myBugs, myVuln, myCodeSm]
}],
"xAxis": {
"labelValues": ["Bugs", "Vulnerabilities", "Code smells"]
},
"specializedOptions": {
"showLabels": "true",
"size": 200
}
};
In vss-web-extension-sdk/typings/charts.d.ts I found that customColors is a ColorEntry array. ColorEntry has two string properties: value, backgroundColor. With some trial and error I found out that value should be the label for which you want to set the color.
So I think this should work:
chartOptions = {
"hostOptions": {
"height": "290",
"width": "300"
},
"chartType": "bar",
"series": [{
"data": [myBugs, myVuln, myCodeSm]
}],
"xAxis": {
"labelValues": ["Bugs", "Vulnerabilities", "Code smells"]
},
"colorCustomizationOptions": {
"customColors": [
{backgroundColor: "#FF0000", value: "Bugs"},
{backgroundColor: "#00CC00", value: "Vulnerabilities"},
{backgroundColor: "#302772", value: "Code smells"}
]
},
"specializedOptions": {
"showLabels": "true",
"size": 200
}
};
i have geojson data:
{
"type":"FeatureCollection",
"metadata":{
"generated":1417015873000,
11-26T14:33:40&endtime=2014-11-26T14:33:45",
"title":"USGS Earthquakes",
"status":200,
"api":"1.0.13",
"count":1
},
"features":
[{
"type":"Feature",
"properties":
{
"mag":6.8,
"place":"160km NW of Kota Ternate, Indonesia",
"time":1417012423350,"updated":1417015584000,
"tz":480,
"url":"http://comcat.cr.usgs.gov/earthquakes/eventpage/usb000t08w",
"detail":"http://comcat.cr.usgs.gov/fdsnws/event/1/query?eventid=usb000t08w&format=geojson",
"felt":1,
"cdi":5,
"mmi":4.98,
"alert":"green",
"status":"reviewed",
"tsunami":1,
"sig":712,
"net":"us",
"code":"b000t08w",
"ids":",at00nfnhsd,pt14330000,usb000t08w,",
"sources":",at,pt,us,",
"types":",cap,dyfi,general-link,geoserve,impact-link,losspager,moment-tensor,nearby-cities,origin,phase-data,shakemap,tectonic-summary,",
"nst":null,
"dmin":1.45,
"rms":1.32,
"gap":37,
"magType":"mwb",
"type":"earthquake",
"title":"M 6.8 - 160km NW of Kota Ternate, Indonesia"
},
"geometry":{"type":"Point","coordinates":[126.5456,1.9752,41.06]},
"id":"usb000t08w"
}]
}
how to parse value "title" ?
var geojson = JSON.parse(geojson_data);
Turns the geojson string into an object, from there you can get whatever you values you want from it.
Edit: your json is invalid, where are you getting the data from? I cleaned it up, so you can call JSON.parse on it. However, it is not valid geojson, so I'd double check where you come up with the data. This geojson validator might help.
{
"metadata": {
"generated": 1417015873000,
"11-26T14: 33: 40&endtime=2014-11-26T14: 33": 45,
"title": "USGSEarthquakes",
"status": 200,
"api": "1.0.13",
"count": 1
},
"features": [
{
"type": "Feature",
"properties": {
"mag": 6.8,
"place": "160km NW of Kota Ternate, Indonesia",
"time": 1417012423350,
"updated": 1417015584000,
"tz": 480,
"url": "http://comcat.cr.usgs.gov/earthquakes/eventpage/usb000t08w",
"detail": "http://comcat.cr.usgs.gov/fdsnws/event/1/query?eventid=usb000t08w&format=geojson",
"felt": 1,
"cdi": 5,
"mmi": 4.98,
"alert": "green",
"status": "reviewed",
"tsunami": 1,
"sig": 712,
"net": "us",
"code": "b000t08w",
"ids": ",at00nfnhsd,pt14330000,usb000t08w,",
"sources": ",at,pt,us,",
"types": ",cap,dyfi,general-link,geoserve,impact-link,losspager,moment-tensor,nearby-cities,origin,phase-data,shakemap,tectonic-summary,",
"nst": null,
"dmin": 1.45,
"rms": 1.32,
"gap": 37,
"magType": "mwb",
"type": "earthquake",
"title": "M 6.8 - 160km NW of Kota Ternate, Indonesia"
},
"geometry": {
"type": "Point",
"coordinates": [
126.5456,
1.9752,
41.06
]
},
"id": "usb000t08w"
}
]
}
There's a zooming bug that we're struggling.
If you zoom in the left side of the chart, the right side of the chart is zoomed.
Simple example:
http://jsfiddle.net/andrut/TfG6c/
I do it like that:
{
"chart": {
"renderTo": "container",
"zoomType": "xy",
"type": "column"
},
"plotOptions": {
"series": {
"groupPadding": 0.04
}
},
"series": [{
"name": "col0",
"data": [{
"y": 93723,
"color": "#773676"
}]
}, {
"name": "col1",
"data": [{
"y": 68630,
"color": "#ff9900"
}]
}]
}
Is there any workaround to fix this? I haven't found anything interesting anywhere...
Thanks,
Karol
You need to set minRange paramter
yAxis:{
minRange: 1000
},
http://jsfiddle.net/TfG6c/1/