43:["$","title",null,{"children":"How to create a gauge with Vega | Mayuko Bonnefoy | Observable"}] 4b:T2ab8,embed( { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height": 600, "signals": [ { "name": "title", "value":"Gauge title" }, { "name": "showTitle", "value":true }, { "name": "centerX", "update": "width/2" }, { "name": "centerY", "update": "height/2 + outerRadius/2" }, { "name": "outerRadius", "update": "targetValue ? radiusRef * 0.9 : radiusRef * 0.95" }, { "name": "radiusRef", "update": "min(width/2, height/2)" }, { "name": "innerRadius", "update": "outerRadius - outerRadius * 0.25" }, { "name": "ticksNumber", "value":6 }, { "name": "ticksColor", "value":"#000000" }, { "name": "showTicks", "value":true }, { "name": "mainValue", "value":60 }, { "name": "unit", "value":" L" }, { "name": "hasTarget", "update":"isNumber(targetValue) === true" }, { "name": "targetRule", "update": "(showTarget && hasTarget && (minValue <= targetValue) && (targetValue <= maxValue)) ? 1 : 0" }, { "name": "usedValue", "update": "min(max(minValue, mainValue), maxValue)" }, { "name": "minValue", "value":0 }, { "name": "maxValue", "value":100 }, { "name": "targetValue", "value":50 }, { "name": "showTarget", "value":true }, { "name": "fontFactor", "update": "(radiusRef/5)/25" }, { "name": "backgroundColor", "value":"#cbd1d6" }, { "name": "fillColor", "value":"#77A7FB" }, { "name": "targetStatus", "update": "mainValue === targetValue ? 0 : mainValue > targetValue ? lowIsGood ? -1 : 1 : lowIsGood ? 1 : -1" }, { "name": "showNeedle", "value": true }, { "name": "needleColor", "value":"#555" }, { "name": "lowIsGood", "value":false }, { "name": "needleSize", "update":"innerRadius" }, { "name": "alertStatus", "update": "((mainValue < minValue) || (maxValue < mainValue)) ? 1 : 0 " }, { "name": "alertColor", "value": "#FF0000" } ], "data": [ { "name": "ticks", "transform": [ { "type": "sequence", "as": "data", "start":{ "signal":"0" }, "stop":{ "signal":"(maxValue - minValue) + 0.1" }, "step": { "signal":"(maxValue - minValue)/(ticksNumber-1)" } }, { "type":"formula", "expr":"datum.data + minValue", "as": "data_2" }, { "type": "formula", "as":"radianRef", "expr":"PI * (datum.data/(maxValue - minValue))" }, { "type": "formula", "as":"x", "expr": "centerX - ((outerRadius - (outerRadius - innerRadius) * 0.6) * cos(datum.radianRef))" }, { "type": "formula", "as":"y", "expr": "centerY - ((outerRadius - (outerRadius - innerRadius) * 0.7) * sin(datum.radianRef))" } ] } ], "scales": [ { "name": "gaugeScale", "type": "linear", "domain":{"data":"ticks", "field":"data_2"}, "zero":false, "range":{"signal":"[-PI/2, PI/2]"} }, { "name": "tickScale", "type": "linear", "domain":{"data": "ticks", "field":"data"}, "range":{"signal":"[PI/2, -PI/2]"} }, { "name": "targetStatusColorScale", "domain":[-1, 0, 1], "range":["red", "orange", "green"] }, { "name": "needleScale", "type": "linear", "domain":{"data": "ticks", "field":"data_2"}, "range":[-90, 90] }, { "name": "targetScale", "type": "linear", "domain":{"data":"ticks", "field":"data_2"}, "range":[0, 180] } ], "marks": [ { "type": "arc", "name": "gauge", "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "startAngle":{"signal": "-PI/2"}, "endAngle":{"signal":"PI/2"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"innerRadius"}, "fill":{"signal":"backgroundColor"} } } }, { "type": "arc", "encode": { "enter":{ "startAngle":{"signal":"-PI/2"} }, "update":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "innerRadius":{"signal":"innerRadius"}, "outerRadius":{"signal":"outerRadius"}, "endAngle":{"scale":"gaugeScale", "signal":"usedValue"}, "fill":{"signal":"fillColor"} } } }, { "type": "arc", "description":"ticks on the arc", "from": {"data":"ticks"}, "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"outerRadius - (radiusRef*0.05)"}, "startAngle":{ "scale": "tickScale", "field": "data"}, "endAngle":{ "scale": "tickScale", "field": "data"}, "stroke":{"signal":"ticksColor"}, "opacity":{"signal":"showTicks ? 1 : 0"} } } }, { "type": "text", "from": {"data":"ticks"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"alphabetic"} }, "update":{ "text":{"signal":"format(datum.data_2, '.0f')"}, "x":{"field":"x"}, "y":{"field":"y"}, "fontSize":{"signal":"fontFactor* 11"}, "fill":{"signal":"ticksColor"}, "opacity":{"signal":"showTicks ? 1 : 0"} } } }, { "type": "text", "description":"displayed min value at the bottom left of gauge when showTicks is false", "from": {"data":"gauge"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"minValue"}, "x":{"signal":"centerX - outerRadius + (outerRadius - innerRadius)/2"}, "y":{"signal":"centerY", "offset":{"signal":"fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 11"}, "opacity":{"signal":"showTicks ? 0 : 1"} } } }, { "type": "text", "description":"displayed max value at the bottom right of gauge when showTicks is false", "from": {"data":"gauge"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"maxValue"}, "x":{"signal":"centerX + innerRadius + (outerRadius - innerRadius)/2"}, "y":{"signal":"centerY", "offset":{"signal":"fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 11"}, "opacity":{"signal":"showTicks ? 0 : 1"} } } }, { "type": "text", "description":"displayed main value at the bottom center of the gauge ", "name": "gaugeValue", "encode": { "enter":{ "x":{"signal": "centerX"}, "baseline":{"value":"top"}, "align":{"value":"center"} }, "update":{ "text":{"signal":"format(mainValue, '.2f') + unit "}, "y":{"signal":"centerY", "offset": {"signal": "fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 14"} } } }, { "type": "text", "name": "targetDiff", "description":"add status with symbol and difference and percentage", "from": {"data": "gaugeValue"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"format((mainValue - targetValue), '.2f') + ' (' + format(mainValue/targetValue, '.0%') + ')'"}, "fill":{"signal":"targetStatus", "scale":"targetStatusColorScale"}, "x":{"signal": "centerX + (fontFactor * 12)"}, "y":{"signal": "centerY + (fontFactor * 20)"}, "fontSize":{"signal":"fontFactor * 14"}, "opacity":{"signal":" targetRule ? 1 : 0"} } } }, { "type": "symbol", "from": {"data":"targetDiff"}, "encode": { "update":{ "shape":{"signal":"targetStatus === 0 ? 'circle' : targetStatus === 1 ? 'triangle-up' : 'triangle-down'"}, "x":{"signal":"centerX - (fontFactor * 40)"}, "y":{"signal":"centerY + (fontFactor * 26)"}, "size":{"signal": "pow(fontFactor * 11, 2)"}, "fill":{"signal":"targetStatus", "scale":"targetStatusColorScale"}, "opacity":{"signal":"targetRule ? 1 : 0"} } } }, { "type": "symbol", "name": "needle", "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"} }, "update":{ "shape":{"signal": "'M-2.5 -2.5 Q 0 0 2.5 -2.5 L 0 -' + toString(needleSize) + ' Z '"}, "angle":{"signal":"usedValue", "scale":"needleScale"}, "size":{"signal":"4"}, "opacity":{"signal": "showNeedle ? 1 : 0"}, "stroke":{"signal":"needleColor"}, "fill":{"signal": "alertStatus ? alertColor : needleColor"} } } }, { "type": "symbol", "from": {"data":"gauge"}, "encode": { "enter":{ "shape":{"value":"triangle-right"}, "fill":{"signal":"needleColor"} }, "update":{ "angle":{"scale":"targetScale", "signal": "targetValue"}, "x":{"signal":"centerX - ((outerRadius + (outerRadius - innerRadius) * 0.15) * cos(((targetValue - minValue)/(maxValue - minValue)) * PI))"}, "y":{"signal":"centerY - ((outerRadius + (outerRadius - innerRadius) * 0.15) * sin(((targetValue - minValue)/(maxValue - minValue)) * PI))"}, "size":{"signal":"pow(fontFactor * 10, 2)"}, "opacity":{"signal":"targetRule ? 1 : 0"} } } }, { "type": "text", "name": "title", "encode": { "enter":{ "fill":{"value":"#000000"}, "align":{"value":"center"}, "baseline":{"value":"middle"} }, "update":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY - (outerRadius * 1.2)"}, "text":{"signal":"title"}, "fontSize":{"signal":"fontFactor * 15"}, "opacity":{"signal":"showTitle ? 1 : 0"} } } } ] } )4c:T884,step1 = md`--- ## Responsive in Vega Widgets are not automatically responsive so I set it up to work in Vega’s specification. The gauge is made of two circles with different radius lengths. I call the long one the "outerRadius" and the short one the "innerRadius". In addition, the radius used as the reference from which to determine the two is called the "radiusRef". For this radiusRef, there are three patterns below of the horizontal to vertical ratio of the container. - width < height - width = height - width > height If the radiusRef is set to half the width, in the case of the third pattern, the radius will be longer than the height and a part of the semicircle will protrude from the container. Even if half the height is specified for radiusRef, in the case of the first pattern, part of the semicircle is not displayed in the container for the same reason. To solve this problem, I use the min method and set the radius ref to the smaller of half the width or half the height. Now that the base radiusRef has been set, the next step is to set the outerRadius. Outer radius has 95% display of radiusRef. 5% made margin for container. See the completed drawing to see why the target value appears in the outer radius setting. The triangle symbol is marked on the outside of the gauge as a target value mark. If this mark is right or left beside the gauge, it will be a little cramped with 5% margin. Therefore, when displaying the target value, I decided to increase the margin by 5% to 10%. Inner radius subtracted a quarter length of outer radius from outer radius. I would like to display the scale and the value of the scale on the gauge so I set this length. The center of the circle is responsive at half the width and height, but the center of the gauge is at the height of the radius of the circle whose diameter is outer radius. Therefore, the center of the x-axis, called centerX, is half the width, and the center of the y-axis, centerY, is the position where the bottom of the gauge is lowered by half the outerRadius from half the height. As a result, gauges appear responsive in any sized container. It requires the following signals: `4d:T9ee,embed( { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height": 600, "data": [ { "name": "labels", "values": ["A", "B", "C", "D"], "transform": [ { "type": "formula", "as": "distanceOfPoint", "expr": "datum.data == LabelToMove ? -30 : 10" } ] } ], "signals": [ {"name": "centerX", "update": "width/2"}, {"name": "radiusRef", "update": "min(width/2, height/2)"}, { "name": "centerY", "description": "moitié de l'hauteur plus ajouté la motié de outerRadius", "update": "height/2 + outerRadius/2" }, {"name": "minValue", "value": 0}, {"name": "maxValue", "value": 100}, { "name": "innerRadius", "description": "outerRadius moins 1/4 de radiusRef", "update": "outerRadius - radiusRef * 0.25" }, {"name": "outerRadius", "update": "radiusRef * 0.95"}, {"name": "LabelToMove", "value": "D"} ], "scales": [ { "name": "labelScaleX", "type": "ordinal", "range": [15, 300, 585, 300], "domain": {"data": "labels", "field": "data"} }, { "name": "labelScaleY", "type": "ordinal", "range": [442.5, 442.5, 442.5, 157.5], "domain": {"data": "labels", "field": "data"} } ], "marks": [ { "type": "arc", "description": "arc de base en gris", "encode": { "enter": { "x": {"signal": "centerX"}, "y": {"signal": "centerY"}, "startAngle": {"value": -1.5707}, "endAngle": {"value": 1.5707}, "innerRadius": {"signal": "innerRadius"}, "outerRadius": {"signal": "outerRadius"}, "fill": {"value": "#dde4eb"} } } }, { "type": "symbol", "from": {"data": "labels"}, "encode": { "enter": { "x": {"field": "data", "scale": "labelScaleX"}, "y": {"field": "data", "scale": "labelScaleY"}, "fill": {"value": "black"} } } }, { "type": "text", "from": {"data": "labels"}, "encode": { "enter": { "x": {"field": "data", "scale": "labelScaleX"}, "y": {"field": "data", "scale": "labelScaleY"}, "dy": {"signal": "datum.distanceOfPoint"}, "fontSize": {"value": 25}, "text": {"field": "data"}, "align": {"value": "center"}, "baseline": {"value": "top"}, "fill": {"value": "black"} } } } ] } )4e:T472,embed( { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height": 600, "signals": [ { "name": "centerX", "update": "width/2" }, { "name": "centerY", "update": "height/2 + outerRadius/2" }, { "name": "outerRadius", "update": "targetValue ? radiusRef * 0.9 : radiusRef * 0.95" }, { "name": "radiusRef", "update": "min(width/2, height/2)" }, { "name": "innerRadius", "update": "outerRadius - outerRadius * 0.25" }, { "name": "targetValue", "value":50 }, { "name": "backgroundColor", "value":"#cbd1d6" } ], "data": [], "scales": [], "marks": [ { "type": "arc", "name": "gauge", "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "startAngle":{"signal": "-PI/2"}, "endAngle":{"signal":"PI/2"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"innerRadius"}, "fill":{"signal":"backgroundColor"} } } } ] } )4f:T48c,md` In this step, there are some parts added later, but first let's look at the base part. - "mainValue" is the current value. - "minValue" is the minimum value of the gauge. - "maxValue" is the maximum value of the gauge. - "fillColor" is the color that fills the gauge up to mainValue. Next, I'll explain what I added later. - "ticksNumber" is the number of tick marks on the gauge. I thought it would be easy to use if I could specify the number of scale lines as needed, so I added it. - "usedValue" was added because I wanted to avoid the needle pointing out of gauge when the main value was out of gauge. When the main value is smaller than the minimum value, the needle indicates the minimum value, and when the main value is larger than the maximum value, the needle indicates the maximum value. At first, I wrote the following using the ternary operator. mainValue < minValue? minValue : mainValue > maxValue ? maxValue : mainValue However, I knew that the same thing could be easily demonstrated using the min and max methods in Vega's math functions. So I rewrote it as follows: min (max (minValue, mainValue), maxValue) ### Data `50:T8f7,md` First, I named the data "ticks". And I made a table of the scale line values. If you use the sequence type of ransform, you can set the start value, end value, and determine the interval between the values in step, and it will automatically calculate and create a table of values. Start at 0 and go to the (maximum value - minimum value) + 0.1. The reason for adding 0.1 is that the final value itself is not included in the value. The scale line interval was calculated by dividing the difference between the maximum and minimum values by one less than the number of scale lines. Next, I set the following four formula types: "data_2": If the minimum value does not start with 0, there will be a gap between the ticks data and the value displayed on the scale. I filled that gap by adding a minimum to the data. To find the point on the arc, I calculated using trigonometric functions. "radianRef": Each ticks data was divided by the difference between the maximum and minimum values (this gives the percentage of the total value) and multiplied by π. This could have been written directly in the calculation of the points on the x and y axes in formula, but I chose this way because I wanted to simplify the calculation itself. I calculate the (x, y) coordinates of a point on an arc. However, here I want to display the value slightly below the ticks line, so I will make fine adjustments in the calculation. "x": The value of x can be calculated by r times cosθ, but I do not want to display it at the same position as ticks, so I subtracted 60% of the difference between outerRadiusw and innerRadius from outerRadius. Then, centerX - (calculation formula) is used because the x-axis at the center of the circle has centerX instead of 0. Also, if centerX + (calculation formula) is used, the display of ticks will not change from minimum to maximum, but will change from maximum to minimum. "y": The value of y can be calculated by r times sinθ, but the display position was adjusted as in the case of x. Then, centerY - (calculation formula) is used because the y-axis at the center of the circle is centerY. Also, if you set centerY + (calculation formula), the value of ticks will be displayed upside down. ### Scales `51:Tc46,embed( { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height": 600, "signals": [ { "name": "centerX", "update": "width/2" }, { "name": "centerY", "update": "height/2 + outerRadius/2" }, { "name": "outerRadius", "update": "targetValue ? radiusRef * 0.9 : radiusRef * 0.95" }, { "name": "radiusRef", "update": "min(width/2, height/2)" }, { "name": "innerRadius", "update": "outerRadius - outerRadius * 0.25" }, { "name": "ticksNumber", "value":6 }, { "name": "mainValue", "value":60 }, { "name": "usedValue", "update": "min(max(minValue, mainValue), maxValue)" }, { "name": "minValue", "value":0 }, { "name": "maxValue", "value":100 }, { "name": "targetValue", "value":50 }, { "name": "backgroundColor", "value":"#cbd1d6" }, { "name": "fillColor", "value":"#77A7FB" } ], "data": [ { "name": "ticks", "transform": [ { "type": "sequence", "as": "data", "start":{ "signal":"0" }, "stop":{ "signal":"(maxValue - minValue) + 0.1" }, "step": { "signal":"(maxValue - minValue)/(ticksNumber-1)" } }, { "type":"formula", "expr":"datum.data + minValue", "as": "data_2" }, { "type": "formula", "as":"radianRef", "expr":"PI * (datum.data/(maxValue - minValue))" }, { "type": "formula", "as":"x", "expr": "centerX - ((outerRadius - (outerRadius - innerRadius) * 0.6) * cos(datum.radianRef))" }, { "type": "formula", "as":"y", "expr": "centerY - ((outerRadius - (outerRadius - innerRadius) * 0.7) * sin(datum.radianRef))" } ] } ], "scales": [ { "name": "gaugeScale", "type": "linear", "domain":{"data":"ticks", "field":"data_2"}, "zero":false, "range":{"signal":"[-PI/2, PI/2]"} } ], "marks": [ { "type": "arc", "name": "gauge", "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "startAngle":{"signal": "-PI/2"}, "endAngle":{"signal":"PI/2"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"innerRadius"}, "fill":{"signal":"backgroundColor"} } } }, { "type": "arc", "encode": { "enter":{ "startAngle":{"signal":"-PI/2"} }, "update":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "innerRadius":{"signal":"innerRadius"}, "outerRadius":{"signal":"outerRadius"}, "endAngle":{"scale":"gaugeScale", "signal":"usedValue"}, "fill":{"signal":"fillColor"} } } } ] } )52:Tfb1,embed( { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height": 600, "signals": [ { "name": "centerX", "update": "width/2" }, { "name": "centerY", "update": "height/2 + outerRadius/2" }, { "name": "outerRadius", "update": "targetValue ? radiusRef * 0.9 : radiusRef * 0.95" }, { "name": "radiusRef", "update": "min(width/2, height/2)" }, { "name": "innerRadius", "update": "outerRadius - outerRadius * 0.25" }, { "name": "ticksNumber", "value":6 }, { "name": "ticksColor", "value":"#000000" }, { "name": "showTicks", "value":true }, { "name": "mainValue", "value":60 }, { "name": "usedValue", "update": "min(max(minValue, mainValue), maxValue)" }, { "name": "minValue", "value":0 }, { "name": "maxValue", "value":100 }, { "name": "targetValue", "value":50 }, { "name": "backgroundColor", "value":"#cbd1d6" }, { "name": "fillColor", "value":"#77A7FB" } ], "data": [ { "name": "ticks", "transform": [ { "type": "sequence", "as": "data", "start":{ "signal":"0" }, "stop":{ "signal":"(maxValue - minValue) + 0.1" }, "step": { "signal":"(maxValue - minValue)/(ticksNumber-1)" } }, { "type":"formula", "expr":"datum.data + minValue", "as": "data_2" }, { "type": "formula", "as":"radianRef", "expr":"PI * (datum.data/(maxValue - minValue))" }, { "type": "formula", "as":"x", "expr": "centerX - ((outerRadius - (outerRadius - innerRadius) * 0.6) * cos(datum.radianRef))" }, { "type": "formula", "as":"y", "expr": "centerY - ((outerRadius - (outerRadius - innerRadius) * 0.7) * sin(datum.radianRef))" } ] } ], "scales": [ { "name": "gaugeScale", "type": "linear", "domain":{"data":"ticks", "field":"data_2"}, "zero":false, "range":{"signal":"[-PI/2, PI/2]"} }, { "name": "tickScale", "type": "linear", "domain":{"data": "ticks", "field":"data"}, "range":{"signal":"[PI/2, -PI/2]"} } ], "marks": [ { "type": "arc", "name": "gauge", "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "startAngle":{"signal": "-PI/2"}, "endAngle":{"signal":"PI/2"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"innerRadius"}, "fill":{"signal":"backgroundColor"} } } }, { "type": "arc", "encode": { "enter":{ "startAngle":{"signal":"-PI/2"} }, "update":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "innerRadius":{"signal":"innerRadius"}, "outerRadius":{"signal":"outerRadius"}, "endAngle":{"scale":"gaugeScale", "signal":"usedValue"}, "fill":{"signal":"fillColor"} } } }, { "type": "arc", "description":"ticks on the arc", "from": {"data":"ticks"}, "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"outerRadius - (radiusRef*0.05)"}, "startAngle":{ "scale": "tickScale", "field": "data"}, "endAngle":{ "scale": "tickScale", "field": "data"}, "stroke":{"signal":"ticksColor"}, "opacity":{"signal":"showTicks ? 1 : 0"} } } } ] } )53:T984,embed( { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 200, "height": 200, "padding": 5, "signals": [ { "name": "x", "value": 100, "bind": {"input": "range", "min": 0, "max": 200, "step": 1} }, { "name": "y", "value": 100, "bind": {"input": "range", "min": 0, "max": 200, "step": 1} }, { "name": "dx", "value": 0, "bind": {"input": "range", "min": -20, "max": 20, "step": 1} }, { "name": "angle", "value": 0, "bind": {"input": "range", "min": -180, "max": 180, "step": 1} }, { "name": "fontSize", "value": 18, "bind": {"input": "range", "min": 1, "max": 36, "step": 1} }, { "name": "limit", "value": 0, "bind": {"input": "range", "min": 0, "max": 150, "step": 1} }, { "name": "align", "value": "left", "bind": {"input": "select", "options": ["left", "center", "right"]} }, { "name": "baseline", "value": "alphabetic", "bind": {"input": "select", "options": ["alphabetic", "top", "middle", "bottom"]} }, { "name": "font", "value": "sans-serif", "bind": {"input": "select", "options": ["sans-serif", "serif", "monospace"]} }, { "name": "fontWeight", "value": "normal", "bind": {"input": "select", "options": ["normal", "bold"]} }, { "name": "fontStyle", "value": "normal", "bind": {"input": "select", "options": ["normal", "italic"]} } ], "marks": [ { "type": "symbol", "interactive": false, "encode": { "enter": { "fill": {"value": "firebrick"}, "size": {"value": 25} }, "update": { "x": {"signal": "x"}, "y": {"signal": "y"} } } }, { "type": "text", "encode": { "enter": { "fill": {"value": "#000"}, "text": {"value": "Text Label"} }, "update": { "opacity": {"value": 1}, "x": {"signal": "x"}, "y": {"signal": "y"}, "dx": {"signal": "dx"}, "angle": {"signal": "angle"}, "align": {"signal": "align"}, "baseline": {"signal": "baseline"}, "font": {"signal": "font"}, "fontSize": {"signal": "fontSize"}, "fontStyle": {"signal": "fontStyle"}, "fontWeight": {"signal": "fontWeight"}, "limit": {"signal": "limit"} }, "hover": { "opacity": {"value": 0.5} } } } ] } )54:T11eb,embed( { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height": 600, "signals": [ { "name": "centerX", "update": "width/2" }, { "name": "centerY", "update": "height/2 + outerRadius/2" }, { "name": "outerRadius", "update": "targetValue ? radiusRef * 0.9 : radiusRef * 0.95" }, { "name": "radiusRef", "update": "min(width/2, height/2)" }, { "name": "innerRadius", "update": "outerRadius - outerRadius * 0.25" }, { "name": "ticksNumber", "value":6 }, { "name": "ticksColor", "value":"#000000" }, { "name": "showTicks", "value":true }, { "name": "mainValue", "value":60 }, { "name": "usedValue", "update": "min(max(minValue, mainValue), maxValue)" }, { "name": "minValue", "value":0 }, { "name": "maxValue", "value":100 }, { "name": "targetValue", "value":50 }, { "name": "fontFactor", "update": "(radiusRef/5)/25" }, { "name": "backgroundColor", "value":"#cbd1d6" }, { "name": "fillColor", "value":"#77A7FB" } ], "data": [ { "name": "ticks", "transform": [ { "type": "sequence", "as": "data", "start":{ "signal":"0" }, "stop":{ "signal":"(maxValue - minValue) + 0.1" }, "step": { "signal":"(maxValue - minValue)/(ticksNumber-1)" } }, { "type":"formula", "expr":"datum.data + minValue", "as": "data_2" }, { "type": "formula", "as":"radianRef", "expr":"PI * (datum.data/(maxValue - minValue))" }, { "type": "formula", "as":"x", "expr": "centerX - ((outerRadius - (outerRadius - innerRadius) * 0.6) * cos(datum.radianRef))" }, { "type": "formula", "as":"y", "expr": "centerY - ((outerRadius - (outerRadius - innerRadius) * 0.7) * sin(datum.radianRef))" } ] } ], "scales": [ { "name": "gaugeScale", "type": "linear", "domain":{"data":"ticks", "field":"data_2"}, "zero":false, "range":{"signal":"[-PI/2, PI/2]"} }, { "name": "tickScale", "type": "linear", "domain":{"data": "ticks", "field":"data"}, "range":{"signal":"[PI/2, -PI/2]"} } ], "marks": [ { "type": "arc", "name": "gauge", "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "startAngle":{"signal": "-PI/2"}, "endAngle":{"signal":"PI/2"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"innerRadius"}, "fill":{"signal":"backgroundColor"} } } }, { "type": "arc", "encode": { "enter":{ "startAngle":{"signal":"-PI/2"} }, "update":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "innerRadius":{"signal":"innerRadius"}, "outerRadius":{"signal":"outerRadius"}, "endAngle":{"scale":"gaugeScale", "signal":"usedValue"}, "fill":{"signal":"fillColor"} } } }, { "type": "arc", "description":"ticks on the arc", "from": {"data":"ticks"}, "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"outerRadius - (radiusRef*0.05)"}, "startAngle":{ "scale": "tickScale", "field": "data"}, "endAngle":{ "scale": "tickScale", "field": "data"}, "stroke":{"signal":"ticksColor"}, "opacity":{"signal":"showTicks ? 1 : 0"} } } }, { "type": "text", "from": {"data":"ticks"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"alphabetic"} }, "update":{ "text":{"signal":"format(datum.data_2, '.0f')"}, "x":{"field":"x"}, "y":{"field":"y"}, "fontSize":{"signal":"fontFactor* 11"}, "fill":{"signal":"ticksColor"}, "opacity":{"signal":"showTicks ? 1 : 0"} } } } ] } )55:T1455,embed( { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height": 600, "signals": [ { "name": "centerX", "update": "width/2" }, { "name": "centerY", "update": "height/2 + outerRadius/2" }, { "name": "outerRadius", "update": "targetValue ? radiusRef * 0.9 : radiusRef * 0.95" }, { "name": "radiusRef", "update": "min(width/2, height/2)" }, { "name": "innerRadius", "update": "outerRadius - outerRadius * 0.25" }, { "name": "ticksNumber", "value":6 }, { "name": "ticksColor", "value":"#000000" }, { "name": "showTicks", "value":false }, { "name": "mainValue", "value":60 }, { "name": "usedValue", "update": "min(max(minValue, mainValue), maxValue)" }, { "name": "minValue", "value":0 }, { "name": "maxValue", "value":100 }, { "name": "targetValue", "value":50 }, { "name": "fontFactor", "update": "(radiusRef/5)/25" }, { "name": "backgroundColor", "value":"#cbd1d6" }, { "name": "fillColor", "value":"#77A7FB" } ], "data": [ { "name": "ticks", "transform": [ { "type": "sequence", "as": "data", "start":{ "signal":"0" }, "stop":{ "signal":"(maxValue - minValue) + 0.1" }, "step": { "signal":"(maxValue - minValue)/(ticksNumber-1)" } }, { "type":"formula", "expr":"datum.data + minValue", "as": "data_2" }, { "type": "formula", "as":"radianRef", "expr":"PI * (datum.data/(maxValue - minValue))" }, { "type": "formula", "as":"x", "expr": "centerX - ((outerRadius - (outerRadius - innerRadius) * 0.6) * cos(datum.radianRef))" }, { "type": "formula", "as":"y", "expr": "centerY - ((outerRadius - (outerRadius - innerRadius) * 0.7) * sin(datum.radianRef))" } ] } ], "scales": [ { "name": "gaugeScale", "type": "linear", "domain":{"data":"ticks", "field":"data_2"}, "zero":false, "range":{"signal":"[-PI/2, PI/2]"} }, { "name": "tickScale", "type": "linear", "domain":{"data": "ticks", "field":"data"}, "range":{"signal":"[PI/2, -PI/2]"} } ], "marks": [ { "type": "arc", "name": "gauge", "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "startAngle":{"signal": "-PI/2"}, "endAngle":{"signal":"PI/2"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"innerRadius"}, "fill":{"signal":"backgroundColor"} } } }, { "type": "arc", "encode": { "enter":{ "startAngle":{"signal":"-PI/2"} }, "update":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "innerRadius":{"signal":"innerRadius"}, "outerRadius":{"signal":"outerRadius"}, "endAngle":{"scale":"gaugeScale", "signal":"usedValue"}, "fill":{"signal":"fillColor"} } } }, { "type": "arc", "description":"ticks on the arc", "from": {"data":"ticks"}, "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"outerRadius - (radiusRef*0.05)"}, "startAngle":{ "scale": "tickScale", "field": "data"}, "endAngle":{ "scale": "tickScale", "field": "data"}, "stroke":{"signal":"ticksColor"}, "opacity":{"signal":"showTicks ? 1 : 0"} } } }, { "type": "text", "from": {"data":"ticks"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"alphabetic"} }, "update":{ "text":{"signal":"format(datum.data_2, '.0f')"}, "x":{"field":"x"}, "y":{"field":"y"}, "fontSize":{"signal":"fontFactor* 11"}, "fill":{"signal":"ticksColor"}, "opacity":{"signal":"showTicks ? 1 : 0"} } } }, { "type": "text", "description":"displayed min value at the bottom left of gauge when showTicks is false", "from": {"data":"gauge"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"minValue"}, "x":{"signal":"centerX - outerRadius + (outerRadius - innerRadius)/2"}, "y":{"signal":"centerY", "offset":{"signal":"fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 11"}, "opacity":{"signal":"showTicks ? 0 : 1"} } } } ] } )56:T16bf,embed( { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height": 600, "signals": [ { "name": "centerX", "update": "width/2" }, { "name": "centerY", "update": "height/2 + outerRadius/2" }, { "name": "outerRadius", "update": "targetValue ? radiusRef * 0.9 : radiusRef * 0.95" }, { "name": "radiusRef", "update": "min(width/2, height/2)" }, { "name": "innerRadius", "update": "outerRadius - outerRadius * 0.25" }, { "name": "ticksNumber", "value":6 }, { "name": "ticksColor", "value":"#000000" }, { "name": "showTicks", "value":false }, { "name": "mainValue", "value":60 }, { "name": "usedValue", "update": "min(max(minValue, mainValue), maxValue)" }, { "name": "minValue", "value":0 }, { "name": "maxValue", "value":100 }, { "name": "targetValue", "value":50 }, { "name": "fontFactor", "update": "(radiusRef/5)/25" }, { "name": "backgroundColor", "value":"#cbd1d6" }, { "name": "fillColor", "value":"#77A7FB" } ], "data": [ { "name": "ticks", "transform": [ { "type": "sequence", "as": "data", "start":{ "signal":"0" }, "stop":{ "signal":"(maxValue - minValue) + 0.1" }, "step": { "signal":"(maxValue - minValue)/(ticksNumber-1)" } }, { "type":"formula", "expr":"datum.data + minValue", "as": "data_2" }, { "type": "formula", "as":"radianRef", "expr":"PI * (datum.data/(maxValue - minValue))" }, { "type": "formula", "as":"x", "expr": "centerX - ((outerRadius - (outerRadius - innerRadius) * 0.6) * cos(datum.radianRef))" }, { "type": "formula", "as":"y", "expr": "centerY - ((outerRadius - (outerRadius - innerRadius) * 0.7) * sin(datum.radianRef))" } ] } ], "scales": [ { "name": "gaugeScale", "type": "linear", "domain":{"data":"ticks", "field":"data_2"}, "zero":false, "range":{"signal":"[-PI/2, PI/2]"} }, { "name": "tickScale", "type": "linear", "domain":{"data": "ticks", "field":"data"}, "range":{"signal":"[PI/2, -PI/2]"} } ], "marks": [ { "type": "arc", "name": "gauge", "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "startAngle":{"signal": "-PI/2"}, "endAngle":{"signal":"PI/2"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"innerRadius"}, "fill":{"signal":"backgroundColor"} } } }, { "type": "arc", "encode": { "enter":{ "startAngle":{"signal":"-PI/2"} }, "update":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "innerRadius":{"signal":"innerRadius"}, "outerRadius":{"signal":"outerRadius"}, "endAngle":{"scale":"gaugeScale", "signal":"usedValue"}, "fill":{"signal":"fillColor"} } } }, { "type": "arc", "description":"ticks on the arc", "from": {"data":"ticks"}, "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"outerRadius - (radiusRef*0.05)"}, "startAngle":{ "scale": "tickScale", "field": "data"}, "endAngle":{ "scale": "tickScale", "field": "data"}, "stroke":{"signal":"ticksColor"}, "opacity":{"signal":"showTicks ? 1 : 0"} } } }, { "type": "text", "from": {"data":"ticks"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"alphabetic"} }, "update":{ "text":{"signal":"format(datum.data_2, '.0f')"}, "x":{"field":"x"}, "y":{"field":"y"}, "fontSize":{"signal":"fontFactor* 11"}, "fill":{"signal":"ticksColor"}, "opacity":{"signal":"showTicks ? 1 : 0"} } } }, { "type": "text", "description":"displayed min value at the bottom left of gauge when showTicks is false", "from": {"data":"gauge"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"minValue"}, "x":{"signal":"centerX - outerRadius + (outerRadius - innerRadius)/2"}, "y":{"signal":"centerY", "offset":{"signal":"fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 11"}, "opacity":{"signal":"showTicks ? 0 : 1"} } } }, { "type": "text", "description":"displayed max value at the bottom right of gauge when showTicks is false", "from": {"data":"gauge"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"maxValue"}, "x":{"signal":"centerX + innerRadius + (outerRadius - innerRadius)/2"}, "y":{"signal":"centerY", "offset":{"signal":"fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 11"}, "opacity":{"signal":"showTicks ? 0 : 1"} } } } ] } )57:T190a,embed( { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height": 600, "signals": [ { "name": "centerX", "update": "width/2" }, { "name": "centerY", "update": "height/2 + outerRadius/2" }, { "name": "outerRadius", "update": "targetValue ? radiusRef * 0.9 : radiusRef * 0.95" }, { "name": "radiusRef", "update": "min(width/2, height/2)" }, { "name": "innerRadius", "update": "outerRadius - outerRadius * 0.25" }, { "name": "ticksNumber", "value":6 }, { "name": "ticksColor", "value":"#000000" }, { "name": "showTicks", "value":true }, { "name": "mainValue", "value":60 }, { "name": "unit", "value":" L" }, { "name": "usedValue", "update": "min(max(minValue, mainValue), maxValue)" }, { "name": "minValue", "value":0 }, { "name": "maxValue", "value":100 }, { "name": "targetValue", "value":50 }, { "name": "fontFactor", "update": "(radiusRef/5)/25" }, { "name": "backgroundColor", "value":"#cbd1d6" }, { "name": "fillColor", "value":"#77A7FB" } ], "data": [ { "name": "ticks", "transform": [ { "type": "sequence", "as": "data", "start":{ "signal":"0" }, "stop":{ "signal":"(maxValue - minValue) + 0.1" }, "step": { "signal":"(maxValue - minValue)/(ticksNumber-1)" } }, { "type":"formula", "expr":"datum.data + minValue", "as": "data_2" }, { "type": "formula", "as":"radianRef", "expr":"PI * (datum.data/(maxValue - minValue))" }, { "type": "formula", "as":"x", "expr": "centerX - ((outerRadius - (outerRadius - innerRadius) * 0.6) * cos(datum.radianRef))" }, { "type": "formula", "as":"y", "expr": "centerY - ((outerRadius - (outerRadius - innerRadius) * 0.7) * sin(datum.radianRef))" } ] } ], "scales": [ { "name": "gaugeScale", "type": "linear", "domain":{"data":"ticks", "field":"data_2"}, "zero":false, "range":{"signal":"[-PI/2, PI/2]"} }, { "name": "tickScale", "type": "linear", "domain":{"data": "ticks", "field":"data"}, "range":{"signal":"[PI/2, -PI/2]"} } ], "marks": [ { "type": "arc", "name": "gauge", "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "startAngle":{"signal": "-PI/2"}, "endAngle":{"signal":"PI/2"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"innerRadius"}, "fill":{"signal":"backgroundColor"} } } }, { "type": "arc", "encode": { "enter":{ "startAngle":{"signal":"-PI/2"} }, "update":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "innerRadius":{"signal":"innerRadius"}, "outerRadius":{"signal":"outerRadius"}, "endAngle":{"scale":"gaugeScale", "signal":"usedValue"}, "fill":{"signal":"fillColor"} } } }, { "type": "arc", "description":"ticks on the arc", "from": {"data":"ticks"}, "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"outerRadius - (radiusRef*0.05)"}, "startAngle":{ "scale": "tickScale", "field": "data"}, "endAngle":{ "scale": "tickScale", "field": "data"}, "stroke":{"signal":"ticksColor"}, "opacity":{"signal":"showTicks ? 1 : 0"} } } }, { "type": "text", "from": {"data":"ticks"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"alphabetic"} }, "update":{ "text":{"signal":"format(datum.data_2, '.0f')"}, "x":{"field":"x"}, "y":{"field":"y"}, "fontSize":{"signal":"fontFactor* 11"}, "fill":{"signal":"ticksColor"}, "opacity":{"signal":"showTicks ? 1 : 0"} } } }, { "type": "text", "description":"displayed min value at the bottom left of gauge when showTicks is false", "from": {"data":"gauge"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"minValue"}, "x":{"signal":"centerX - outerRadius + (outerRadius - innerRadius)/2"}, "y":{"signal":"centerY", "offset":{"signal":"fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 11"}, "opacity":{"signal":"showTicks ? 0 : 1"} } } }, { "type": "text", "description":"displayed max value at the bottom right of gauge when showTicks is false", "from": {"data":"gauge"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"maxValue"}, "x":{"signal":"centerX + innerRadius + (outerRadius - innerRadius)/2"}, "y":{"signal":"centerY", "offset":{"signal":"fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 11"}, "opacity":{"signal":"showTicks ? 0 : 1"} } } }, { "type": "text", "description":"displayed main value at the bottom center of the gauge ", "name": "gaugeValue", "encode": { "enter":{ "x":{"signal": "centerX"}, "baseline":{"value":"top"}, "align":{"value":"center"} }, "update":{ "text":{"signal":"format(mainValue, '.2f') + unit "}, "y":{"signal":"centerY", "offset": {"signal": "fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 14"} } } } ] } )58:T1e7e,embed( { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height": 600, "signals": [ { "name": "centerX", "update": "width/2" }, { "name": "centerY", "update": "height/2 + outerRadius/2" }, { "name": "outerRadius", "update": "targetValue ? radiusRef * 0.9 : radiusRef * 0.95" }, { "name": "radiusRef", "update": "min(width/2, height/2)" }, { "name": "innerRadius", "update": "outerRadius - outerRadius * 0.25" }, { "name": "ticksNumber", "value":6 }, { "name": "ticksColor", "value":"#000000" }, { "name": "showTicks", "value":true }, { "name": "mainValue", "value":60 }, { "name": "unit", "value":" L" }, { "name": "hasTarget", "update":"isNumber(targetValue) === true" }, { "name": "targetRule", "update": "(showTarget && hasTarget && (minValue <= targetValue) && (targetValue <= maxValue)) ? 1 : 0" }, { "name": "usedValue", "update": "min(max(minValue, mainValue), maxValue)" }, { "name": "minValue", "value":0 }, { "name": "maxValue", "value":100 }, { "name": "targetValue", "value":50 }, { "name": "showTarget", "value":true }, { "name": "fontFactor", "update": "(radiusRef/5)/25" }, { "name": "backgroundColor", "value":"#cbd1d6" }, { "name": "fillColor", "value":"#77A7FB" }, { "name": "targetStatus", "update": "mainValue === targetValue ? 0 : mainValue > targetValue ? lowIsGood ? -1 : 1 : lowIsGood ? 1 : -1" }, { "name": "lowIsGood", "value":false } ], "data": [ { "name": "ticks", "transform": [ { "type": "sequence", "as": "data", "start":{ "signal":"0" }, "stop":{ "signal":"(maxValue - minValue) + 0.1" }, "step": { "signal":"(maxValue - minValue)/(ticksNumber-1)" } }, { "type":"formula", "expr":"datum.data + minValue", "as": "data_2" }, { "type": "formula", "as":"radianRef", "expr":"PI * (datum.data/(maxValue - minValue))" }, { "type": "formula", "as":"x", "expr": "centerX - ((outerRadius - (outerRadius - innerRadius) * 0.6) * cos(datum.radianRef))" }, { "type": "formula", "as":"y", "expr": "centerY - ((outerRadius - (outerRadius - innerRadius) * 0.7) * sin(datum.radianRef))" } ] } ], "scales": [ { "name": "gaugeScale", "type": "linear", "domain":{"data":"ticks", "field":"data_2"}, "zero":false, "range":{"signal":"[-PI/2, PI/2]"} }, { "name": "tickScale", "type": "linear", "domain":{"data": "ticks", "field":"data"}, "range":{"signal":"[PI/2, -PI/2]"} }, { "name": "targetStatusColorScale", "domain":[-1, 0, 1], "range":["red", "orange", "green"] } ], "marks": [ { "type": "arc", "name": "gauge", "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "startAngle":{"signal": "-PI/2"}, "endAngle":{"signal":"PI/2"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"innerRadius"}, "fill":{"signal":"backgroundColor"} } } }, { "type": "arc", "encode": { "enter":{ "startAngle":{"signal":"-PI/2"} }, "update":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "innerRadius":{"signal":"innerRadius"}, "outerRadius":{"signal":"outerRadius"}, "endAngle":{"scale":"gaugeScale", "signal":"usedValue"}, "fill":{"signal":"fillColor"} } } }, { "type": "arc", "description":"ticks on the arc", "from": {"data":"ticks"}, "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"outerRadius - (radiusRef*0.05)"}, "startAngle":{ "scale": "tickScale", "field": "data"}, "endAngle":{ "scale": "tickScale", "field": "data"}, "stroke":{"signal":"ticksColor"}, "opacity":{"signal":"showTicks ? 1 : 0"} } } }, { "type": "text", "from": {"data":"ticks"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"alphabetic"} }, "update":{ "text":{"signal":"format(datum.data_2, '.0f')"}, "x":{"field":"x"}, "y":{"field":"y"}, "fontSize":{"signal":"fontFactor* 11"}, "fill":{"signal":"ticksColor"}, "opacity":{"signal":"showTicks ? 1 : 0"} } } }, { "type": "text", "description":"displayed min value at the bottom left of gauge when showTicks is false", "from": {"data":"gauge"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"minValue"}, "x":{"signal":"centerX - outerRadius + (outerRadius - innerRadius)/2"}, "y":{"signal":"centerY", "offset":{"signal":"fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 11"}, "opacity":{"signal":"showTicks ? 0 : 1"} } } }, { "type": "text", "description":"displayed max value at the bottom right of gauge when showTicks is false", "from": {"data":"gauge"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"maxValue"}, "x":{"signal":"centerX + innerRadius + (outerRadius - innerRadius)/2"}, "y":{"signal":"centerY", "offset":{"signal":"fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 11"}, "opacity":{"signal":"showTicks ? 0 : 1"} } } }, { "type": "text", "description":"displayed main value at the bottom center of the gauge ", "name": "gaugeValue", "encode": { "enter":{ "x":{"signal": "centerX"}, "baseline":{"value":"top"}, "align":{"value":"center"} }, "update":{ "text":{"signal":"format(mainValue, '.2f') + unit "}, "y":{"signal":"centerY", "offset": {"signal": "fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 14"} } } }, { "type": "text", "name": "targetDiff", "description":"add status with symbol and difference and percentage", "from": {"data": "gaugeValue"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"format((mainValue - targetValue), '.2f') + ' (' + format(mainValue/targetValue, '.0%') + ')'"}, "fill":{"signal":"targetStatus", "scale":"targetStatusColorScale"}, "x":{"signal": "centerX + (fontFactor * 12)"}, "y":{"signal": "centerY + (fontFactor * 20)"}, "fontSize":{"signal":"fontFactor * 14"}, "opacity":{"signal":" targetRule ? 1 : 0"} } } } ] } )59:T467,embed( { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 300, "height": 300, "signals": [], "data": [ { "name": "table", "values":["▼ -20 (60%)","● 0 (100%)","▲ 20 (140%)"] } ], "scales": [ { "name": "scaleX", "type": "ordinal", "range":[150, 150, 150], "domain":{"data":"table", "field":"data"} }, { "name": "scaleY", "type": "ordinal", "range":[100, 150, 200], "domain":{"data":"table", "field":"data"} }, { "name": "color", "type": "ordinal", "domain":{"data":"table", "field":"data"}, "range":["red", "black", "green"] } ], "marks": [ { "type": "text", "from": {"data": "table"}, "encode": { "enter":{ "x":{"field":"data", "scale":"scaleX"}, "y":{"field":"data", "scale":"scaleY"}, "align":{"value":"center"}, "baseline":{"value":"bottom"}, "text":{"field":"data"}, "fill":{"scale":"color", "field":"data"}, "fontSize":{"value":20} } } } ] } )5a:T209e,embed( { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height": 600, "signals": [ { "name": "centerX", "update": "width/2" }, { "name": "centerY", "update": "height/2 + outerRadius/2" }, { "name": "outerRadius", "update": "targetValue ? radiusRef * 0.9 : radiusRef * 0.95" }, { "name": "radiusRef", "update": "min(width/2, height/2)" }, { "name": "innerRadius", "update": "outerRadius - outerRadius * 0.25" }, { "name": "ticksNumber", "value":6 }, { "name": "ticksColor", "value":"#000000" }, { "name": "showTicks", "value":true }, { "name": "mainValue", "value":60 }, { "name": "unit", "value":" L" }, { "name": "hasTarget", "update":"isNumber(targetValue) === true" }, { "name": "targetRule", "update": "(showTarget && hasTarget && (minValue <= targetValue) && (targetValue <= maxValue)) ? 1 : 0" }, { "name": "usedValue", "update": "min(max(minValue, mainValue), maxValue)" }, { "name": "minValue", "value":0 }, { "name": "maxValue", "value":100 }, { "name": "targetValue", "value":50 }, { "name": "showTarget", "value":true }, { "name": "fontFactor", "update": "(radiusRef/5)/25" }, { "name": "backgroundColor", "value":"#cbd1d6" }, { "name": "fillColor", "value":"#77A7FB" }, { "name": "targetStatus", "update": "mainValue === targetValue ? 0 : mainValue > targetValue ? lowIsGood ? -1 : 1 : lowIsGood ? 1 : -1" }, { "name": "lowIsGood", "value":false } ], "data": [ { "name": "ticks", "transform": [ { "type": "sequence", "as": "data", "start":{ "signal":"0" }, "stop":{ "signal":"(maxValue - minValue) + 0.1" }, "step": { "signal":"(maxValue - minValue)/(ticksNumber-1)" } }, { "type":"formula", "expr":"datum.data + minValue", "as": "data_2" }, { "type": "formula", "as":"radianRef", "expr":"PI * (datum.data/(maxValue - minValue))" }, { "type": "formula", "as":"x", "expr": "centerX - ((outerRadius - (outerRadius - innerRadius) * 0.6) * cos(datum.radianRef))" }, { "type": "formula", "as":"y", "expr": "centerY - ((outerRadius - (outerRadius - innerRadius) * 0.7) * sin(datum.radianRef))" } ] } ], "scales": [ { "name": "gaugeScale", "type": "linear", "domain":{"data":"ticks", "field":"data_2"}, "zero":false, "range":{"signal":"[-PI/2, PI/2]"} }, { "name": "tickScale", "type": "linear", "domain":{"data": "ticks", "field":"data"}, "range":{"signal":"[PI/2, -PI/2]"} }, { "name": "targetStatusColorScale", "domain":[-1, 0, 1], "range":["red", "orange", "green"] } ], "marks": [ { "type": "arc", "name": "gauge", "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "startAngle":{"signal": "-PI/2"}, "endAngle":{"signal":"PI/2"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"innerRadius"}, "fill":{"signal":"backgroundColor"} } } }, { "type": "arc", "encode": { "enter":{ "startAngle":{"signal":"-PI/2"} }, "update":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "innerRadius":{"signal":"innerRadius"}, "outerRadius":{"signal":"outerRadius"}, "endAngle":{"scale":"gaugeScale", "signal":"usedValue"}, "fill":{"signal":"fillColor"} } } }, { "type": "arc", "description":"ticks on the arc", "from": {"data":"ticks"}, "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"outerRadius - (radiusRef*0.05)"}, "startAngle":{ "scale": "tickScale", "field": "data"}, "endAngle":{ "scale": "tickScale", "field": "data"}, "stroke":{"signal":"ticksColor"}, "opacity":{"signal":"showTicks ? 1 : 0"} } } }, { "type": "text", "from": {"data":"ticks"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"alphabetic"} }, "update":{ "text":{"signal":"format(datum.data_2, '.0f')"}, "x":{"field":"x"}, "y":{"field":"y"}, "fontSize":{"signal":"fontFactor* 11"}, "fill":{"signal":"ticksColor"}, "opacity":{"signal":"showTicks ? 1 : 0"} } } }, { "type": "text", "description":"displayed min value at the bottom left of gauge when showTicks is false", "from": {"data":"gauge"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"minValue"}, "x":{"signal":"centerX - outerRadius + (outerRadius - innerRadius)/2"}, "y":{"signal":"centerY", "offset":{"signal":"fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 11"}, "opacity":{"signal":"showTicks ? 0 : 1"} } } }, { "type": "text", "description":"displayed max value at the bottom right of gauge when showTicks is false", "from": {"data":"gauge"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"maxValue"}, "x":{"signal":"centerX + innerRadius + (outerRadius - innerRadius)/2"}, "y":{"signal":"centerY", "offset":{"signal":"fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 11"}, "opacity":{"signal":"showTicks ? 0 : 1"} } } }, { "type": "text", "description":"displayed main value at the bottom center of the gauge ", "name": "gaugeValue", "encode": { "enter":{ "x":{"signal": "centerX"}, "baseline":{"value":"top"}, "align":{"value":"center"} }, "update":{ "text":{"signal":"format(mainValue, '.2f') + unit "}, "y":{"signal":"centerY", "offset": {"signal": "fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 14"} } } }, { "type": "text", "name": "targetDiff", "description":"add status with symbol and difference and percentage", "from": {"data": "gaugeValue"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"format((mainValue - targetValue), '.2f') + ' (' + format(mainValue/targetValue, '.0%') + ')'"}, "fill":{"signal":"targetStatus", "scale":"targetStatusColorScale"}, "x":{"signal": "centerX + (fontFactor * 12)"}, "y":{"signal": "centerY + (fontFactor * 20)"}, "fontSize":{"signal":"fontFactor * 14"}, "opacity":{"signal":" targetRule ? 1 : 0"} } } }, { "type": "symbol", "from": {"data":"targetDiff"}, "encode": { "update":{ "shape":{"signal":"targetStatus === 0 ? 'circle' : targetStatus === 1 ? 'triangle-up' : 'triangle-down'"}, "x":{"signal":"centerX - (fontFactor * 40)"}, "y":{"signal":"centerY + (fontFactor * 26)"}, "size":{"signal": "pow(fontFactor * 11, 2)"}, "fill":{"signal":"targetStatus", "scale":"targetStatusColorScale"}, "opacity":{"signal":"targetRule ? 1 : 0"} } } } ] } )5b:T67c,embed( { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 400, "height": 400, "signals": [ { "name":"centerX", "update":"width/2" }, { "name": "centerY", "update": "height/2*2" } ], "data": [ { "name":"labels", "values":["P0", "P1", "P2"] } ], "scales": [ { "name": "labelScaleX", "type": "ordinal", "range":[180, 200, 220], "domain":{"data":"labels", "field":"data"} }, { "name": "labelScaleY", "type": "ordinal", "range":[380, 400, 380], "domain":{"data":"labels", "field":"data"} } ], "marks": [ { "type": "symbol", "zindex":1, "from": {"data":"labels"}, "encode": { "enter":{ "x":{"field":"data", "scale":"labelScaleX"}, "y":{"field":"data", "scale":"labelScaleY"}, "fill":{"value":"black"}, "size":{"value": 30} } } }, { "type": "text", "zindex":1, "from": {"data":"labels"}, "encode": { "enter":{ "x":{"field":"data", "scale":"labelScaleX"}, "y":{"field":"data", "scale":"labelScaleY"}, "dy":{"value":5}, "text":{"field":"data"}, "align":{"value":"center"}, "baseline":{"value":"top"} } } }, { "type": "symbol", "name": "needle", "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"} }, "update":{ "shape":{"signal": "'M -5 -5 Q 0 0 5 -5 L 0 -100'"}, "fill":{"value":"gray"} } } } ] } )5c:T24ee,embed( { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height": 600, "signals": [ { "name": "centerX", "update": "width/2" }, { "name": "centerY", "update": "height/2 + outerRadius/2" }, { "name": "outerRadius", "update": "targetValue ? radiusRef * 0.9 : radiusRef * 0.95" }, { "name": "radiusRef", "update": "min(width/2, height/2)" }, { "name": "innerRadius", "update": "outerRadius - outerRadius * 0.25" }, { "name": "ticksNumber", "value":6 }, { "name": "ticksColor", "value":"#000000" }, { "name": "showTicks", "value":true }, { "name": "mainValue", "value":60 }, { "name": "unit", "value":" L" }, { "name": "hasTarget", "update":"isNumber(targetValue) === true" }, { "name": "targetRule", "update": "(showTarget && hasTarget && (minValue <= targetValue) && (targetValue <= maxValue)) ? 1 : 0" }, { "name": "usedValue", "update": "min(max(minValue, mainValue), maxValue)" }, { "name": "minValue", "value":0 }, { "name": "maxValue", "value":100 }, { "name": "targetValue", "value":50 }, { "name": "showTarget", "value":true }, { "name": "fontFactor", "update": "(radiusRef/5)/25" }, { "name": "backgroundColor", "value":"#cbd1d6" }, { "name": "fillColor", "value":"#77A7FB" }, { "name": "targetStatus", "update": "mainValue === targetValue ? 0 : mainValue > targetValue ? lowIsGood ? -1 : 1 : lowIsGood ? 1 : -1" }, { "name": "showNeedle", "value": true }, { "name": "needleColor", "value":"#555" }, { "name": "lowIsGood", "value":false }, { "name": "needleSize", "update":"innerRadius" }, { "name": "alertStatus", "update": "((mainValue < minValue) || (maxValue < mainValue)) ? 1 : 0 " }, { "name": "alertColor", "value": "#FF0000" } ], "data": [ { "name": "ticks", "transform": [ { "type": "sequence", "as": "data", "start":{ "signal":"0" }, "stop":{ "signal":"(maxValue - minValue) + 0.1" }, "step": { "signal":"(maxValue - minValue)/(ticksNumber-1)" } }, { "type":"formula", "expr":"datum.data + minValue", "as": "data_2" }, { "type": "formula", "as":"radianRef", "expr":"PI * (datum.data/(maxValue - minValue))" }, { "type": "formula", "as":"x", "expr": "centerX - ((outerRadius - (outerRadius - innerRadius) * 0.6) * cos(datum.radianRef))" }, { "type": "formula", "as":"y", "expr": "centerY - ((outerRadius - (outerRadius - innerRadius) * 0.7) * sin(datum.radianRef))" } ] } ], "scales": [ { "name": "gaugeScale", "type": "linear", "domain":{"data":"ticks", "field":"data_2"}, "zero":false, "range":{"signal":"[-PI/2, PI/2]"} }, { "name": "tickScale", "type": "linear", "domain":{"data": "ticks", "field":"data"}, "range":{"signal":"[PI/2, -PI/2]"} }, { "name": "targetStatusColorScale", "domain":[-1, 0, 1], "range":["red", "orange", "green"] }, { "name": "needleScale", "type": "linear", "domain":{"data": "ticks", "field":"data_2"}, "range":[-90, 90] } ], "marks": [ { "type": "arc", "name": "gauge", "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "startAngle":{"signal": "-PI/2"}, "endAngle":{"signal":"PI/2"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"innerRadius"}, "fill":{"signal":"backgroundColor"} } } }, { "type": "arc", "encode": { "enter":{ "startAngle":{"signal":"-PI/2"} }, "update":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "innerRadius":{"signal":"innerRadius"}, "outerRadius":{"signal":"outerRadius"}, "endAngle":{"scale":"gaugeScale", "signal":"usedValue"}, "fill":{"signal":"fillColor"} } } }, { "type": "arc", "description":"ticks on the arc", "from": {"data":"ticks"}, "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"outerRadius - (radiusRef*0.05)"}, "startAngle":{ "scale": "tickScale", "field": "data"}, "endAngle":{ "scale": "tickScale", "field": "data"}, "stroke":{"signal":"ticksColor"}, "opacity":{"signal":"showTicks ? 1 : 0"} } } }, { "type": "text", "from": {"data":"ticks"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"alphabetic"} }, "update":{ "text":{"signal":"format(datum.data_2, '.0f')"}, "x":{"field":"x"}, "y":{"field":"y"}, "fontSize":{"signal":"fontFactor* 11"}, "fill":{"signal":"ticksColor"}, "opacity":{"signal":"showTicks ? 1 : 0"} } } }, { "type": "text", "description":"displayed min value at the bottom left of gauge when showTicks is false", "from": {"data":"gauge"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"minValue"}, "x":{"signal":"centerX - outerRadius + (outerRadius - innerRadius)/2"}, "y":{"signal":"centerY", "offset":{"signal":"fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 11"}, "opacity":{"signal":"showTicks ? 0 : 1"} } } }, { "type": "text", "description":"displayed max value at the bottom right of gauge when showTicks is false", "from": {"data":"gauge"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"maxValue"}, "x":{"signal":"centerX + innerRadius + (outerRadius - innerRadius)/2"}, "y":{"signal":"centerY", "offset":{"signal":"fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 11"}, "opacity":{"signal":"showTicks ? 0 : 1"} } } }, { "type": "text", "description":"displayed main value at the bottom center of the gauge ", "name": "gaugeValue", "encode": { "enter":{ "x":{"signal": "centerX"}, "baseline":{"value":"top"}, "align":{"value":"center"} }, "update":{ "text":{"signal":"format(mainValue, '.2f') + unit "}, "y":{"signal":"centerY", "offset": {"signal": "fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 14"} } } }, { "type": "text", "name": "targetDiff", "description":"add status with symbol and difference and percentage", "from": {"data": "gaugeValue"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"format((mainValue - targetValue), '.2f') + ' (' + format(mainValue/targetValue, '.0%') + ')'"}, "fill":{"signal":"targetStatus", "scale":"targetStatusColorScale"}, "x":{"signal": "centerX + (fontFactor * 12)"}, "y":{"signal": "centerY + (fontFactor * 20)"}, "fontSize":{"signal":"fontFactor * 14"}, "opacity":{"signal":" targetRule ? 1 : 0"} } } }, { "type": "symbol", "from": {"data":"targetDiff"}, "encode": { "update":{ "shape":{"signal":"targetStatus === 0 ? 'circle' : targetStatus === 1 ? 'triangle-up' : 'triangle-down'"}, "x":{"signal":"centerX - (fontFactor * 40)"}, "y":{"signal":"centerY + (fontFactor * 26)"}, "size":{"signal": "pow(fontFactor * 11, 2)"}, "fill":{"signal":"targetStatus", "scale":"targetStatusColorScale"}, "opacity":{"signal":"targetRule ? 1 : 0"} } } }, { "type": "symbol", "name": "needle", "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"} }, "update":{ "shape":{"signal": "'M-2.5 -2.5 Q 0 0 2.5 -2.5 L 0 -' + toString(needleSize) + ' Z '"}, "angle":{"signal":"usedValue", "scale":"needleScale"}, "size":{"signal":"4"}, "opacity":{"signal": "showNeedle ? 1 : 0"}, "stroke":{"signal":"needleColor"}, "fill":{"signal": "alertStatus ? alertColor : needleColor"} } } } ] } )5d:T284a,embed( { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height": 600, "signals": [ { "name": "centerX", "update": "width/2" }, { "name": "centerY", "update": "height/2 + outerRadius/2" }, { "name": "outerRadius", "update": "targetValue ? radiusRef * 0.9 : radiusRef * 0.95" }, { "name": "radiusRef", "update": "min(width/2, height/2)" }, { "name": "innerRadius", "update": "outerRadius - outerRadius * 0.25" }, { "name": "ticksNumber", "value":6 }, { "name": "ticksColor", "value":"#000000" }, { "name": "showTicks", "value":true }, { "name": "mainValue", "value":60 }, { "name": "unit", "value":" L" }, { "name": "hasTarget", "update":"isNumber(targetValue) === true" }, { "name": "targetRule", "update": "(showTarget && hasTarget && (minValue <= targetValue) && (targetValue <= maxValue)) ? 1 : 0" }, { "name": "usedValue", "update": "min(max(minValue, mainValue), maxValue)" }, { "name": "minValue", "value":0 }, { "name": "maxValue", "value":100 }, { "name": "targetValue", "value":50 }, { "name": "showTarget", "value":true }, { "name": "fontFactor", "update": "(radiusRef/5)/25" }, { "name": "backgroundColor", "value":"#cbd1d6" }, { "name": "fillColor", "value":"#77A7FB" }, { "name": "targetStatus", "update": "mainValue === targetValue ? 0 : mainValue > targetValue ? lowIsGood ? -1 : 1 : lowIsGood ? 1 : -1" }, { "name": "showNeedle", "value": true }, { "name": "needleColor", "value":"#555" }, { "name": "lowIsGood", "value":false }, { "name": "needleSize", "update":"innerRadius" }, { "name": "alertStatus", "update": "((mainValue < minValue) || (maxValue < mainValue)) ? 1 : 0 " }, { "name": "alertColor", "value": "#FF0000" } ], "data": [ { "name": "ticks", "transform": [ { "type": "sequence", "as": "data", "start":{ "signal":"0" }, "stop":{ "signal":"(maxValue - minValue) + 0.1" }, "step": { "signal":"(maxValue - minValue)/(ticksNumber-1)" } }, { "type":"formula", "expr":"datum.data + minValue", "as": "data_2" }, { "type": "formula", "as":"radianRef", "expr":"PI * (datum.data/(maxValue - minValue))" }, { "type": "formula", "as":"x", "expr": "centerX - ((outerRadius - (outerRadius - innerRadius) * 0.6) * cos(datum.radianRef))" }, { "type": "formula", "as":"y", "expr": "centerY - ((outerRadius - (outerRadius - innerRadius) * 0.7) * sin(datum.radianRef))" } ] } ], "scales": [ { "name": "gaugeScale", "type": "linear", "domain":{"data":"ticks", "field":"data_2"}, "zero":false, "range":{"signal":"[-PI/2, PI/2]"} }, { "name": "tickScale", "type": "linear", "domain":{"data": "ticks", "field":"data"}, "range":{"signal":"[PI/2, -PI/2]"} }, { "name": "targetStatusColorScale", "domain":[-1, 0, 1], "range":["red", "orange", "green"] }, { "name": "needleScale", "type": "linear", "domain":{"data": "ticks", "field":"data_2"}, "range":[-90, 90] }, { "name": "targetScale", "type": "linear", "domain":{"data":"ticks", "field":"data_2"}, "range":[0, 180] } ], "marks": [ { "type": "arc", "name": "gauge", "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "startAngle":{"signal": "-PI/2"}, "endAngle":{"signal":"PI/2"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"innerRadius"}, "fill":{"signal":"backgroundColor"} } } }, { "type": "arc", "encode": { "enter":{ "startAngle":{"signal":"-PI/2"} }, "update":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "innerRadius":{"signal":"innerRadius"}, "outerRadius":{"signal":"outerRadius"}, "endAngle":{"scale":"gaugeScale", "signal":"usedValue"}, "fill":{"signal":"fillColor"} } } }, { "type": "arc", "description":"ticks on the arc", "from": {"data":"ticks"}, "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"outerRadius - (radiusRef*0.05)"}, "startAngle":{ "scale": "tickScale", "field": "data"}, "endAngle":{ "scale": "tickScale", "field": "data"}, "stroke":{"signal":"ticksColor"}, "opacity":{"signal":"showTicks ? 1 : 0"} } } }, { "type": "text", "from": {"data":"ticks"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"alphabetic"} }, "update":{ "text":{"signal":"format(datum.data_2, '.0f')"}, "x":{"field":"x"}, "y":{"field":"y"}, "fontSize":{"signal":"fontFactor* 11"}, "fill":{"signal":"ticksColor"}, "opacity":{"signal":"showTicks ? 1 : 0"} } } }, { "type": "text", "description":"displayed min value at the bottom left of gauge when showTicks is false", "from": {"data":"gauge"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"minValue"}, "x":{"signal":"centerX - outerRadius + (outerRadius - innerRadius)/2"}, "y":{"signal":"centerY", "offset":{"signal":"fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 11"}, "opacity":{"signal":"showTicks ? 0 : 1"} } } }, { "type": "text", "description":"displayed max value at the bottom right of gauge when showTicks is false", "from": {"data":"gauge"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"maxValue"}, "x":{"signal":"centerX + innerRadius + (outerRadius - innerRadius)/2"}, "y":{"signal":"centerY", "offset":{"signal":"fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 11"}, "opacity":{"signal":"showTicks ? 0 : 1"} } } }, { "type": "text", "description":"displayed main value at the bottom center of the gauge ", "name": "gaugeValue", "encode": { "enter":{ "x":{"signal": "centerX"}, "baseline":{"value":"top"}, "align":{"value":"center"} }, "update":{ "text":{"signal":"format(mainValue, '.2f') + unit "}, "y":{"signal":"centerY", "offset": {"signal": "fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 14"} } } }, { "type": "text", "name": "targetDiff", "description":"add status with symbol and difference and percentage", "from": {"data": "gaugeValue"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"format((mainValue - targetValue), '.2f') + ' (' + format(mainValue/targetValue, '.0%') + ')'"}, "fill":{"signal":"targetStatus", "scale":"targetStatusColorScale"}, "x":{"signal": "centerX + (fontFactor * 12)"}, "y":{"signal": "centerY + (fontFactor * 20)"}, "fontSize":{"signal":"fontFactor * 14"}, "opacity":{"signal":" targetRule ? 1 : 0"} } } }, { "type": "symbol", "from": {"data":"targetDiff"}, "encode": { "update":{ "shape":{"signal":"targetStatus === 0 ? 'circle' : targetStatus === 1 ? 'triangle-up' : 'triangle-down'"}, "x":{"signal":"centerX - (fontFactor * 40)"}, "y":{"signal":"centerY + (fontFactor * 26)"}, "size":{"signal": "pow(fontFactor * 11, 2)"}, "fill":{"signal":"targetStatus", "scale":"targetStatusColorScale"}, "opacity":{"signal":"targetRule ? 1 : 0"} } } }, { "type": "symbol", "name": "needle", "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"} }, "update":{ "shape":{"signal": "'M-2.5 -2.5 Q 0 0 2.5 -2.5 L 0 -' + toString(needleSize) + ' Z '"}, "angle":{"signal":"usedValue", "scale":"needleScale"}, "size":{"signal":"4"}, "opacity":{"signal": "showNeedle ? 1 : 0"}, "stroke":{"signal":"needleColor"}, "fill":{"signal": "alertStatus ? alertColor : needleColor"} } } }, { "type": "symbol", "from": {"data":"gauge"}, "encode": { "enter":{ "shape":{"value":"triangle-right"}, "fill":{"signal":"needleColor"} }, "update":{ "angle":{"scale":"targetScale", "signal": "targetValue"}, "x":{"signal":"centerX - ((outerRadius + (outerRadius - innerRadius) * 0.15) * cos(((targetValue - minValue)/(maxValue - minValue)) * PI))"}, "y":{"signal":"centerY - ((outerRadius + (outerRadius - innerRadius) * 0.15) * sin(((targetValue - minValue)/(maxValue - minValue)) * PI))"}, "size":{"signal":"pow(fontFactor * 10, 2)"}, "opacity":{"signal":"targetRule ? 1 : 0"} } } } ] } )5e:T2ab8,embed( { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height": 600, "signals": [ { "name": "title", "value":"Gauge title" }, { "name": "showTitle", "value":true }, { "name": "centerX", "update": "width/2" }, { "name": "centerY", "update": "height/2 + outerRadius/2" }, { "name": "outerRadius", "update": "targetValue ? radiusRef * 0.9 : radiusRef * 0.95" }, { "name": "radiusRef", "update": "min(width/2, height/2)" }, { "name": "innerRadius", "update": "outerRadius - outerRadius * 0.25" }, { "name": "ticksNumber", "value":6 }, { "name": "ticksColor", "value":"#000000" }, { "name": "showTicks", "value":true }, { "name": "mainValue", "value":60 }, { "name": "unit", "value":" L" }, { "name": "hasTarget", "update":"isNumber(targetValue) === true" }, { "name": "targetRule", "update": "(showTarget && hasTarget && (minValue <= targetValue) && (targetValue <= maxValue)) ? 1 : 0" }, { "name": "usedValue", "update": "min(max(minValue, mainValue), maxValue)" }, { "name": "minValue", "value":0 }, { "name": "maxValue", "value":100 }, { "name": "targetValue", "value":50 }, { "name": "showTarget", "value":true }, { "name": "fontFactor", "update": "(radiusRef/5)/25" }, { "name": "backgroundColor", "value":"#cbd1d6" }, { "name": "fillColor", "value":"#77A7FB" }, { "name": "targetStatus", "update": "mainValue === targetValue ? 0 : mainValue > targetValue ? lowIsGood ? -1 : 1 : lowIsGood ? 1 : -1" }, { "name": "showNeedle", "value": true }, { "name": "needleColor", "value":"#555" }, { "name": "lowIsGood", "value":false }, { "name": "needleSize", "update":"innerRadius" }, { "name": "alertStatus", "update": "((mainValue < minValue) || (maxValue < mainValue)) ? 1 : 0 " }, { "name": "alertColor", "value": "#FF0000" } ], "data": [ { "name": "ticks", "transform": [ { "type": "sequence", "as": "data", "start":{ "signal":"0" }, "stop":{ "signal":"(maxValue - minValue) + 0.1" }, "step": { "signal":"(maxValue - minValue)/(ticksNumber-1)" } }, { "type":"formula", "expr":"datum.data + minValue", "as": "data_2" }, { "type": "formula", "as":"radianRef", "expr":"PI * (datum.data/(maxValue - minValue))" }, { "type": "formula", "as":"x", "expr": "centerX - ((outerRadius - (outerRadius - innerRadius) * 0.6) * cos(datum.radianRef))" }, { "type": "formula", "as":"y", "expr": "centerY - ((outerRadius - (outerRadius - innerRadius) * 0.7) * sin(datum.radianRef))" } ] } ], "scales": [ { "name": "gaugeScale", "type": "linear", "domain":{"data":"ticks", "field":"data_2"}, "zero":false, "range":{"signal":"[-PI/2, PI/2]"} }, { "name": "tickScale", "type": "linear", "domain":{"data": "ticks", "field":"data"}, "range":{"signal":"[PI/2, -PI/2]"} }, { "name": "targetStatusColorScale", "domain":[-1, 0, 1], "range":["red", "orange", "green"] }, { "name": "needleScale", "type": "linear", "domain":{"data": "ticks", "field":"data_2"}, "range":[-90, 90] }, { "name": "targetScale", "type": "linear", "domain":{"data":"ticks", "field":"data_2"}, "range":[0, 180] } ], "marks": [ { "type": "arc", "name": "gauge", "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "startAngle":{"signal": "-PI/2"}, "endAngle":{"signal":"PI/2"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"innerRadius"}, "fill":{"signal":"backgroundColor"} } } }, { "type": "arc", "encode": { "enter":{ "startAngle":{"signal":"-PI/2"} }, "update":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "innerRadius":{"signal":"innerRadius"}, "outerRadius":{"signal":"outerRadius"}, "endAngle":{"scale":"gaugeScale", "signal":"usedValue"}, "fill":{"signal":"fillColor"} } } }, { "type": "arc", "description":"ticks on the arc", "from": {"data":"ticks"}, "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"}, "outerRadius":{"signal":"outerRadius"}, "innerRadius":{"signal":"outerRadius - (radiusRef*0.05)"}, "startAngle":{ "scale": "tickScale", "field": "data"}, "endAngle":{ "scale": "tickScale", "field": "data"}, "stroke":{"signal":"ticksColor"}, "opacity":{"signal":"showTicks ? 1 : 0"} } } }, { "type": "text", "from": {"data":"ticks"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"alphabetic"} }, "update":{ "text":{"signal":"format(datum.data_2, '.0f')"}, "x":{"field":"x"}, "y":{"field":"y"}, "fontSize":{"signal":"fontFactor* 11"}, "fill":{"signal":"ticksColor"}, "opacity":{"signal":"showTicks ? 1 : 0"} } } }, { "type": "text", "description":"displayed min value at the bottom left of gauge when showTicks is false", "from": {"data":"gauge"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"minValue"}, "x":{"signal":"centerX - outerRadius + (outerRadius - innerRadius)/2"}, "y":{"signal":"centerY", "offset":{"signal":"fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 11"}, "opacity":{"signal":"showTicks ? 0 : 1"} } } }, { "type": "text", "description":"displayed max value at the bottom right of gauge when showTicks is false", "from": {"data":"gauge"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"maxValue"}, "x":{"signal":"centerX + innerRadius + (outerRadius - innerRadius)/2"}, "y":{"signal":"centerY", "offset":{"signal":"fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 11"}, "opacity":{"signal":"showTicks ? 0 : 1"} } } }, { "type": "text", "description":"displayed main value at the bottom center of the gauge ", "name": "gaugeValue", "encode": { "enter":{ "x":{"signal": "centerX"}, "baseline":{"value":"top"}, "align":{"value":"center"} }, "update":{ "text":{"signal":"format(mainValue, '.2f') + unit "}, "y":{"signal":"centerY", "offset": {"signal": "fontFactor*5"}}, "fontSize":{"signal":"fontFactor * 14"} } } }, { "type": "text", "name": "targetDiff", "description":"add status with symbol and difference and percentage", "from": {"data": "gaugeValue"}, "encode": { "enter":{ "align":{"value":"center"}, "baseline":{"value":"top"} }, "update":{ "text":{"signal":"format((mainValue - targetValue), '.2f') + ' (' + format(mainValue/targetValue, '.0%') + ')'"}, "fill":{"signal":"targetStatus", "scale":"targetStatusColorScale"}, "x":{"signal": "centerX + (fontFactor * 12)"}, "y":{"signal": "centerY + (fontFactor * 20)"}, "fontSize":{"signal":"fontFactor * 14"}, "opacity":{"signal":" targetRule ? 1 : 0"} } } }, { "type": "symbol", "from": {"data":"targetDiff"}, "encode": { "update":{ "shape":{"signal":"targetStatus === 0 ? 'circle' : targetStatus === 1 ? 'triangle-up' : 'triangle-down'"}, "x":{"signal":"centerX - (fontFactor * 40)"}, "y":{"signal":"centerY + (fontFactor * 26)"}, "size":{"signal": "pow(fontFactor * 11, 2)"}, "fill":{"signal":"targetStatus", "scale":"targetStatusColorScale"}, "opacity":{"signal":"targetRule ? 1 : 0"} } } }, { "type": "symbol", "name": "needle", "encode": { "enter":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY"} }, "update":{ "shape":{"signal": "'M-2.5 -2.5 Q 0 0 2.5 -2.5 L 0 -' + toString(needleSize) + ' Z '"}, "angle":{"signal":"usedValue", "scale":"needleScale"}, "size":{"signal":"4"}, "opacity":{"signal": "showNeedle ? 1 : 0"}, "stroke":{"signal":"needleColor"}, "fill":{"signal": "alertStatus ? alertColor : needleColor"} } } }, { "type": "symbol", "from": {"data":"gauge"}, "encode": { "enter":{ "shape":{"value":"triangle-right"}, "fill":{"signal":"needleColor"} }, "update":{ "angle":{"scale":"targetScale", "signal": "targetValue"}, "x":{"signal":"centerX - ((outerRadius + (outerRadius - innerRadius) * 0.15) * cos(((targetValue - minValue)/(maxValue - minValue)) * PI))"}, "y":{"signal":"centerY - ((outerRadius + (outerRadius - innerRadius) * 0.15) * sin(((targetValue - minValue)/(maxValue - minValue)) * PI))"}, "size":{"signal":"pow(fontFactor * 10, 2)"}, "opacity":{"signal":"targetRule ? 1 : 0"} } } }, { "type": "text", "name": "title", "encode": { "enter":{ "fill":{"value":"#000000"}, "align":{"value":"center"}, "baseline":{"value":"middle"} }, "update":{ "x":{"signal":"centerX"}, "y":{"signal":"centerY - (outerRadius * 1.2)"}, "text":{"signal":"title"}, "fontSize":{"signal":"fontFactor * 15"}, "opacity":{"signal":"showTitle ? 1 : 0"} } } } ] } )5f:[] 47:{"id":"e80f9b5bb52ccba9","slug":"how-to-create-a-gauge-with-vega","title":"How to create a gauge with Vega","thumbnail":"8b8a039e92e59b6a69a7c9becb9888ff2e14c02d635ac8cc454d3c8b4d6edfec","access_level":"public","create_time":"$D2020-02-05T11:10:22.884Z","update_time":"$D2020-02-11T10:48:49.124Z","view_time":null,"first_public_time":"$D2021-04-28T22:39:01.685Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"2047fce79563a72c","login":"mayukobonnefoy","name":"Mayuko Bonnefoy","avatar_url":"https://avatars-next.observableusercontent.com/8f4e0c979c814eb82a331e738c59518e6a5de2d55ddc7ebbf9438d312dc46ba2","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":579,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3b9e62bd016a3332","login":"mayukobonnefoy","name":"Mayuko Bonnefoy","avatar_url":"https://avatars-next.observableusercontent.com/8f4e0c979c814eb82a331e738c59518e6a5de2d55ddc7ebbf9438d312dc46ba2","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"3b9e62bd016a3332","login":"mayukobonnefoy","name":"Mayuko Bonnefoy","avatar_url":"https://avatars-next.observableusercontent.com/8f4e0c979c814eb82a331e738c59518e6a5de2d55ddc7ebbf9438d312dc46ba2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"How to create a gauge with Vega","cells":[{"id":0,"value":"md`# How to create a gauge with Vega`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"html`Contents may change due to updates from Vega.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`This is a guide for beginners of Vega. In this post, I am going to explain how to make a gauge from scratch.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`## What is Vega?\n\nFirst of all, a few words for explain [Vega](https://vega.github.io/vega/).\nVega is a declarative web language for creating interactive visualizations.\nYou can read JSON and CSV and visualize various charts.\n\nBy the way, Vega is written in one of the schema languages, the JSON schema. The schema language was developed to define the document structure itself, which cannot be defined in xml. JSON schema is a format for defining the structure of JSON data with JSON itself. The JSON schema itself is written in JSON. This is data itself, not a computer program.\n\nLet’s get back on track. It is very convenient to use the online [Vega Editor](https://vega.github.io/editor/#/edited) to directly enter and test Vega specifications.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md`## How Vega works?\n\nThe basic outline of Vega, for example, is configured as follows:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"([\n {\n \"$schema\": \"https://vega.github.io/schema/vega/v5.json\",\n \"width\": 600,\n \"height\": 600,\n \"signals\": [],\n \"data\": [],\n \"scales\": [],\n \"axes\": [],\n \"legends\": [],\n \"marks\": []\n}\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md `\nLet's look at each one. In the $schema, write the URL of the JSON schema for Vega. The following is an example of a URL.\nhttps://vega.github.io/schema/[library]/[version].json\n\nIn the library, write Vega or vega-lite, and in the version, write the version of the library that obtains the schema.\n\nNext, the width and height are the factors that determine the size of the base container. Signals are dynamic variables that parameterize the visualization. Data defines the data to be loaded and uses transforms to define how to process the data, such as filtering the data and calculating new fields.\n\nScales map data values, such as numbers and categories, to visual values (pixels, colors, sizes). The axes visualize the spatial scale mapping. The legend visualizes the scale mapping of visual values such as color, shape, size, etc. Graphical marks visually transform (encode) data using geometric primitives such as rectangles, lines, and plot symbols. Now, let's get started to create a widget.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"embed = require(\"vega-embed@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`## Gauge example\nHere is the finished widget. \nThis gauge shows the target value and the difference from the main value and its percentage with plus, minus and equal marks. \n\nWhen the main value exceeds the range of the gauge, the difference between the main value and the target is displayed as it is, and the needle is displayed in red to make it easier to notice errors.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"md`\n\n### Tutorial of Gauge\n\n1. Responsive in Vega\n2. Gauge base\n3. Filled gauge\n4. Ticks added\n5. Added ticks values\n6. Ticks off case: Display minimum value at lower left of gauge\n7. Ticks off case: Display maximum value at lower right of gauge\n8. Added main value\n9. Added a difference between a target and a main value and the percentage\n10. Added a symbol of difference\n11. Added a needle\n12. Added triangle as a guide to target value\n13. Title added\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"([\n {\n \"name\": \"centerX\",\n \"update\": \"width/2\"\n },\n {\n \"name\": \"centerY\",\n \"update\": \"height/2 + outerRadius/2\"\n },\n {\n \"name\": \"outerRadius\",\n \"update\": \"targetValue ? radiusRef * 0.9 : radiusRef * 0.95\"\n },\n {\n \"name\": \"radiusRef\",\n \"update\": \"min(width/2, height/2)\"\n },\n {\n \"name\": \"innerRadius\",\n \"update\": \"outerRadius - outerRadius * 0.25\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"step2 = md`---\n\n## Gauge base\n\nThe first step is to create the basic shape of the gauge. The only specifications required here are signals and marks. Here is the content of the signal. \n\n### Signals\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"([\n {\n \"name\": \"centerX\",\n \"update\": \"width/2\"\n },\n {\n \"name\": \"centerY\",\n \"update\": \"height/2 + outerRadius/2\"\n },\n {\n \"name\": \"outerRadius\",\n \"update\": \"targetValue ? radiusRef * 0.9 : radiusRef * 0.95\"\n },\n {\n \"name\": \"radiusRef\",\n \"update\": \"min(width/2, height/2)\"\n },\n {\n \"name\": \"innerRadius\",\n \"update\": \"outerRadius - outerRadius * 0.25\"\n },\n {\n \"name\": \"targetValue\",\n \"value\":50\n },\n {\n \"name\": \"backgroundColor\",\n \"value\":\"#cbd1d6\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"md`\nAlmost explained in the previous step, the only thing I didn't touch was the background color.\nLiterally, this is the color used to display the gauge base.\n\nNext, I will explain Marks. First, look inside Marks.\n\n### Marks\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"([\n {\n \"type\": \"arc\",\n \"name\": \"gauge\",\n \"encode\": {\n \"enter\":{\n \"x\":{\"signal\":\"centerX\"},\n \"y\":{\"signal\":\"centerY\"},\n \"startAngle\":{\"signal\": \"-PI/2\"},\n \"endAngle\":{\"signal\":\"PI/2\"},\n \"outerRadius\":{\"signal\":\"outerRadius\"},\n \"innerRadius\":{\"signal\":\"innerRadius\"},\n \"fill\":{\"signal\":\"backgroundColor\"}\n }\n }\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"md`\nWhen I draw a semicircle in Vega, I use the arc type.\nThe required properties are the coordinates of the center point, the start and end angles, the outer and inner radius, and the fill color.\n\nLook at the image below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"md`\nArc marks are defined by adding an angle and a radial extent to the center point. Using radians, the segment DB perpendicular to the segment AC becomes radians 0. From that point, the left side is minus, so the angle between line segment DB and line segment AB is minus 90 degrees, and the angle between line segment DB and line segment BC is 90 degrees. 90 degrees is π divided by 2 in radians. So startAngle is -π divided by 2, and endAngle is π divided by 2. The gauge base is now complete.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"step3 = md`---\n\n## Filled gauge\n\nThe next step is to fill the gauge with another color up to the main value.\nThe following is the content of the added signals.\n### Signals\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"([\n {\n \"name\": \"ticksNumber\",\n \"value\":6\n },\n {\n \"name\": \"mainValue\",\n \"value\":60\n },\n {\n \"name\": \"usedValue\",\n \"update\": \"min(max(minValue, mainValue), maxValue)\"\n },\n {\n \"name\": \"minValue\",\n \"value\":0\n },\n {\n \"name\": \"maxValue\",\n \"value\":100\n },\n {\n \"name\": \"fillColor\",\n \"value\":\"#77A7FB\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"([\n {\n \"name\": \"ticks\",\n \"transform\": [\n {\n \"type\": \"sequence\",\n \"as\": \"data\",\n \"start\":{\n \"signal\":\"0\"\n },\n \"stop\":{\n \"signal\":\"(maxValue - minValue) + 0.1\"\n },\n \"step\": {\n \"signal\":\"(maxValue - minValue)/(ticksNumber-1)\"\n }\n },\n {\n \"type\":\"formula\",\n \"expr\":\"datum.data + minValue\",\n \"as\": \"data_2\"\n },\n {\n \"type\": \"formula\",\n \"as\":\"radianRef\",\n \"expr\":\"PI * (datum.data/(maxValue - minValue))\"\n },\n {\n \"type\": \"formula\",\n \"as\":\"x\",\n \"expr\": \"centerX - ((outerRadius - (outerRadius - innerRadius) * 0.6) * cos(datum.radianRef))\"\n },\n {\n \"type\": \"formula\",\n \"as\":\"y\",\n \"expr\": \"centerY - ((outerRadius - (outerRadius - innerRadius) * 0.7) * sin(datum.radianRef))\"\n }\n ]\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"([\n {\n \"name\": \"gaugeScale\",\n \"type\": \"linear\",\n \"domain\":{\"data\":\"ticks\", \"field\":\"data_2\"},\n \"zero\":false,\n \"range\":{\"signal\":\"[-PI/2, PI/2]\"}\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"md`\nThe scale uses a linear type. Since domain specifies which data to use, select \"data_2\" in ticks data.\nzero sets whether to include zero in the scale. This time it is false. Range is the range of the scale, between -π / 2 and π / 2.\n\n### Marks\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"([\n {\n \"type\": \"arc\",\n \"encode\": {\n \"enter\":{ \n \"startAngle\":{\"signal\":\"-PI/2\"} \n },\n \"update\":{\n \"x\":{\"signal\":\"centerX\"},\n \"y\":{\"signal\":\"centerY\"},\n \"innerRadius\":{\"signal\":\"innerRadius\"},\n \"outerRadius\":{\"signal\":\"outerRadius\"},\n \"endAngle\":{\"scale\":\"gaugeScale\", \"signal\":\"usedValue\"},\n \"fill\":{\"signal\":\"fillColor\"}\n }\n }\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"md `\nThe arc that fills the gauge sets \"startAngle\" with enter as well as the base gauge. However, since the part to be filled changes depending on the main value, write \"endAngle\" in update. The scale of \"endAngle\" is set to gaugeScale, and by selecting \"usedValue\" for signal, when the main value goes out of the gauge, the value below the minimum value is set to the minimum value, and the value above the maximum value is set to the maximum value. The color used to fill the gauge used \"fillColor\" in signal.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"step4 = md`---\n\n## Ticks added\nIn this step, I place ticks on the gauge.\n### Signals\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"([\n {\n \"name\": \"ticksColor\",\n \"value\":\"#000000\"\n },\n {\n \"name\": \"showTicks\",\n \"value\":true\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"md `\nTwo properties have been added compared to the previous step.\n- \"ticksColor\": This is the color of the ticks.\n- \"showTicks\": I created this signal because I wanted to be able to show or hide the ticks lines.\n\n### Data \nNothing to add\n\n### Scales\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"([\n {\n \"name\": \"tickScale\",\n \"type\": \"linear\",\n \"domain\":{\"data\": \"ticks\", \"field\":\"data\"},\n \"range\":{\"signal\":\"[PI/2, -PI/2]\"}\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"md `\n\n- \"tickScale\": This scale is also a linear type. domain selects data of ticks data. Range is the same as gaugeScale.\n\n### Marks\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"([\n {\n \"type\": \"arc\",\n \"description\":\"ticks on the arc\",\n \"from\": {\"data\":\"ticks\"},\n \"encode\": {\n \"enter\":{\n \"x\":{\"signal\":\"centerX\"},\n \"y\":{\"signal\":\"centerY\"},\n \"outerRadius\":{\"signal\":\"outerRadius\"},\n \"innerRadius\":{\"signal\":\"outerRadius - (radiusRef*0.05)\"},\n \"startAngle\":{ \"scale\": \"tickScale\",\n \"field\": \"data\"},\n \"endAngle\":{ \"scale\": \"tickScale\",\n \"field\": \"data\"},\n \"stroke\":{\"signal\":\"ticksColor\"},\n \"opacity\":{\"signal\":\"showTicks ? 1 : 0\"}\n }\n }\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"md `\nUse the arc type to place ticks on the gauge.\nYou can write a sentence in \"description\". Writing a simple note in this part will make it easier to review the long JSON later.\nBased on the ticks data, a line connecting each coordinate on \"innerRadius\" from each coordinate on \"outerRadius\" becomes each ticks.\nHowever, in this case, in order to shorten the length of ticks, the setting of \"innerRadius\" was calculated by subtracting 5% of \"radiusRef\" from \"outerRadius\".\nAs ticks are lines, color is specified by \"stroke\" instead of \"fill\". Finally, it is about showing and hiding ticks. I used the ternary operator to set \"opacity\" to 1 if there is a \"showTicks\" property and 0 otherwise.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"step5 = md`---\n\n## Added ticks values\n\nIn this step, I display ticks values.\n\n### Signals\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"([\n {\n \"name\": \"fontFactor\",\n \"update\": \"(radiusRef/5)/25\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"md `\nMainly, this is the base value for setting the font size.\nConsidering the case where the size of the container is small, the base value is set as small as possible.\n\n### Data\nNothing to add\n\n### Scales\nNothing to add\n\n### Marks\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"([\n {\n \"type\": \"text\",\n \"from\": {\"data\":\"ticks\"},\n \"encode\": {\n \"enter\":{ \n \"align\":{\"value\":\"center\"},\n \"baseline\":{\"value\":\"alphabetic\"}\n },\n \"update\":{\n \"text\":{\"signal\":\"format(datum.data_2, '.0f')\"},\n \"x\":{\"field\":\"x\"},\n \"y\":{\"field\":\"y\"},\n \"fontSize\":{\"signal\":\"fontFactor* 11\"},\n \"fill\":{\"signal\":\"ticksColor\"},\n \"opacity\":{\"signal\":\"showTicks ? 1 : 0\"}\n }\n }\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"md `\nUse the text type to display the value.\nUse the \"from\" property to specify ticks data.\nThe horizontal alignment of the text is centered using the align property.\nThe vertical alignment of the text is specified as \"alphabetic\" using the baseline property.\nThis may be a little confusing, so here's an example from the Vega documentation.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"md `\nNext, in the update, the text uses the formatting methods in Formatting Functions.\nDisplay the value of ticks to be displayed using '.0f' to 0 decimal places.\n\nMultiple x and y coordinates are required for the ticks line. In this case, use \"field\". \nIt accepts a string indicating the name of the data field. The x and y in the \"field\" are the x and y converted at the data.\n\nFinally, \"fontSize\" calculates the size using the fontFactor of the signal.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"step6 = md`---\n\n## Ticks off case: Display minimum value at lower left of gauge\nIn this step, when the tick lines and tick values are not displayed, the minimum value is displayed on the left below the gauge as a guide.\n\n### Signals\nThere is nothing new in \"signals\", but I assume \"showTicks\" is false.\n\n### Data\nNothing to add\n\n###Scales\nNothing to add\n\n### Marks\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"([\n {\n \"type\": \"text\",\n \"description\":\"displayed min value at the bottom left of gauge when showTicks is false\",\n \"from\": {\"data\":\"gauge\"},\n \"encode\": {\n \"enter\":{\n \"align\":{\"value\":\"center\"},\n \"baseline\":{\"value\":\"top\"}\n },\n \"update\":{\n \"text\":{\"signal\":\"minValue\"},\n \"x\":{\"signal\":\"centerX - outerRadius + (outerRadius - innerRadius)/2\"},\n \"y\":{\"signal\":\"centerY\", \"offset\":{\"signal\":\"fontFactor*5\"}},\n \"fontSize\":{\"signal\":\"fontFactor * 11\"},\n \"opacity\":{\"signal\":\"showTicks ? 0 : 1\"}\n }\n }\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"md`\nThe \"from\": {\"data\": \"...\"} statement usually pulls data from the source defined in the \"data\" block.\nHowever, you can use a markset as the backing data object for a new markset.\nIn this case, you need to include the name property in the mark definition.\nSee the documentation for reactive geometry for more information.\n\nIn \"update\", put \"minValue\" in \"text\".\nThe x-axis coordinates are calculated by subtracting the radius of the outer circle from the center of the semicircle, and then dividing the difference between the outer and inner semicircles by two.\nThe coordinate of the y-axis is centerY, but it sticks too much to the gauge, so it's just fine to add an offset.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"$55","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"step7 = md`---\n\n## Ticks off case: Display maximum value at lower right of gauge\n\nIn this step, when the tick lines and scale values are not displayed, the maximum value is displayed on the right below the gauge as a guide.\n\n### Signals\nNothing to add\n\n### Data\nNothing to add\n\n### Marks\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"([\n {\n \"type\": \"text\",\n \"description\":\"displayed max value at the bottom right of gauge when showTicks is false\",\n \"from\": {\"data\":\"gauge\"},\n \"encode\": {\n \"enter\":{\n \"align\":{\"value\":\"center\"},\n \"baseline\":{\"value\":\"top\"}\n },\n \"update\":{\n \"text\":{\"signal\":\"maxValue\"},\n \"x\":{\"signal\":\"centerX + innerRadius + (outerRadius - innerRadius)/2\"},\n \"y\":{\"signal\":\"centerY\", \"offset\":{\"signal\":\"fontFactor*5\"}},\n \"fontSize\":{\"signal\":\"fontFactor * 11\"},\n \"opacity\":{\"signal\":\"showTicks ? 0 : 1\"}\n }\n }\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"md`\nIn \"update\", put \"maxValue\" in \"text\".\nThe x-axis coordinates are calculated by adding the radius of the outer circle to the center of the semicircle, and then dividing the difference between the semicircle of the outer circle and the inner circle by two.\nThe coordinate of the y-axis is centerY, but it sticks too much to the gauge, so it's just fine to add an offset.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"$56","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"step8 = md`---\n\n## Added main value\n\nIn this step, the main value and its unit are displayed at the center of the gauge.\n\n### Signals\n\"unit\": Add the unit to the main value. If you leave a space before the unit in \"value\", a space can be created between the main value and the unit.\n\n### Data\nNothing to add\n\n### Scales\nNothing to add\n\n### Marks\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"([\n {\n \"type\": \"text\",\n \"description\":\"displayed main value at the bottom center of the gauge \",\n \"name\": \"gaugeValue\",\n \"encode\": {\n \"enter\":{\n \"x\":{\"signal\": \"centerX\"}, \n \"baseline\":{\"value\":\"top\"},\n \"align\":{\"value\":\"center\"}\n },\n \"update\":{\n \"text\":{\"signal\":\"format(mainValue, '.2f') + unit \"},\n \"y\":{\"signal\":\"centerY\", \"offset\": {\"signal\": \"fontFactor*5\"}}, \n \"fontSize\":{\"signal\":\"fontFactor * 14\"}\n }\n }\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"md`\nIn \"update\", use format() in the formatting functions for \"text\".\nThis formats numbers as strings. .2f displays up to the second decimal place.\nThen add \"unit\" to it and display it.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"$57","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"step9 = md`---\n\n## Added a difference between a target and a main value and the percentage\n\nIn this step, the value of the difference between the target value and the main value and its ratio are displayed below the main value.\n\n### Signals\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"([\n {\n \"name\": \"hasTarget\",\n \"update\":\"isNumber(targetValue) === true\"\n },\n {\n \"name\": \"targetRule\",\n \"update\": \"(showTarget && hasTarget && (minValue <= targetValue) && (targetValue <= maxValue)) ? 1 : 0\"\n },\n {\n \"name\": \"showTarget\",\n \"value\":true\n },\n {\n \"name\": \"targetStatus\",\n \"update\": \"mainValue === targetValue ? 0 : mainValue > targetValue ? lowIsGood ? -1 : 1 : lowIsGood ? 1 : -1\"\n },\n {\n \"name\": \"lowIsGood\",\n \"value\":false\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"md`\n\"hasTarget\": This uses isNumber () in Vega's expressions.Returns true if the number in parentheses is a number.\n\n\"targetRule\": Display the target, set it to 1 when the target contains a number and meets the conditions of (minValue <= targetValue) and (targetValue <= maxValue), Otherwise set it to 0. The third and fourth conditions are set so that the target value is greater than minValue and less than maxValue, that is, within the gauge.\n\n\"showTarget\": \nThis signal is a boolean that controls the visibility of the target value.\n\n\"targetStatus\": This signal divides the state of the target value into three, -1, 0, and 1, depending on the condition. And used in \"marks\" along with \"targetStatusColorScale\" in \"scales\". \n\n\"lowIsGood\": This signal is a boolean, created when the target value is reached when the main value is lower than the target value. By default, it is specified as false.\n\n### Data\nNothing to add\n\n### Scales\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"([\n {\n \"name\": \"targetStatusColorScale\",\n \"domain\":[-1, 0, 1],\n \"range\":[\"red\", \"orange\", \"green\"]\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"md`\n\"-1, 0, 1\" of \"domain\" correspond to each color of \"range\". If the main value is lower than the target value, it will be displayed in red, if it is the same, it will be displayed in orange, and if it is higher, it will be displayed in green.\n\n### Marks\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"([\n {\n \"type\": \"text\",\n \"name\": \"targetDiff\",\n \"description\":\"add status with symbol and difference and percentage\",\n \"from\": {\"data\": \"gaugeValue\"},\n \"encode\": {\n \"enter\":{\n \"align\":{\"value\":\"center\"},\n \"baseline\":{\"value\":\"top\"}\n },\n \"update\":{\n \"text\":{\"signal\":\"format((mainValue - targetValue), '.2f') + ' (' + format(mainValue/targetValue, '.0%') + ')'\"},\n \"fill\":{\"signal\":\"targetStatus\", \"scale\":\"targetStatusColorScale\"},\n \"x\":{\"signal\": \"centerX + (fontFactor * 12)\"},\n \"y\":{\"signal\": \"centerY + (fontFactor * 20)\"},\n \"fontSize\":{\"signal\":\"fontFactor * 14\"},\n \"opacity\":{\"signal\":\" targetRule ? 1 : 0\"}\n }\n }\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"md`\nThe \"text\" in \"update\", the difference between the main value and the target value is displayed to the second decimal place. It then shows what percentage of the main value is relative to the target value.\n\n\"fill\": In the \"targetStatus\" condition, \"targetStatusColorScale\" is used to make it easier to understand whether the color is higher than, equal to, or not yet at the target value depending on the color.\n\nThe x and y coordinates are displayed shifted from the center of the gauge by the display of the main value. \nIn the next step, I will add a symbol before the difference between the main value and the target value, so I leave space on the left of the text.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"$58","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"step10 = md`---\n\n## Added a symbol of difference\n\nIn this step, I add a symbol to the left of the text that I added in the previous step. The following three patterns are displayed by value.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"$59","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"md`\n### Signals\nNothing to add\n\n### Data\nNothing to add\n\n### Scales\nNothing to add\n\n### Marks\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"md`\nI use the symbol type because I want to use circles and triangles.\n\n\"shape\": Select the shape of the symbol under the conditions.\n\n\"size\": Use Math Functions pow() to specify the symbol size.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"$5a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"step11 = md`---\n\n## Added a needle\nIn this step, I add a needle to the gauge.\n\n### Signals\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"([\n {\n \"name\": \"showNeedle\",\n \"value\": true\n },\n {\n \"name\": \"needleColor\",\n \"value\":\"#555\"\n },\n {\n \"name\": \"needleSize\",\n \"update\":\"innerRadius\"\n },\n {\n \"name\": \"alertStatus\",\n \"update\": \"((mainValue < minValue) || (maxValue < mainValue)) ? 1 : 0 \"\n },\n {\n \"name\": \"alertColor\",\n \"value\": \"#FF0000\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"md`\n\"showNeedle\": This signal is boolean and when true the needle is shown.\n\n\"needleColor\": The color of the gauge needle.\n\n\"needleSize\": The length of the needle is the same as the radius of the inner circle.\n\n\"alertStatus\": If the main value exceeds the range of the gauge, it goes into alert mode.\n\n\"alertColor\": The color of the alert(adapted to the color of the needle).\n\n### Data\nNothing to add\n\n### Scales\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"([\n {\n \"name\": \"needleScale\",\n \"type\": \"linear\",\n \"domain\":{\"data\": \"ticks\", \"field\":\"data_2\"},\n \"range\":[-90, 90]\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"md`\n### \"needleScale\": \nFor this scale I use a linear type.\n\n\"domain\": I use \"data_2\" of ticks data.\n\n\"range\": Where the main value is 50 is 0 degrees. The range from the minimum to 50 is -90 degrees, and the range from 50 to the maximum is 90 degrees.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"md`\n\n\n### Marks\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"([\n {\n \"type\": \"symbol\",\n \"name\": \"needle\",\n \"encode\": {\n \"enter\":{\n \"x\":{\"signal\":\"centerX\"},\n \"y\":{\"signal\":\"centerY\"}\n },\n \"update\":{\n \"shape\":{\"signal\": \"'M-2.5 -2.5 Q 0 0 2.5 -2.5 L 0 -' + toString(needleSize) + ' Z '\"},\n \"angle\":{\"signal\":\"usedValue\", \"scale\":\"needleScale\"},\n \"size\":{\"signal\":\"4\"},\n \"opacity\":{\"signal\": \"showNeedle ? 1 : 0\"},\n \"stroke\":{\"signal\":\"needleColor\"},\n \"fill\":{\"signal\": \"alertStatus ? alertColor : needleColor\"}\n }\n }\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"md`\n\"shape\": I used SVG path strings to draw the shape of the needle.\nFirst, draw a Bezier curve with three control points P0, P1, and P2.\nThis is the bottom part of the needle. And I wrote a line from point P2 to (P1, needle length). \"Z\" draws a straight line from the current position to the first position, and the needle is completed.\nSee [this page](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) for more details.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"$5b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"md`\n\"angle\": The needle points in the gauge with \"needleScale\" and the \"usedValue\" points to the minimum value if the main value is less than the minimum value and the maximum value if it is greater than the maximum value.\n\n\"fill\": \"alertStatus\" causes the color of the needle to be red when the needle is beyond the range of the gauge, otherwise it will show the normal needle color.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"$5c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"step12 = md`---\n\n## Added triangle as a guide to target value\n\nIn this step, a triangular symbol is displayed on the outer circle of the gauge to mark the target value.\n\n### Signals\nNothing to add\n\n### Data\nNothing to add\n\n### Scales\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"([\n {\n \"name\": \"targetScale\",\n \"type\": \"linear\",\n \"domain\":{\"data\":\"ticks\", \"field\":\"data_2\"},\n \"range\":[0, 180]\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"md`\nThe linear scale is a quantitative scale. As stated in the Vega documentation,\n\"The quantitative scale maps a continuous domain (number or date) to a continuous output range (pixel location, size, color).\"\n\n\"range\": \nThe angle of the triangle symbol is set to be in the range of 0 to 180 degrees with respect to the outer circle.\n\n### Marks\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"([\n {\n \"type\": \"symbol\",\n \"from\": {\"data\":\"gauge\"},\n \"encode\": {\n \"enter\":{\n \"shape\":{\"value\":\"triangle-right\"},\n \"fill\":{\"signal\":\"needleColor\"}\n },\n \"update\":{\n \"angle\":{\"scale\":\"targetScale\", \"signal\": \"targetValue\"},\n \"x\":{\"signal\":\"centerX - ((outerRadius + (outerRadius - innerRadius) * 0.15) * cos(((targetValue - minValue)/(maxValue - minValue)) * PI))\"},\n \"y\":{\"signal\":\"centerY - ((outerRadius + (outerRadius - innerRadius) * 0.15) * sin(((targetValue - minValue)/(maxValue - minValue)) * PI))\"},\n \"size\":{\"signal\":\"pow(fontFactor * 10, 2)\"},\n \"opacity\":{\"signal\":\"targetRule ? 1 : 0\"}\n }\n }\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"md`\n\"shape\": \nSet the shape of the symbol (triangle here).\n\n\"x\", \"y\": \nIf the radius is set to outerRadius, a slight shift will occur. Therefore, make sure that the symbol is displayed wherever it come on the outer circle.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"$5d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"step13 = md`---\n\n## Title added\n\nIn this step, I will place the title at the top of the gauge.\n\n### Signals\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"([\n {\n \"name\": \"title\",\n \"value\":\"Gauge title\"\n },\n {\n \"name\": \"showTitle\",\n \"value\":true\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"md`\n\"title\": \nDisplay title\n\n\"showTitle\": Set display or non-display of title\n\n### Data\nNothing to add\n\n### Scales\nNothing to add\n\n### Marks\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"([\n {\n \"type\": \"text\",\n \"name\": \"title\",\n \"encode\": {\n \"enter\":{ \n \"fill\":{\"value\":\"#000000\"},\n \"align\":{\"value\":\"center\"},\n \"baseline\":{\"value\":\"middle\"}\n },\n \"update\":{\n \"x\":{\"signal\":\"centerX\"},\n \"y\":{\"signal\":\"centerY - (outerRadius * 1.2)\"},\n \"text\":{\"signal\":\"title\"},\n \"fontSize\":{\"signal\":\"fontFactor * 15\"},\n \"opacity\":{\"signal\":\"showTitle ? 1 : 0\"}\n }\n }\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"md`\nThere is no specific explanation as it was covered in the previous tutorials. The position of the y-axis does not become responsive if the value is directly entered by the offset, so I paid attention only to that point.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"$5e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W5f","stdlib":"1"}} 42:null