I'm trying to use d3.csv.parse(string) as documented https://d3-wiki.readthedocs.io/zh_CN/master/CSV/#parse
I've installed "d3": "5.12.0" but I find that with
import * as d3 from "d3";
d3.csv.parse
is undefined. What version of d3 do those docs cover?
After some searching I find https://github.com/d3/d3-dsv and d3.csvParse but this doesn't work as I'm expecting.
const c = "Name,Count,Total Area\nFoo,6.0,0.13\nBar,8.0,0.24"
d3.csvParse(c, data => console.log(data))
I was expecting an array of objects, but instead I just get the first object
{Count: "6.0", Name: "Foo", Total Area: "0.13"}
Any ideas what I'm doing wrong here,
Thanks.
OK, so it seems that d3.csvParse() doesn't behave like d3.csv() and the second function argument is not a callback
https://github.com/d3/d3-dsv/blob/v1.1.1/README.md#dsv_parse
console.log( d3.csvParse(c))
[0: {Name: "Foo", Count: "6.0", Total Area: "0.13"}
1: {Name: "Bar", Count: "8.0", Total Area: "0.24"}]
Sorry for the noise!
Related
I am using ObservableHQ and vega lite API to do data visualizations and have faced a problem I can't figure out.
The problem is that, I would like to access data object from the following data structure,
Array
Array
Array
Item
Item
Array
As you can see in my bad drawing, I have a multidimensional array and would like to access a specific array from the main array. How can I do that using Vegalite API?
vl.markCircle({
thickness: 4,
bandSize: 2
})
.data(diff[0])
.encode(
vl.x().fieldQ("mins").scale({ domain: [-60, 60] }),
vl.color().fieldN('type').scale({ range: ['#636363', '#f03b20'] }),
)
.config({bandSize: 10})
.width(600)
.height(40)
.render()
Thank you,
Based on your comments, I’m assuming that you’re trying to automatically chart all of the nested arrays (separately), not just one of them. And based on your chart code, I’m assuming that your data looks sorta like this:
const diff = [
[
{ mins: 38, type: "Type B" },
{ mins: 30, type: "Type B" },
{ mins: 28, type: "Type A" },
…
],
[
{ mins: 20, type: "Type B" },
{ mins: 17, type: "Type A" },
{ mins: 19, type: "Type A" },
…
],
…
];
First, flatten all the arrays into one big array, and record which array each came from with a new array property on the item object, with flatMap. If each child array represents, say, a different city, or a different year, or a different person collecting the data, you could replace array: i with something more meaningful about the data.
const flat = diff.flatMap((arr, i) => arr.map((d) => ({ ...d, array: i })));
Then use Vega-Lite’s “faceting” (documentation, Observable tutorial and examples) to make split the chart into sections, one for each value of array: i, with shared scales. This just adds one line to your example:
vl
.markCircle({
thickness: 4,
bandSize: 2
})
.data(flat)
.encode(
vl.row().fieldN("array"), // this line is new
vl
.x()
.fieldQ("mins")
.scale({ domain: [-60, 60] }),
vl
.color()
.fieldN("type")
.scale({ range: ["#636363", "#f03b20"] })
)
.config({ bandSize: 10 })
.width(600)
.height(40)
.render()
Here’s an Observable notebook with examples of this working. As I show there at the bottom, you can also map over your array to make a totally separate chart for each nested array.
I think Karate documentation is great and I have tried to read as much as possible but this one little thing is stumping me right now. I think what I am trying to do is fairly straightforward but I am failing at it miserably. I have a JSON object here based on the example in the docs but slightly modified:
* def cat =
"""
[
{
name: 'Billie',
kittens: [
{ id: 23, nickName: 'Bob' },
{ id: 42, nickName: 'Wild' }
]
},
{
name: 'Billie2',
kittens: [
{ id: 233, nickName: 'Bob2' },
{ id: 422, nickName: 'Wild2' }
]
}
]
"""
All I want to find is the value of nickName when id is 233. (In this example the answer is Bob2)
I tried this:
get[0] cat.kittens[?(#.id==233)]
But I think I am missing something.
What is tripping me is when there are multiple name and kittens, as opposed to a single set in the example given in the documentation website.
I apologize as the answer for this is pretty straightforward, but any hint in the right direction will get greatly appreciated. Thank you!
You are close. When there is an array involved, typically [*] is needed.
* def temp1 = get[0] cats[*].kittens[?(#.id==233)]
* match temp1.nickName == 'Bob2'
Note that this will also work:
* def temp2 = get[0] cats..kittens[?(#.id==233)]
* match temp2.nickName == 'Bob2'
I think Karate documentation is great and I have tried to read as much as possible but this one little thing is stumping me right now. I think what I am trying to do is fairly straightforward but I am failing at it miserably. I have a JSON object here based on the example in the docs but slightly modified:
* def cat =
"""
[
{
name: 'Billie',
kittens: [
{ id: 23, nickName: 'Bob' },
{ id: 42, nickName: 'Wild' }
]
},
{
name: 'Billie2',
kittens: [
{ id: 233, nickName: 'Bob2' },
{ id: 422, nickName: 'Wild2' }
]
}
]
"""
All I want to find is the value of nickName when id is 233. (In this example the answer is Bob2)
I tried this:
get[0] cat.kittens[?(#.id==233)]
But I think I am missing something.
What is tripping me is when there are multiple name and kittens, as opposed to a single set in the example given in the documentation website.
I apologize as the answer for this is pretty straightforward, but any hint in the right direction will get greatly appreciated. Thank you!
You are close. When there is an array involved, typically [*] is needed.
* def temp1 = get[0] cats[*].kittens[?(#.id==233)]
* match temp1.nickName == 'Bob2'
Note that this will also work:
* def temp2 = get[0] cats..kittens[?(#.id==233)]
* match temp2.nickName == 'Bob2'
I'm trying to take data in from a JSON file and link it to my geoJSON file to create a choropleth map with the county colours bound to the "amount" value but also I would like a corresponding "comment" value to be bound to a div for when I mouseover that county.
My code at http://bl.ocks.org/eoiny/6244102 will work to generate a choropleth map when my counties.json data is in the form:
"Carlow":3,"Cavan":4,"Clare":5,"Cork":3,
But things get tricky when I try to use the following form:
{
"id":"Carlow",
"amount":11,
"comment":"The figures for Carlow show a something." },
I can't get my head around how join the "id": "Carlow" from counties.json and "id": "Carlow" path created from ireland.json, while at the same time to have access to the other values in counties.json i.e. "amount" and "comment".
Apologies for my inarticulate question but if anyone could point me to an example or reference I could look up that would be great.
I would preprocess the data when it's loaded to make lookup easier in your quantize function. Basically, replace this: data = json; with this:
data = json.reduce(function(result, county) {
result[county.id] = county;
return result;
}, {});
and then in your quantize function, you get at the amounts like this:
function quantize(d) {
return "q" + Math.min(8, ~~(data[d.id].amount * 9 / 12)) + "-9";
}
What the preprocessing does is turn this array (easily accessed by index):
[{id: 'xyz', ...}, {id: 'pdq', ...}, ...]
into this object with county keys (easily accessed by county id):
{'xyz': {id: 'xyz', ...}, 'pdq': {id: 'pdq', ...}, ...}
Here's the working gist: http://bl.ocks.org/rwaldin/6244803
I wanted to create a 3 level dijit.Tree, like that:
-root
|
--level1
|
--level2
I thought it would be really simple since there's a code snippet in this tutorial (example 1). But somehow I manage to fail.
This is my dojo code (variable names are in Polish, I hope it's not a problem):
modelRaportow = new dijit.tree.ForestStoreModel({
store: new dojo.data.ItemFileReadStore({
url: "logika/getJSON/getStatusRaportow.php"
}),
query: {typ: 'galaz'},
rootId: 'statusRaportuRoot',
rootLabel: 'Status raportu',
childrenAttrs: 'raporty'
});
drzewoRaportow = new dijit.Tree({
openOnClick: true,
model: modelRaportow,
showRoot: true,
persist: false
}, "target-status-raportow");
drzewoRaportow.startup();
This is my JSON returned by logika/getJSON/getStatusRaportow.php (again, names are in Polish):
{
"identifier":"id",
"label":"status",
"items": [
{"id":0,"status":"zaakceptowane","typ":"galaz"
"raporty":[{"_reference":1},{"_reference":2},{"_reference":3}]},
{"id":1,"data":"24-10-2011","wykonujacy":"cblajszczak","idKlienta":3,"status":"Raport0","typ":"lisc"},
{"id":2,"data":"24-10-2011","wykonujacy":"cblajszczak","idKlienta":1,"status":"Raport1","typ":"lisc"},
{"id":3,"data":"24-10-2011","wykonujacy":"cblajszczak","idKlienta":3,"status":"Raport2","typ":"lisc"},
{"id":4,"status":"odrzucone","typ":"galaz"
"raporty":[{"_reference":5},{"_reference":6},{"_reference":7}]},
{"id":5,"data":"24-10-2011","wykonujacy":"cblajszczak","idKlienta":1,"status":"Raport3","typ":"lisc"},
{"id":6,"data":"24-10-2011","wykonujacy":"cblajszczak","idKlienta":3,"status":"Raport4","typ":"lisc"},
{"id":7,"data":"24-10-2011","wykonujacy":"cblajszczak","idKlienta":3,"status":"Raport5","typ":"lisc"}
]}
And finally, this is what I'm getting: img - root node and lvl 1 nodes returned by query, no child nodes.
The question is - where is my mistake? Can anyone see it?
You have no comma between the typ and raporty value pair.
I have a partial answer: by stepping through the code in a similar situation, I've discovered that it expects childrenAttrs to be an array, so it should be:
childrenAttrs: ['raporty']
but I still cannot get the third level to appear in my case.