I am trying to build an elementary plot showing proportion of energy source by continent. I've already cleaned up the data and uploaded a .csv file here : https://raw.githubusercontent.com/mkeutgen/dataviz_energy/main/prop_source_by_continent_2015
Yet when I try to import it in vega lite editor, it states that my csv is empty.
Here is the code I've written :
{
"data": {"url": "raw.githubusercontent.com/mkeutgen/dataviz_energy/main/prop_source_by_continent_2015"},
"mark": "bar",
"encoding": {
"x": {
"field": "continent",
"type": "nominal",
"domain":["Africa","Europe","Asia","North America","South America","Asia"],
"title": "Continent"
},
"y": {
"field":"prop",
"aggregate":"sum",
"type": "quantitative",
"stack": "normalize"
},
"color": {
"field": "share energy",
"type": "nominal",
"scale": {
"domain": ["coal_share_energy","gas_share_energy","nuclear_share_energy", "hydro_share_energy","renewables_share_energy","oil_share_energy"],
"range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"]
},
"title": "Weather type"
}
}
}
If you look in the Javascript console, you'll see the issue:
loader.js:175 GET https://vega.github.io/editor/raw.githubusercontent.com/mkeutgen/dataviz_energy/main/prop_source_by_continent_2015 404
You are attempting to load the dataset with a relative rather than absolute URL, which is returning a 404; you can fix this by adding https:// to the front of your URL.
Additionally, since your URL does not include a file extension, you must tell Vega-Lite that the data is CSV-formatted using a format specification. With these two changes, your chart works (open in editor):
{
"data": {
"url": "https://raw.githubusercontent.com/mkeutgen/dataviz_energy/master/prop_source_by_continent_2015",
"format": {"type": "csv"}
},
"mark": "bar",
"encoding": {
"x": {
"field": "continent",
"type": "nominal",
"domain":["Africa","Europe","Asia","North America","South America","Asia"],
"title": "Continent"
},
"y": {
"field":"prop",
"aggregate":"sum",
"type": "quantitative",
"stack": "normalize"
},
"color": {
"field": "share energy",
"type": "nominal",
"scale": {
"domain": ["coal_share_energy","gas_share_energy","nuclear_share_energy",
"hydro_share_energy","renewables_share_energy","oil_share_energy"],
"range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"]
},
"title": "Weather type"
}
}
}
The Url you have provided in your data config should also contain https:// and then need to specify the format of data. Refer the below config or try fiddle:
{
"data": {
"url": "https://raw.githubusercontent.com/mkeutgen/dataviz_energy/main/prop_source_by_continent_2015",
"format": {"type": "csv"}
},
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"mark": "bar",
"encoding": {
"x": {
"field": "continent",
"type": "nominal",
"domain": [
"Africa",
"Europe",
"Asia",
"North America",
"South America",
"Asia"
],
"title": "Continent"
},
"y": {
"field": "prop",
"aggregate": "sum",
"type": "quantitative",
"stack": "normalize"
},
"color": {
"field": "share energy",
"type": "nominal",
"scale": {
"domain": [
"coal_share_energy",
"gas_share_energy",
"nuclear_share_energy",
"hydro_share_energy",
"renewables_share_energy",
"oil_share_energy"
],
"range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"]
},
"title": "Weather type"
}
}
}
Related
As stated the map has a drop down menu that changes the display of the map, it selects different columns in the dataset. Ideally I would like to show a different "scheme" for input one and input two or what would also work in my case is to use "reverse" the "scale" encoding to reverse the color scheme for one of the two data columns being loaded
Code extract:
{"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"config": {
"background":"white",
"view": {"stroke": "trasparent"}},
"width": 700,
"height": 500,
"data": {
"url": "https://unpkg.com/world-atlas#1.1.4/world/110m.json",
"format": {
"type": "topojson",
"feature": "countries"}
},
"projection": {
"type": "naturalEarth2"},
"mark": {
"type": "geoshape",
"stroke": "rgb(50, 50, 50)",
"strokeWidth":0.3},
"transform": [
{"calculate":"parseInt(datum.id)", "as":"id_N"},
{
"lookup": "id_N",
"from": {
"key": "id",
"fields": ["alpha3", "name"],
"data": {"url": "data1"}}
},
{"lookup": "alpha3",
"from":{
"data":{
"url":"data2"},
"key": "ISO3",
"fields":["Vulnerability", "Gain"]
}
},
{"calculate": "datum.Vulnerability", "as": "Climate Vulnerability"},
{"calculate": "datum.Gain", "as": "Overall Vulnerability Index"},
{"calculate": "datum[Select]","as": "varSelected"},
],
"params": [
{"name": "Select",
"value": "Vulnerability",
"bind": {
"input": "select",
"options": [
"Climate Vulnerability",
"Overall Vulnerability Index"]}}],
"encoding": {
"color":{
"field":"varSelected",
"type":"quantitative",
"title": null,
"scale":{
"scheme": {"name": "turbo", "count":5}
}
},
"tooltip":[
{"field":"name", "title":"Country"},
{"field":"varSelected","title":"Score","type":"quantitative"}],
}
I have this bar chart that's made with Vega-lite (code and pic below).
But I want to customize the legend labels so that instead of videoGame it's Video Game and instead of tv its TV. Is there anyway to do this?
lineChart = vegalite ({
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 560,
"height": 200,
"data": {"values": chartData},
"mark": {"type": "bar"},
"encoding": {
"x": {"field": "year_reference", "type": "temporal", "axis": {"title": "Year", "grid": true}},
"y": {"field": "reference_count_total", "type": "quantitative", "axis": {"title": "References", "grid": true}},
"color": {
"field": "title_type",
"scale": {
"domain": [
"tv",
"movie",
"video",
"videoGame"
],
"range": [
"#9e9ac8",
"#74c476",
"#a6761d",
"#6baed6"
]
},
"legend": true,
"title": "Reference Type"
},
}
})
Just provide labelExpr in legend, where you can conditionally give the labels depending on your fields data.
Refer the below code or the chart in editor
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 560,
"height": 200,
"data": {
"values": [
{
"title_type": "tv",
"year_reference": "10-12-2012",
"reference_count_total": 10
},
{
"title_type": "movie",
"year_reference": "10-12-2012",
"reference_count_total": 10
},
{
"title_type": "video",
"year_reference": "10-12-2012",
"reference_count_total": 10
},
{
"title_type": "videoGame",
"year_reference": "10-12-2012",
"reference_count_total": 10
}
]
},
"mark": {"type": "bar"},
"encoding": {
"x": {
"field": "year_reference",
"type": "temporal",
"axis": {"title": "Year", "grid": true}
},
"y": {
"field": "reference_count_total",
"type": "quantitative",
"axis": {"title": "References", "grid": true}
},
"color": {
"field": "title_type",
"scale": {
"domain": ["tv", "movie", "video", "videoGame"],
"range": ["#9e9ac8", "#74c476", "#a6761d", "#6baed6"]
},
"legend": {
"labelExpr": "datum.label == 'tv' ? 'Tv' : datum.label == 'movie' ? 'Movie' :datum.label == 'video' ? 'Video' : 'Video Game'"
},
"title": "Reference Type"
}
}
}
Good afternoon.
I have required json, which contains the basic template for the layout of Adaptive Cards (bot framework).
Here's this json:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"type": "AdaptiveCard",
"speak": "",
"body": [
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "Все машины",
"weight": "bolder",
"isSubtle": false
},
{
"type": "TextBlock",
"text": "Внимание, вы вошли в режим тендера.",
"separator": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Подтвердить лот(ы)",
"data": {
"msteams": {
"type": "messageBack",
"displayText": "Идет подтверждение ваших лотов, ожидайте!",
"text": "/accept",
"value": "{\"x\": \"bfVal\", \"y\": \"from value\"}"
}
}
},
{
"type": "Action.Submit",
"title": "Отменить все лоты",
"data": {
"x": "123",
"msteams": {
"type": "messageBack",
"displayText": "Идет отменение ваших лотов, ожидайте!",
"text": "/cancel",
"value": "{\"bfKey\": \"bfVal\", \"conflictKey\": \"from value\"}"
}
}
}
]
}
I also have a loop that takes data from my source and forms another json from it.
try {
// Pull in the data from Microsoft Graph.
const client = new SimpleGraphClient(tokenResponse.token);
const me = await client.getList();
var i = 0;
while (i < me['value'].length) {
feed = {
"type": "ColumnSet",
"separator": true,
"columns": [
{
"type": "Column",
"width": 1,
"items": [
{
"type": "TextBlock",
"text": "Продукт",
"isSubtle": true
},
{
"type": "TextBlock",
"size": "extraLarge",
"color": "accent",
"text": me.value[i].fields.Good,
"spacing": "none"
},
{
"type": "TextBlock",
"text": "Дата: " + dateFormat(me.value[i].fields.ShipmentDateTime, 'dd-mm-yyyy'),
"spacing": "yes"
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": " "
},
{
"type": "Image",
"url": "https://png.pngtree.com/svg/20170614/engine_oil_410031.png",
"size": "medium",
"spacing": "yes"
},
{
"type": "TextBlock",
"text": " ID: " + me.value[i].fields.id,
"value": me.value[i].fields.id
}
]
},
{
"type": "Column",
"width": 1,
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "right",
"text": "RUB",
"isSubtle": true
},
{
"type": "TextBlock",
"horizontalAlignment": "right",
"size": "extraLarge",
"color": "accent",
"text": me.value[i].fields.PricePerTon,
"spacing": "none"
},
{
"type": "Input.Toggle",
"title": "Приобрести лот",
"valueOn": "true",
"valueOff": "false",
"id": "buyGood",
"spacing": "yes"
}
]
}
]
}
tender.body.push(feed);
i++;
}
Then I combine these json.
This works well, but when you retrieve the data again, the data is doubled.
How can this be resolved?
Thanks in advance.
It looks like every time you create a new card, you are appending the JSON object you created in the while loop to your required JSON object. Consequently, the next time you try to create a new card, the data from the previous request is still stored in your required JSON object. To avoid this, create a copy of the required JSON Object and store it in a different variable before your while loop. You can use JSON.parse(JSON.stringify(obj)) to create a copy of a JSON Object.
Your code should look something like this:
// create a copy of the required JSON Object
// and store it in a new variable
const card = JSON.parse(JSON.stringify(tender));
var i = 0;
while (i < me['value'].length) {
let feed = {
"type": "ColumnSet",
"separator": true,
...
}
// push feed to `card` instead of `tender`
card.body.push(feed);
i++;
}
...
// send `card` to user instead of `tender`
await turnContext.sendActivity({
text: "Double Data Card",
attachments: [CardFactory.adaptiveCard(card)]
});
In loopback I have defined two models with a double many-to-many relationship as follows:
action.json:
{
"name": "Action",
"base": "PersistedModel",
"idInjection": true,
"options": {
"validateUpsert": true
},
"properties": {
"text": {
"type": "string",
"required": true
}
},
"validations": [],
"relations": {
"benchmark": {
"type": "hasAndBelongsToMany",
"model": "Course",
"foreignKey": "benchmark"
},
"main": {
"type": "hasAndBelongsToMany",
"model": "Course",
"foreignKey": "main"
}
},
"acls": [],
"methods": {}
}
course.json:
{
"name": "Course",
"base": "TrashModel",
"idInjection": true,
"options": {
"validateUpsert": true
},
"properties": {
"name": {
"type": "string",
"required": true
}
},
"validations": [],
"relations": {
"benchmark": {
"type": "hasAndBelongsToMany",
"model": "Action",
"foreignKey": "benchmark"
},
"main": {
"type": "hasAndBelongsToMany",
"model": "Action",
"foreignKey": "main"
}
},
"acls": [],
"methods": {}
}
Now when I try to create a relation between an action model and a course model with the following PUT request:
http://localhost:3000/api/courses/57331a4eeff440cb02c886ae/benchmark/rel/5731d60da2c6d238e3c3d9b3
Then when I request the course model with the related action models included with the following GET request:
http://localhost:3000/api/courses/57331a4eeff440cb02c886ae?filter=%7B%22include%22%3A%5B%22benchmark%22%2C%22main%22%5D%7D
I get:
{
"name": "Introduction Lessons",
"id": "57331a4eeff440cb02c886ae",
"benchmark": [{
"text": "text here",
"id": "5731d60da2c6d238e3c3d9b3"
}],
"main": [{
"text": "text here",
"id": "5731d60da2c6d238e3c3d9b3"
}]
}
So apparently the action is now attached through both the benchmark as the main relation. How did this happen? Do I setup my models wrong?
From what I understand, when you use hasAndBelongsToMany relashionship, loopback uses a through table which it manages automatically for you.
I believe by default it calls itself From_modelTo_model. In order to have two such relashion you need to tell loopback to manage it differently otherwise they use the same through table.
Try with through option such as
Action
"benchmark": {
"type": "hasAndBelongsToMany",
"model": "Course",
"foreignKey": "benchmark",
"through":"ActionCourseBenchmark"
},
"main": {
"type": "hasAndBelongsToMany",
"model": "Course",
"foreignKey": "main",
"through":"ActionCourseMain"
}
Course
"benchmark": {
"type": "hasAndBelongsToMany",
"model": "Action",
"foreignKey": "benchmark",
"through":"ActionCourseBenchmark"
},
"main": {
"type": "hasAndBelongsToMany",
"model": "Action",
"foreignKey": "main",
"through":"ActionCourseMain"
}
see this github issue for more details
I am having trouble with getting a value from inside of a JSON file, which has been retrieved from the Steam API (http://steamcommunity.com/dev).
The problem occurs when I attempt to print the data, the Node.js file code is below:
var data = JSON.parse(body); // Stores the JSON data which has been retrieved
console.log(data.result.toString(350462890).market_hash_name); // Attempts to grab the value of the market_hash_name from the JSON data and display it to screen
I get the following response: "undefined".
JSON data used below:
{
"result": {
"350462890": {
"icon_url": "fWFc82js0fmoRAP-qOIPu5THSWqfSmTELLqcUywGkijVjZYMUrsm1j-9xgEObwgfEh_nvjlWhNzZCveCDfIBj98xqodQ2CZknz5-OOqhNQh0fTvSAK5KVPAoywXpDS4n5YliBtazruNQfgrssNfPN-IqYtkdSpTZU_OCYAir70luiaAPfZOIqHznw223bZvDH3kW",
"icon_url_large": "fWFc82js0fmoRAP-qOIPu5THSWqfSmTELLqcUywGkijVjZYMUrsm1j-9xgEObwgfEh_nvjlWhNzZCveCDfIBj98xqodQ2CZknz5-OOqhNQh0fTvSAK5KVPAoywXpDS4n5fhvVcWx8vUHe126vYrANLYvNI1FG5LWCPfXM1304048hqALKpffqSu9jyvoMjgCRVO1rexMsCC1",
"icon_drag_url": "",
"name": "Dual Berettas | Panther",
"market_hash_name": "Dual Berettas | Panther (Field-Tested)",
"market_name": "Dual Berettas | Panther (Field-Tested)",
"name_color": "D2D2D2",
"background_color": "",
"type": "Mil-Spec Grade Pistol",
"tradable": "1",
"marketable": "1",
"commodity": "0",
"fraudwarnings": "",
"descriptions": {
"0": {
"type": "html",
"value": "Exterior: Field-Tested",
"app_data": ""
},
"1": {
"type": "html",
"value": " ",
"app_data": ""
},
"2": {
"type": "html",
"value": "Firing two large-mag Berettas at once will lower accuracy and increase load times. On the bright side, you'll get to fire two large-mag Berettas at once. It has been painted in a black, grey and red color scheme.",
"app_data": ""
},
"3": {
"type": "html",
"value": " ",
"app_data": ""
},
"4": {
"type": "html",
"value": "The Arms Deal 3 Collection",
"color": "9da1a9",
"app_data": {
"def_index": "65535",
"is_itemset_name": "1"
}
},
"5": {
"type": "html",
"value": " ",
"app_data": ""
}
},
"owner_descriptions": "",
"actions": {
"0": {
"name": "Inspect in Game...",
"link": "steam://rungame/730/76561202255233023/+csgo_econ_action_preview%20S%owner_steamid%A%assetid%D14429613083935122456"
}
},
"market_actions": {
"0": {
"name": "Inspect in Game...",
"link": "steam://rungame/730/76561202255233023/+csgo_econ_action_preview%20M%listingid%A%assetid%D14429613083935122456"
}
},
"tags": {
"0": {
"internal_name": "CSGO_Type_Pistol",
"name": "Pistol",
"category": "Type",
"category_name": "Type"
},
"1": {
"internal_name": "weapon_elite",
"name": "Dual Berettas",
"category": "Weapon",
"category_name": "Weapon"
},
"2": {
"internal_name": "set_weapons_iii",
"name": "The Arms Deal 3 Collection",
"category": "ItemSet",
"category_name": "Collection"
},
"3": {
"internal_name": "normal",
"name": "Normal",
"category": "Quality",
"category_name": "Category"
},
"4": {
"internal_name": "Rarity_Rare_Weapon",
"name": "Mil-Spec Grade",
"category": "Rarity",
"color": "4b69ff",
"category_name": "Quality"
},
"5": {
"internal_name": "WearCategory2",
"name": "Field-Tested",
"category": "Exterior",
"category_name": "Exterior"
}
},
"classid": "350462890"
},
"success": true
}
}
So does anyone have any idea how I can return the market_hash_name? also please take note, I am fairly new to using Node.js.
data.result['350462890'].market_hash_name