Related
I came across this pie chart vega lite visualization:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple pie chart with labels.",
"data": {
"values": [
{"category": "a", "value": 4},
{"category": "b", "value": 6},
{"category": "c", "value": 10},
{"category": "d", "value": 3},
{"category": "e", "value": 7},
{"category": "f", "value": 8}
]
},
"encoding": {
"theta": {"field": "value", "type": "quantitative", "stack": true},
"color": {"field": "category", "type": "nominal", "legend": null}
},
"layer": [{
"mark": {"type": "arc", "outerRadius": 80}
}, {
"mark": {"type": "text", "radius": 90},
"encoding": {
"text": {"field": "category", "type": "nominal"}
}
}]
}
It renders as follows:
My data contains color key:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple pie chart with labels.",
"data": {
"values": [
{"category": "a", "value": 4, "color": "rgb(121, 199, 227)"},
{"category": "b", "value": 6, "color": "rgb(140, 129, 22)"},
{"category": "c", "value": 10, "color": "rgb(96, 43, 199)"},
{"category": "d", "value": 3, "color": "rgb(196, 143, 99)"},
{"category": "e", "value": 7, "color": "rgb(12, 103, 19)"},
{"category": "f", "value": 8, "color": "rgb(196, 243, 129)"}
]
},
"encoding": {
"theta": {"field": "value", "type": "quantitative", "stack": true},
"color": {"field": "color", "type": "nominal", "legend": null}
},
"layer": [{
"mark": {"type": "arc", "outerRadius": 80}
}, {
"mark": {"type": "text", "radius": 90},
"encoding": {
"text": {"field": "category", "type": "nominal"}
}
}]
}
I want to use the rgb() color value specified in this color key's value to color individual pie. I tried specifying this field in color channel: "field": "color".
"color": {"field": "color", "type": "nominal", "legend": null}
However, no use. It still renders the same as above. How can use color value specified in field's value as actual color?
PS: Link to above visualization.
The documentation says:
To directly encode the data value, the scale property can be set to null.
So you need to set the scale to null.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple pie chart with labels.",
"data": {
"values": [
{"category": "a", "value": 4, "color": "rgb(121, 199, 227)"},
{"category": "b", "value": 6, "color": "rgb(140, 129, 22)"},
{"category": "c", "value": 10, "color": "rgb(96, 43, 199)"},
{"category": "d", "value": 3, "color": "rgb(196, 143, 99)"},
{"category": "e", "value": 7, "color": "rgb(12, 103, 19)"},
{"category": "f", "value": 8, "color": "rgb(196, 243, 129)"}
]
},
"encoding": {
"theta": {"field": "value", "type": "quantitative", "stack": true},
"color": {"field": "color", "type": "nominal", "legend": null, "scale":null}
},
"layer": [
{"mark": {"type": "arc", "outerRadius": 80}},
{
"mark": {"type": "text", "radius": 90},
"encoding": {"text": {"field": "category", "type": "nominal"}}
}
]
}
This outputs:
I am trying to this query:
$order = Order::whereJsonContains('products->id',$serial_no)->first();
But it's not working please help me to solve this. Thanks in advance.
[
{
"id": 24,
"name": "test product",
"qnt": 3,
"sale_price": 18,
"buy_price": 14,
"stock": 3,
"total": 54,
"company": {
"id": 1,
"name": "test company",
"contact": "01521482467,5555555",
"address": "fdsa fdsa fdsa fdsa fdsa",
"is_active": 1
},
"brand": {
"id": 1,
"name": "Test Brand",
"is_active": 1
},
"category": {
"id": 1,
"name": "Test",
"is_active": 1
}
},
{
"id": 28,
"name": "test2",
"qnt": 1,
"sale_price": 18,
"buy_price": 12,
"stock": 1,
"total": 18,
"company": {
"id": 1,
"name": "test company",
"contact": "01521482467,5555555",
"address": "fdsa fdsa fdsa fdsa fdsa",
"is_active": 1
},
"brand": {
"id": 1,
"name": "Test Brand",
"is_active": 1
},
"category": {
"id": 2,
"name": "Test2",
"is_active": 1
}
}
]
Try these
$order = Order::whereJsonContains('products', ['id' => $serial_no])->first();
When your json is look like
{
"id": 24,
"name": "test product",
"qnt": 3,
"sale_price": 18,
"buy_price": 14,
"stock": 3,
"total": 54,
"company": {
"id": 1,
"name": "test company",
"contact": "01521482467,5555555",
"address": "fdsa fdsa fdsa fdsa fdsa",
"is_active": 1
}
Then your code will work properly.
But your JSON is in Array Like
[
{
"id": 24,
"name": "test product",
"qnt": 3,
"sale_price": 18,
"buy_price": 14,
"stock": 3,
"total": 54,
"company": {
"id": 1,
"name": "test company",
"contact": "01521482467,5555555",
"address": "fdsa fdsa fdsa fdsa fdsa",
"is_active": 1
}
]
So you can solve your problem using these syntax
$order = Order::whereJsonContains('field_name', ['object_key' => 'object_value'])->first();
Use get() instead of first() and try again.
#md abdul karim Please check your mysql version , well that mysql json_contains work with mysql 5.7 or grater version.
How can you retrieve and display the values used to compute the high of binned bars in a vega histogram?
In this d3 observable notebook I illustrate what want to achieve... When a bar is clicked, I update the selected_text variable with the bar's underlying values which were counted to give the bar's high.
The related question deals with the fold transform but in my case, I am looking for the inverse of the flatten transform.
Here is an illustration of the data transformation I am looking for. Going from:
[
{"name": "alpha", "data": 123, "bin0": 1, "bin1": 2},
{"name": "alpha", "data": 789, "bin0": 2, "bin1": 3},
{"name": "beta", "data": 456, "bin0": 2, "bin1": 3},
{"name": "beta", "data": 789, "bin0": 3, "bin1": 4},
{"name": "beta", "data": 0AB, "bin0": 3, "bin1": 4}
]
to
[
"bin0": 1, "bin1": 2, values: [{"name": "alpha", "data": 123}]
"bin0": 2, "bin1": 3, values: [{"name": "alpha", "data": 789},
{"name": "beta", "data": 456}]
"bin0": 3, "bin1": 4, values: [{"name": "beta", "data": 789},
{"name": "beta", "data": 0AB}]
]
I think this could be achieved if the concat expression was available to the groupby operator of the aggregation transforms, but it is not.
The "unflatten" transform can be roughly achieved using an aggregate transform with the values aggregate:
{
"data": {
"values": [
{"name": "alpha", "data": 123, "bin0": 1, "bin1": 2},
{"name": "alpha", "data": 789, "bin0": 2, "bin1": 3},
{"name": "beta", "data": 456, "bin0": 2, "bin1": 3},
{"name": "beta", "data": 789, "bin0": 3, "bin1": 4},
{"name": "beta", "data": 789, "bin0": 3, "bin1": 4}
]
},
"transform": [
{
"aggregate": [{"op": "values", "as": "values"}],
"groupby": ["bin0", "bin1"]
}
],
"mark": "point"
}
In the data viewer of the Vega Editor, you can see that the transformed data are:
[
{"bin0": 1, "bin1": 2,
"values": [{"name": "alpha", "data": 123, "bin0": 1, "bin1": 2}]},
{"bin0": 2, "bin1": 3,
"values": [{"name": "alpha", "data": 789, "bin0": 2, "bin1": 3},
{"name": "beta", "data": 456, "bin0": 2, "bin1": 3}]},
{"bin0": 3, "bin1": 4,
"values": [{"name": "beta", "data": 789, "bin0": 3, "bin1": 4},
{"name": "beta", "data": 0AB, "bin0": 3, "bin1": 4}]}
]
Given Jake's answer, here is a complete example in Vega of what I was aiming for.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A histogram of film ratings, modified to include null values.",
"width": 400,
"height": 200,
"padding": 5,
"autosize": {"type": "fit", "resize": true},
"signals": [
{"name": "binCount", "update": "(bins.stop - bins.start) / bins.step"},
{"name": "barStep", "update": "(width ) / (1 + binCount)"},
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "slice(datum.dlist,0,2)"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"data": [
{
"name": "table",
"values": [
{"name": "alpha", "data": "123"},
{"name": "alpha", "data": "789"},
{"name": "beta", "data": "456"},
{"name": "beta", "data": "789"},
{"name": "gamma", "data": "789"},
{"name": "beta", "data": "300"}
],
"transform": [
{"type": "extent", "field": "data", "signal": "extent"},
{
"type": "bin",
"signal": "bins",
"field": "data",
"extent": {"signal": "extent"},
"maxbins": 4
}
]
},
{
"name": "aggregat",
"source": "table",
"transform": [
{
"type": "aggregate",
"groupby": ["bin0", "bin1"],
"ops": ["values"],
"fields": ["undefined"],
"as": ["values"]
}
]
},
{
"name": "counts",
"source": "table",
"transform": [{"type": "aggregate", "groupby": ["bin0", "bin1"]},
{
"type": "lookup",
"from": "aggregat",
"key": "bin0",
"fields": ["bin0"],
"values": ["values"],
"as": ["dlist"]
}]
}
],
"scales": [
{
"name": "yscale",
"type": "linear",
"range": "height",
"round": true,
"nice": true,
"domain": {"fields": [{"data": "counts", "field": "count"}]}
},
{
"name": "xscale",
"type": "linear",
"range": [{"signal": "barStep "}, {"signal": "width"}],
"round": true,
"domain": {"signal": "[bins.start, bins.stop]"},
"bins": {"signal": "bins"}
}
],
"axes": [
{"orient": "bottom", "scale": "xscale", "tickMinStep": 0.5},
{"orient": "left", "scale": "yscale", "tickCount": 5, "offset": 5}
],
"marks": [
{
"type": "rect",
"from": {"data": "counts"},
"encode": {
"update": {
"tooltip" : { "signal": "tooltip"},
"x": {"scale": "xscale", "field": "bin0", "offset": 1},
"x2": {"scale": "xscale", "field": "bin1"},
"y": {"scale": "yscale", "field": "count"},
"y2": {"scale": "yscale", "value": 0},
"fill": {"value": "steelblue"}
},
"hover": {"fill": {"value": "firebrick"}}
}
}
]
}
I would like to configure the locale for a visualization in Vega. I need a German number format, which means that I need a comma (,) as decimal separator. Without any configuration in Vega, a decimal point (.) is used as separator.
Here is a complete working example which shows a simple bar chart. As you can see in the image below, I want to format the numbers on the y-Axis and the values inside the bars with two decimal places.
How can I set a specific locale (e.g. German) either globally for the whole visualization or for each number format separately? (I would prefer a global setting.)
(Note: You can use the Vega Editor to paste and try out my bar chart example.)
{
"width": 600,
"height": 300,
"padding": {"top": 10, "left": 35, "bottom": 30, "right": 10},
"data": [
{
"name": "table",
"values": [
{"x": 1, "y": 0.5},
{"x": 2, "y": 0.8},
{"x": 3, "y": 0.3},
{"x": 4, "y": 0.6}
]
}
],
"scales": [
{
"name": "x",
"type": "ordinal",
"range": "width",
"domain": {"data": "table", "field": "x"},
"padding": 0.1
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "table", "field": "y"}
}
],
"axes": [
{"type": "x", "scale": "x"},
{"type": "y", "scale": "y", "format": ".2f"}
],
"marks": [
{
"type": "rect",
"from": {"data": "table"},
"properties": {
"enter": {
"x": {"scale": "x", "field": "x"},
"width": {"scale": "x", "band": true, "offset": -1},
"y": {"scale": "y", "field": "y"},
"y2": {"scale": "y", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
}
}
},
{
"type": "text",
"from": {"mark": "bars"},
"properties": {
"enter": {
"y": {"field": "y", "offset": 10},
"x": {"field": "x"},
"dx": {"field": "width", "mult": 0.6},
"fill": {"value": "white"},
"align": {"value": "right"},
"baseline": {"value": "middle"},
"text": {"template": "{{datum.datum.y | number:'.2f'}}"}
}
}
}
]
}
I found a pull request in the Vega GitHub repository which allows to set the number and time locale. Also runtime changes are supported.
Example for changing the number format to German:
vg.util.format.numberLocale({
decimal: ",",
thousands: ".",
grouping: [3],
currency: ["", "\xa0€"]
});
Example for changing the time format to German:
vg.util.format.timeLocale({
dateTime: "%A, der %e. %B %Y, %X",
date: "%d.%m.%Y",
time: "%H:%M:%S",
periods: ["AM", "PM"], // unused
days: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
shortDays: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
months: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
shortMonths: ["Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"]
});
It took me a few weeks to master the Blender to json skinning export process, but the final result was working great prior three.js exporter v70.
I had to rebuild my dev machine and I installed Blender three.js exporter v70.
Today, I am doing a simple update to a blender file with skinning animations that was working fine prior the update and I am not able to get multiple animations to export as before.
I have tested Blender exporter with a simple object and animations and I get the same results.
Exporter output:
{
"metadata": {
"bones": 3,
"faces": 10,
"vertices": 12,
"generator": "io_three",
"normals": 12,
"type": "Geometry",
"version": 3
},
"name": "CubeGeometry.3",
"bones": [{
"pos": [0.0,0.0,-0.0],
"name": "center",
"rotq": [0,0,0,1],
"parent": -1
},{
"pos": [0.0,1.0,-0.0],
"name": "right",
"rotq": [0,0,0,1],
"parent": 0
},{
"pos": [0.0,1.0,-0.0],
"name": "left",
"rotq": [0,0,0,1],
"parent": 0
}],
"animation": {
"name": "right",
"length": 4.125,
"hierarchy": [{
"keys": [{
"scl": [1,1,1],
"pos": [0.0,0.0,-0.0],
"rot": [0.0,0.0,-0.0,1.0],
"time": 0.0
},{
"pos": [0.0,0.0,-0.0],
"rot": [0.0,0.0,-0.0,1.0],
"time": 2.0416666666666665
},{
"scl": [1,1,1],
"pos": [0.0,0.0,-0.0],
"rot": [0.0,0.0,-0.0,1.0],
"time": 4.125
}],
"parent": -1
},{
"keys": [{
"scl": [1,1,1],
"pos": [0.0,1.0,-0.0],
"rot": [0.0,0.0,-0.0,1.0],
"time": 0.0
},{
"pos": [0.0,1.0,-0.0],
"rot": [0.0,0.0,0.33748486638069153,0.9413309693336487],
"time": 2.0416666666666665
},{
"scl": [1,1,1],
"pos": [0.0,1.0,-0.0],
"rot": [0.0,0.0,-0.0,1.0],
"time": 4.125
}],
"parent": 0
},{
"keys": [{
"scl": [1,1,1],
"pos": [0.0,1.0,-0.0],
"rot": [-6.0461669172803476e-15,1.149220128782158e-11,0.00026304941275157034,0.9999613761901855],
"time": 0.0
},{
"pos": [0.0,1.0,-0.0],
"rot": [-6.0461669172803476e-15,1.149220128782158e-11,0.00026304941275157034,0.9999613761901855],
"time": 2.0416666666666665
},{
"scl": [1,1,1],
"pos": [0.0,1.0,-0.0],
"rot": [-6.0461669172803476e-15,1.149220128782158e-11,0.00026304941275157034,0.9999613761901855],
"time": 4.125
}],
"parent": 1
}],
"fps": 24
},
"faces": [33,0,1,2,3,0,1,2,3,33,4,7,6,5,4,5,6,7,33,0,4,5,1,0,4,7,1,33,1,5,6,2,1,7,6,2,33,6,7,11,10,6,5,8,9,33,4,0,3,7,4,0,3,5,33,8,10,11,9,10,9,8,11,33,7,3,9,11,5,3,11,8,33,2,6,10,8,2,6,9,10,33,3,2,8,9,3,2,10,11],
"vertices": [1.8709198236465454,-0.05566583573818207,-0.9999999403953552,1.8709198236465454,-0.055665746331214905,0.9999999403953552,-0.12908029556274414,-0.055665746331214905,0.9999998211860657,-0.12907981872558594,-0.05566583573818207,-1.0000003576278687,1.8709203004837036,1.9443342685699463,-0.9999995231628418,1.8709192276000977,1.9443342685699463,1.0000004768371582,-0.12908053398132324,1.9443342685699463,0.9999995827674866,-0.12908011674880981,1.9443342685699463,-1.0000001192092896,-1.9279574155807495,-0.055665984749794006,0.9999994039535522,-1.9279569387435913,-0.05566607415676117,-1.0000007152557373,-1.9279578924179077,1.9443340301513672,0.9999991655349731,-1.9279574155807495,1.9443340301513672,-1.0000004768371582],
"influencesPerVertex": 2,
"skinWeights": [1.0,0,1.0,0,1.0,0,1.0,0,1.0,0,1.0,0,1.0,0,1.0,0,1.0,0,1.0,0,1.0,0,1.0,0],
"normals": [0.5773491859436035,-0.5773491859436035,-0.5773491859436035,0.5773491859436035,-0.5773491859436035,0.5773491859436035,0.0,-0.7070833444595337,0.7070833444595337,0.0,-0.7070833444595337,-0.7070833444595337,0.5773491859436035,0.5773491859436035,-0.5773491859436035,0.0,0.7070833444595337,-0.7070833444595337,0.0,0.7070833444595337,0.7070833444595337,0.5773491859436035,0.5773491859436035,0.5773491859436035,-0.5773491859436035,0.5773491859436035,-0.5773491859436035,-0.5773491859436035,0.5773491859436035,0.5773491859436035,-0.5773491859436035,-0.5773491859436035,0.5773491859436035,-0.5773491859436035,-0.5773491859436035,-0.5773491859436035],
"skinIndices": [2,0,2,0,0,0,0,0,2,0,2,0,0,0,0,0,1,0,1,0,1,0,1,0]
}
Any idea what should I be doing to get multiple skinning animations working again?
Cordially,
j3zusla
Until r71 is released it is advised to use the dev version. Multiple animations have been restored plus numerous optimizations, features, and bug fixes have been addressed (specifically to animation exports).