unable to fetch data from skybiometry - javascript

I'm trying to fetch tid of a photo from SkyBiometry in a callback function as shown below, but it doesn't work.
function callback(data) {
drawFaces($("#conent_demo_image"), data.photos[0], true);
var tid = data.photos[0].tags[0].tid;
$("#tid").text(tid);
}
The html:
<div id="tid">
tid:
</div>

According to the source of SkyBiometry Demo it should be something like this:
{
"RawData": "...",
"Status": 0,
"photos": [{
"url": "https://skybiometry.com/Content/Samples/one_i.jpg",
"pid": "F#0ae0deaf6994b85e751943ae2166ec27_24412177fed2f",
"width": 480,
"height": 480,
"tags": [{
"tid": "TEMP_F#0ae0deaf6994b85e751943ae012b00ab_24412177fed2f_62.29_35.62_0_1",
"recognizable": true,
"uids": [],
"label": null,
"confirmed": false,
"manual": false,
"width": 20.83,
"height": 20.83,
"center": {"x": 62.29, "y": 35.62},
"eye_left": {"x": 68.54, "y": 30.42, "confidence": 57, "id": 449},
"eye_right": {"x": 56.67, "y": 30.42, "confidence": 55, "id": 450},
"mouth_center": {"x": 62.5, "y": 42.92, "confidence": 54, "id": 615},
"nose": {"x": 63.33, "y": 37.71, "confidence": 51, "id": 403},
"yaw": -6.0,
"roll": -1.0,
"pitch": 0.0,
"attributes": {
"face": {"value": true, "confidence": 70},
"gender": {"Value": 1, "value": "female", "confidence": 75},
"glasses": {"value": false, "confidence": 81},
"dark_glasses": {"value": false, "confidence": 58},
"smiling": {"value": true, "confidence": 100},
"age_est": {"value": 16, "confidence": 50},
"mood": {"Value": 2, "value": "happy", "confidence": 76},
"lips": {"Value": 1, "value": "parted", "confidence": 100},
"eyes": {"Value": 0, "value": "open", "confidence": 87},
"neutral_mood": {"value": false, "confidence": 0},
"anger": {"value": false, "confidence": 45},
"disgust": {"value": false, "confidence": 1},
"fear": {"value": false, "confidence": 0},
"happiness": {"value": true, "confidence": 76},
"sadness": {"value": false, "confidence": 2},
"surprise": {"value": false, "confidence": 6}
},
"points": null,
"similarities": null
}]
}],
"status": "success",
"usage": {
"ResetTime": "2015-11-07T20:02:54Z",
"used": 21633,
"reset_time_text": "Sat, 7 November 2015 20:02:54 +0000",
"remaining": 78367,
"namespace_used": 0,
"limit": 100000,
"namespace_remaining": 0,
"reset_time": 1446926574,
"namespace_limit": 0
},
"operation_id": "c869d8e95f364f979dd62277810b299c"
}

Related

Vega-lite: Line chart. start line mark from the y-axis domain line

I have a line graph.
I wanted the lines to start from the y-axis only. Currently the line is starting after a break.
This is the original graph:
https://vega.github.io/editor/#/gist/dcc9afece4dc6a5e89835650ec607280/og_chart.json
This is the chart in which I tried to get the change:
https://vega.github.io/editor/#/gist/e99bd5bd778e63af42bbbe6757301523/change_og_chart.json
This is the current chart
I would like to change this so the lines start from the y-axis only.
How could I shift the grid lines to the right to start with the y-axis domain line or is there a better way to start the line from the domain line.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 200,
"data": {
"values": [
{
"60": 100,
"90": 150,
"120": 200,
"-120": 10,
"-90": 15,
"-60": 30,
"type": "Mango"
},
{
"-120": 50,
"-90": 30,
"-60": 45,
"60": 90,
"90": 140,
"120": 190,
"type": "Apple"
}
]
},
"transform": [{"fold": ["-120", "-90", "-60", "60", "90", "120"]}],
"layer": [
{
"mark": "line",
"encoding": {
"x": {
"field": "key",
"type": "quantitative",
"sort": null,
"axis": {"tickCount": 10, "values": [-120,-90,-60,0,60,90,120],
"labelExpr": "abs(datum.value)"}
},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "type", "type": "nominal"}
}
},
{
"mark": {
"type": "rule",
"color": "maroon",
"size": 3,
"strokeDash": [6, 4]
},
"encoding": {"x": {"datum": 0, "bandPosition": 0}}
}
]
}
You are using discrete x-axis (bands) rather than continuous. I would do something like this.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 200,
"data": {
"values": [
{
"pre_120": 10,
"pre_90": 15,
"pre_60": 30,
"post_60": 100,
"post_90": 150,
"post_120": 200,
"type": "Mango"
},
{
"pre_120": 50,
"pre_90": 30,
"pre_60": 45,
"post_60": 90,
"post_90": 140,
"post_120": 190,
"type": "Apple"
}
]
},
"transform": [
{"fold": ["pre_120", "pre_90", "pre_60", "post_60", "post_90", "post_120"]}
],
"layer": [
{
"mark": "line",
"encoding": {
"x": {
"field": "key",
"bandPosition": 0,
"axis":{ "bandPosition":0, "labelOffset":-55},
"sort": [
"pre_120",
"pre_90",
"pre_60",
"0",
"post_60",
"post_90",
"post_120"
],
"scale": {
"domain": [
"pre_120",
"pre_90",
"pre_60",
"0",
"post_60",
"post_90",
"post_120"
]
}
},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "type", "type": "nominal"}
}
},
{
"mark": {
"type": "rule",
"color": "maroon",
"size": 3,
"strokeDash": [6, 4]
},
"encoding": {"x": {"datum": "0", "bandPosition": 0}}
}
]
}
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 200,
"data": {
"values": [
{
"60": 100,
"90": 150,
"120": 200,
"-120": 10,
"-90": 15,
"-60": 30,
"type": "Mango"
},
{
"-120": 50,
"-90": 30,
"-60": 45,
"60": 90,
"90": 140,
"120": 190,
"type": "Apple"
}
]
},
"transform": [{"fold": ["-120", "-90", "-60", "60", "90", "120"]}],
"layer": [
{
"mark": "line",
"encoding": {
"x": {
"field": "key",
"type": "quantitative",
"sort": null,
"axis": {"tickCount": 10, "values": [-120,-90,-60,0,60,90,120]}
},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "type", "type": "nominal"}
}
},
{
"mark": {
"type": "rule",
"color": "maroon",
"size": 3,
"strokeDash": [6, 4]
},
"encoding": {"x": {"datum": 0, "bandPosition": 0}}
}
]
}

Highcharts.js variable pie chart not rendering data correctly along percentage dataLabels

The issue is that the individual sliver radius' of this variable pie chart are not consistent with the the percentage labels (i.e. 25%, 50%, 75%, and 100%). The radius' all seem to be correctly calculated, but visually I cannot seem to figure out how to get them to match correctly with the label rings. It feels like some small config property that's padding the label rings incorrectly, or maybe I just have a fundamental misunderstanding of calculating these z values. I've been spinning my wheels on this for a while now, and any help would be amazing!
Also, I currently do not have enough SO street cred to post a photo of the chart, but I will try to quickly get 10 karma in order to post it.
Edit: Yay, I did it! I have street cred now.
A good example of the current problem would be to look at the largest orange sliver in the top-center/right. That sliver is associated with the "Intellectual Engagement" item in the legend that correctly shows it's z value as 85. The problem is that 85 shouldn't extend all the way up to the 100% radius label.
Highcharts.chart('container', {
"chart": {
"type": "variablepie",
"margin": [
0,
200,
20,
0
]
},
"title": {
"text": null
},
"tooltip": {
"enabled": true
},
"legend": {
"align": "right",
"verticalAlign": "middle",
"layout": "vertical",
"rtl": true,
"labelFormat": "{name} <span style=\"opacity: 0.4;\">({z})</span>",
"itemStyle": {
"fontSize": "11px"
}
},
"plotOptions": {
"series": {
"innerSize": 0,
"stacking": "normal",
"showInLegend": true,
"point": {
"events": {}
}
}
},
"series": [
{
"minPointSize": 40,
"innerSize": 0,
"sizeBy": "radius",
"name": "Subdomain score",
"dataLabels": {
"enabled": false
},
"tooltip": {
"headerFormat": "<span style=\"color:{point.color}\">●</span><span style=\"font-size: 12px;font-weight:bold;\"> {point.key}</span><br/>",
"pointFormat": "<br/>Score: {point.z}<br/>",
"valueDecimals": 2
},
"data": [
{
"name": "Learning Strategies",
"y": 12,
"z": 48.6
},
{
"name": "Intellectual Engagement",
"y": 12,
"z": 85
},
{
"name": "Effort Control",
"y": 12,
"z": 56.6
},
{
"name": "Attention",
"y": 12,
"z": 60
},
{
"name": "Autonomy",
"y": 12,
"z": 66.6
},
{
"name": "Social Cognition",
"y": 12,
"z": 46.6
},
{
"name": "Current Emotional Health",
"y": 12,
"z": 52
},
{
"name": "Self Compassion",
"y": 12,
"z": 68.6
},
{
"name": "Stress Resilience",
"y": 12,
"z": 56
},
{
"name": "Gratitude Positivity",
"y": 12,
"z": 60
},
{
"name": "Mindset",
"y": 12,
"z": 70
},
{
"name": "Social Engagement",
"y": 12,
"z": 45
},
{
"name": "Nutrition Knowledge",
"y": 10.285714285714286,
"z": 52
},
{
"name": "Nutrition",
"y": 10.285714285714286,
"z": 66.6
},
{
"name": "Activity Level",
"y": 10.285714285714286,
"z": 56
},
{
"name": "Aerobic Activity",
"y": 10.285714285714286,
"z": 53.4
},
{
"name": "Strength Training",
"y": 10.285714285714286,
"z": 70
},
{
"name": "Self Image",
"y": 10.285714285714286,
"z": 65
},
{
"name": "Sleep Habits",
"y": 10.285714285714286,
"z": 56
},
{
"name": "Long Term",
"y": 14.4,
"z": 57.2
},
{
"name": "Short Term",
"y": 14.4,
"z": 48.6
},
{
"name": "Reduce Sadness",
"y": 14.4,
"z": 51.4
},
{
"name": "Increase Happiness",
"y": 14.4,
"z": 60
},
{
"name": "Non Pecuniary",
"y": 14.4,
"z": 70
},
{
"name": "Connection",
"y": 14.4,
"z": 68
},
{
"name": "Compassion Empathy",
"y": 14.4,
"z": 76
},
{
"name": "Forgiveness",
"y": 14.4,
"z": 76
},
{
"name": "Purpose",
"y": 14.4,
"z": 58.2
},
{
"name": "Presence",
"y": 14.4,
"z": 72
}
]
},
{
"showInLegend": false,
"type": "variablepie",
"size": "100%",
"innerSize": "100%",
"minPointSize": 0,
"borderSize": 1,
"borderColor": "#000",
"dataLabels": {
"enabled": true,
"format": "100%",
"connectorPadding": 0,
"connectorWidth": 0,
"distance": -3
},
"enableMouseTracking": false,
"data": [
{
"y": 100,
"z": 0
}
],
"colors": [
"rgba(0,0,0,0)"
]
},
{
"showInLegend": false,
"type": "variablepie",
"size": "100%",
"innerSize": "75%",
"minPointSize": 0,
"dataLabels": {
"enabled": true,
"format": "75%",
"connectorPadding": 0,
"connectorWidth": 0,
"distance": -3
},
"enableMouseTracking": false,
"data": [
{
"y": 100,
"z": 75
}
],
"borderSize": 1,
"borderColor": "#000",
"colors": [
"rgba(0,0,0,0)"
]
},
{
"showInLegend": false,
"type": "variablepie",
"size": "100%",
"innerSize": "50%",
"minPointSize": 0,
"dataLabels": {
"enabled": true,
"format": "50%",
"connectorPadding": 0,
"connectorWidth": 0,
"distance": -3
},
"enableMouseTracking": false,
"data": [
{
"y": 100,
"z": 50
}
],
"borderSize": 1,
"borderColor": "#000",
"colors": [
"rgba(0,0,0,0)"
]
},
{
"showInLegend": false,
"type": "variablepie",
"size": "100%",
"innerSize": "25%",
"minPointSize": 0,
"dataLabels": {
"enabled": true,
"format": "25%",
"connectorPadding": 0,
"connectorWidth": 0,
"distance": -3
},
"enableMouseTracking": false,
"data": [
{
"y": 100,
"z": 25
}
],
"borderSize": 1,
"borderColor": "#000",
"colors": [
"rgba(0,0,0,0)"
]
}
],
"responsive": {
"rules": [
{
"condition": {
"maxWidth": 500
},
"chartOptions": {
"chart": {
"margin": [
0,
0,
300,
0
],
"height": 600
},
"legend": {
"align": "center",
"verticalAlign": "bottom",
"layout": "horizontal"
}
},
"_id": "highcharts-3oqxpuf-36"
}
]
},
"colors": [
"#ff5a00",
"#ff6a00",
"#ff7e00",
"#ff9400",
"#ffb100",
"#ffd200",
"#00396f",
"#004980",
"#005f92",
"#007aa9",
"#009cc1",
"#08c6de",
"#a11500",
"#b51800",
"#c01a00",
"#cb1c00",
"#d72100",
"#e43304",
"#f26b3e",
"#006e00",
"#008200",
"#009906",
"#1cb423",
"#68d566",
"#071d9c",
"#1224ac",
"#2733be",
"#4d52d1",
"#8e8ee7"
]
});
#container {
min-width: 300px;
max-width: 800px;
height: 500px;
margin: 1em auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>
<div id="container"></div>
The series don't have the same scale. Value 75 is the highest one and it is treated as 100%. Add the below properties to achieve the wanted result.
series: [{
minPointSize: 0,
zMax: 100,
...
}, ...]
Live demo: http://jsfiddle.net/BlackLabel/dcaqrgot/
API Refernece:
https://api.highcharts.com/highcharts/series.variablepie.minPointSize
https://api.highcharts.com/highcharts/series.variablepie.zMax

How can I sort data with Firebase?

I am creating a little React application about Pokemons. I have in DB informations about all of them (about 900+).
They all contain an id field, which is an integer from 1 to 900+.
But the problem is when I do a request like this :
firebase.database().ref(`mydb`).orderByChild('id').startAt(1).limitToFirst(limit).once('value')
The results are not correct: I have an id array like this: [9,1, 10, 6, 4]
Am I doing something wrong ?
Edit:
I add the result I got when I perform the request I wrote above, I added a custom_id field containing ids as strings, but I stille have an unordered result:
[
{
"base_experience": 239,
"custom_id": "009",
"height": 16,
"id": 9,
"is_default": true,
"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/9/encounters",
"name": "blastoise",
"order": 12,
"weight": 855
},
{
"base_experience": 64,
"custom_id": "001",
"height": 7,
"id": 1,
"is_default": true,
"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/1/encounters",
"name": "bulbasaur",
"order": 1,
"weight": 69
},
{
"base_experience": 39,
"custom_id": "010",
"height": 3,
"id": 10,
"is_default": true,
"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/10/encounters",
"name": "caterpie",
"order": 14,
"weight": 29
},
{
"base_experience": 240,
"custom_id": "006",
"height": 17,
"id": 6,
"is_default": true,
"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/6/encounters",
"name": "charizard",
"order": 7,
"weight": 905
},
{
"base_experience": 62,
"custom_id": "004",
"height": 6,
"id": 4,
"is_default": true,
"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/4/encounters",
"name": "charmander",
"order": 5,
"weight": 85
},
{
"base_experience": 142,
"custom_id": "005",
"height": 11,
"id": 5,
"is_default": true,
"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/5/encounters",
"name": "charmeleon",
"order": 6,
"weight": 190
},
{
"base_experience": 142,
"custom_id": "002",
"height": 10,
"id": 2,
"is_default": true,
"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/2/encounters",
"name": "ivysaur",
"order": 2,
"weight": 130
},
{
"base_experience": 63,
"custom_id": "007",
"height": 5,
"id": 7,
"is_default": true,
"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/7/encounters",
"name": "squirtle",
"order": 10,
"weight": 90
},
{
"base_experience": 236,
"custom_id": "003",
"height": 20,
"id": 3,
"is_default": true,
"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/3/encounters",
"name": "venusaur",
"order": 3,
"weight": 1000
},
{
"base_experience": 142,
"custom_id": "008",
"height": 10,
"id": 8,
"is_default": true,
"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/8/encounters",
"name": "wartortle",
"order": 11,
"weight": 225
}
]
You've not attached your database image, but with the order one thing is sure that these keys in your database are strings.
And when you order string data, it is ordered lexicographically.
So for numbers, this is the normal order:
1
9
10
But for strings, this is the normal order:
"9"
"1"
"10"
I don't think there is any operator in Firebase (nor in most other databases) to change this behaviour.
Instead, you will have to modify the data to get the behavior you want. So: store values that are in the order you need them when sorted lexicographically.
For numbers you can accomplish that by padding them with zeroes:
"001"
"009"
"010"
EDIT:
Now after Json, these values are stored in id field so the above thing does not apply to this.
You may however use a code like this, to do what you're trying:
mDatabase
.child("main_child")
.orderByChild("id")
.addValueEventListener(new ValueEventListener() {
public void onDataChange(DataSnapshot snapshot) {
for (DataSnapshot child: snapshot.getChildren()) {
System.out.println(child.getKey());
}
}
...

How to use the `rule` mark in vega

I'm having trouble using the rule mark in vega to create lines that span the entire width or height of a plot.
The documentation for rule is a bit sparse. I'm basing my example below on this google groups post.
{
"width": 250,
"height": 250,
"padding": "auto",
"scales": [
{"name": "xscale", "type": "linear", "range": "width", "domain": [0, 10]},
{"name": "yscale", "type": "linear", "range": "height", "domain": [0, 10]}
],
"axes": [
{"type": "x", "scale": "xscale"},
{"type": "y", "scale": "yscale"}
],
"marks": [
{
"type": "rule",
"properties": {
"enter": {
"x": {"scale": "xscale", "value": 0},
"x2": {"scale": "xscale", "group": "width"},
"y": {"scale": "yscale", "value": 5.5},
"stroke": {"value": "green"}
}
}
}
]
}
Seems straight-forward enough, but I'm getting an empty plot in the vega editor
The problem is width the specification of x2.
In this case it should be either:
"x2": {"scale": "xscale", "value": 10},
or
"x2": {"signal": "width"},
Making the full specification:
{
"width": 250,
"height": 250,
"padding": "auto",
"scales": [
{"name": "xscale", "type": "linear", "range": "width", "domain": [0, 10]},
{"name": "yscale", "type": "linear", "range": "height", "domain": [0, 10]}
],
"axes": [
{"type": "x", "scale": "xscale"},
{"type": "y", "scale": "yscale"}
],
"marks": [
{
"type": "rule",
"properties": {
"enter": {
"x": {"scale": "xscale", "value": 0},
"x2": {"signal": "width"},
"y": {"scale": "yscale", "value": 5.5},
"stroke": {"value": "green"}
}
}
}
]
}

How to set minimum x-Axis instead of 0 in Vega d3 charts

I am referring VEGA chart following code which is available in the preview. There "domain": [0, 3] is used set range in x and y axis. Here if i set [-0.5, 3], x axis will start from -0.5 but if i want to have positive number such as 0.5 it, x-axis will not start from that value instead it starts from 0. Is there any alternative way to sort this matter?
{
"name": "image",
"width": 200,
"height": 200,
"padding": {"left":30, "top":10, "bottom":30, "right":10},
"data": [
{
"name": "data",
"values": [
{"x":0.5, "y":0.5, "img":"data/ffox.png"},
{"x":1.5, "y":1.5, "img":"data/gimp.png"},
{"x":2.5, "y":2.5, "img":"data/7zip.png"}
]
}
],
"scales": [
{"name": "x", "domain": [0, 3], "range": "width"},
{"name": "y", "domain": [0, 3], "range": "height"}
],
"axes": [
{"type": "x", "scale": "x"},
{"type": "y", "scale": "y"}
],
"marks": [
{
"type": "image",
"from": {"data": "data"},
"properties": {
"enter": {
"url": {"field": "data.img"},
"width": {"value": 50},
"height": {"value": 50},
"x": {"scale": "x", "field": "data.x"},
"y": {"scale": "y", "field": "data.y"},
"align": {"value": "center"},
"baseline": {"value": "middle"}
},
"update": {
"opacity": {"value": 1.0}
},
"hover": {
"opacity": {"value": 0.5}
}
}
}
]
}
Add attribute "zero": false in scales
"scales": [
{"name": "x", "domain": [0, 3], "range": "width", "zero": false},
{"name": "y", "domain": [0, 3], "range": "height"}
]

Categories

Resources