I'd like to use a csv file instead of a json file in this example:
https://bl.ocks.org/mbostock/4339083
Any idea for loading a csv instead of a json file?
The problem here is way more complicated than it seems, and I suggest you that you leave the data file as JSON. The reason is this: the JSON file in your question contains nested data.
Here is an explanation:
Apparently, the only difference between loading a CSV file and loading a JSON file is the request function:
d3.json("data.json", function(data){
//code here
)}
... for a JSON and:
d3.csv("data.csv", function(data){
//code here
)}
... for a CSV.
But there is more. Besides the fact that d3.csv accepts an accessor (row) function and d3.json does not, d3.json loads the data as it is. On the other hand, d3.csv parses the file according to the columns, creating an array of objects.
Thus, if you have this CSV:
city,population,area
New York,3400,210
Melbourne,1200,350
Tokyo,5200,125
Paris,800,70
... it will be parsed to this array:
[{
"city": "New York",
"population": "3400",
"area": "210"
}, {
"city": "Melbourne",
"population": "1200",
"area": "350"
}, {
"city": "Tokyo",
"population": "5200",
"area": "125"
}, {
"city": "Paris",
"population": "800",
"area": "70"
}]
And here comes the problem: As you can see, there is no nested data in the array created by d3.csv. All the objects are side by side in the array.
However, the data object in Bostock's code you linked is way different:
{
"name": "flare",
"children": [
{
"name": "analytics",
"children": [
{
"name": "cluster",
"children": [
{"name": "AgglomerativeCluster", "size": 3938},
{"name": "CommunityStructure", "size": 3812},
//...
As you can see, you have arrays inside objects inside arrays inside objects...
So, to recreate the nested JSON in your question, you'll have to create an additional column, specifying who is parent of who and who is child of who:
name,value,parentOf
foo,42,bar
bar,53,baz
...
Then, after parsing this CSV, you'll have to stratify it, using stratify():
var nestedData = d3.stratify()
.id(function(d) { return d.name; })
.parentId(function(d) { return d.parentOf; })
(data);
As you can see, those are complicated steps.
Therefore, as a general rule: if you have nested data as a JSON file, just use d3.json, which loads the data as it is.
You can use d3.csv() instead of d3.json(). See D3's documentation.
Related
Basically, I have a really large JSON file I need to parse, and while searching, I came across this answer.
The only problem is I don't know how to format my JSON array into a single object per line. Is there a straightforward Javascript/Ubuntu way to do this? (I've used jq in the past and it's pretty good for minifying json files, for example)
My JSON file looks something like this
[
{
"country":"monrovia",
"street" :"grove street",
"where" : "home"
},
{
"country": "uk",
"street": "diagon alley",
"where": "mystery"
},
{
...
}
]
But I need it to look like this
[{"country":"monrovia", "street": "grove street", "where": "home" },
{"country": "uk", "street": "diagon alley", "where": "mystery happens"},
{...}]
What you can do is parse the json array by using the JSON.stringify Method like so
// This can be the array of json
var obj = {
"name": "John Doe",
"age": 29,
"location": "Denver Colorado",
};
// stringify the json
var result = JSON.stringify(obj);
// see the output
console.log(result);
jq to the rescue once again! Here is what I needed.
And it's apparently referred to as JSONL.
An even better option is 'new-line delimited JSON' (ndjson). The Javascript implementation of the same (with streams!) is here
I want to convert the data from an Excel file to a JSON file. However, I'm not sure about the design of my JSON code (i.e. is it organized in a proper way in order to process it easily?)
I will use this JSON file with D3.js.
This a small part of my Excel file:
I'd like to convert this data into a JSON file in order to use it with D3.js. This is what I have so far:
So my question is: is this a good design (way) for organizing the data in order to use it with D3.js?
This is a sample output:
Thanks in advance!
This is a somewhat subjective question, but from my experience, there is a better way:
Since you're working in d3, you're probably doing something like this:
d3.selectAll('div')
.data(entities)
.enter()
.append('div')
...
So you want entities to be an array. The question is what are your entities? Is there a view where entities are all the countries in the world? Is there a view where entities are all the countries plus all the regions plus the whole world? Or, are all the views going to be simply all the countries in a selected region, not including the region itself?
The unless the JSON structure you're proposing matches the combinations of entities that you plan to display, your code will have to do a bunch of concat'ing and/or filtering of arrays in order to get a single entities array that you can bind to. Maybe that's ok, but it will create some unnecessary amount of coupling between your code and the structure of the data.
From my experience, it turns out that the most flexible way (and also probably the simplest in terms of coding) is to keep the hierarchy flat, like it is in the excel file. So, instead of encoding regions into the hierarchy, just have them in a single, flat array like so:
{
"immigration": [
{
"name": "All Countries"
"values: [
{ "Year": ..., "value": ... },
{ "Year": ..., "value": ... },
...
]
},
{
"name": "Africa"
"values: [
{ "Year": ..., "value": ... },
{ "Year": ..., "value": ... },
...
]
},
{
"name": "Eastern Africa"
"continent": "Africa"
"values": [
{ "Year": ..., "value": ... },
{ "Year": ..., "value": ... },
...
]
},
{
"name": "Burundi"
"continent": "Africa"
"region": "East Africa"
"values": [
{ "Year": ..., "value": ... },
{ "Year": ..., "value": ... },
...
]
},
{
"name": "Djibouti"
"continent": "Africa"
"region": "East Africa"
"values": [
{ "Year": ..., "value": ... },
{ "Year": ..., "value": ... },
...
]
},
...
]
}
Note that even though the array is flat, there is still a hierarchy here -- the region and sub-region properties.
You'll have to do a bit of filtering to extract just the countries/regions you want to show. But that's simpler than traversing the hierarchy you're proposing:
var africanEntities = data.immigration.filter(function(country) {
return country.continent == "Africa";
}); // Includes the region "East Africa"
var justCountries = data.immigration.filter(function(country) {
return country.continent != null && country.region != null;
});
Also, d3 has the awesome d3.nest(), which lets you turn this flat data into hierarchical one with little effort:
var countriesByContinent = d3.nest()
.key(function(d) { return d.continent; })
.map(data.immigration);
var africanEntities = countriesByContinent['Africa'];
Hope that helps....
I have an object, simulating a Cassandra database, where I retrieve its data to display it on a AngularJs app. Unfortunately, I can't make a premade header for my array because the keys are subject to change, depending on the data I'll retrieve (Here's an example of what I'm talking about):
var columnFamilyData = {
"DocInfo": {
"4c58abf5": {
"name": "coucou",
"extension": "pdf",
"size": 8751,
"type": "facture",
"repository": "archive"
},
"8cd524d7a45de": {
"name": "gerard",
"extension": "xml",
"size": 48734,
"type": "compta",
},
"5486d684fe54a": {
"name": "splendide",
"extension": "tiff",
"type": "photos",
"METADATA_A": "jambon"
}
},
"Base": {
"BASE_A": {
"name": "BASE_A",
"description": "That base is truly outrageous, they are truly, truly outrageous",
"baseMetadata_1": "METADATA_A",
"baseMetadata_2": "METADATA_B",
"baseMetadata_3": "METADATA_C"
},
},
}
As you can see, the arrays in DocInfo and Base are different, data and keys.
What I want to do is being able to use my ng-repeat to create a <th> line with the key name (for instance, Extension, of METADATA_A), but only once, since ng-repeat may duplicate this information.
I'm also providing a JSFiddle, if it can help any of you to understand my goal.
Thanks for reading and/or answering, have a great day.
Question is not totally clear, but it seems like you want "(key, val) in object" syntax.
ng-repeat="(name, age) in {'adam':10, 'amalie':12}"
http://bl.ocks.org/mbostock/4339083 am using this
instead of d3.json("/d/4063550/flare.json", function(error, flare) {
how do i make it use the json file within the html, like say i have
var jsonData = [{
"name": "A",
"children": [
{"name": "A1", "children": [{"name": "A12"},{"name": "A13"},{"name": "A14"}] },
{"name": "A2", "children": [{"name": "A22"},{"name": "A23"},{"name": "A24"}] }
]
}];
and i want to use this instead of an external json file, how do i achieve this ?
Solution:
1.you can assign the JSON data to variable name then You can build the tree layout
2.use one function to get the JSON data
Fiddle for 1 solution
Fiddle for 2 solution
var root = getData(),
nodes = cluster.nodes(root),
links = cluster.links(nodes);
Hi i have a return json data which returns the webservice
The structure of webservice is like that:
jsonp1332655154667({"products": [{"uid": "37",
"samsid": "hjk",
"name": "Science%20Essentials%2010%20AC%20edn",
"shortname": "scienceessentials10",
"description": "Science%20Essentials%2010%20ACE%20is%20the%20fourth%20in%20a%20series%20of%20four%20books%20designed%20for%20the%20National%20Curriculum.%20",
"generated": "3/25/2012%205:59:19%20AM",
"Description": "Science%20Essentials%2010%20ACE%20is%20the%20fourth%20in%20a%20series%20of%20four%20books%20designed%20for%20the%20National%20Curriculum.%20",
"PublishingCompany": "Macmillan%20Australia",
"Service": "OneStopScience",
"Service": "OneStopDigital",
"Icon": "http://curriculumplatform.s3.amazonaws.com/prod/icons/brain48.png",
"Country": "Australia",
"Shortname": "scienceessentials10",
"MarketingSite": "http%3a%2f%2fwww.macmillan.com.au%2fsecondary%2fonix%2fall%2f6F597241EFC0E43DCA257791001CAFC0%3fopen%26div%3dSecondary%26cat%3dScience%253EAustralian%252BCurriculum%26template%3ddomSecondary%26ed%3dsite%2fseced31.nsf",
"Skin": "OneStopScience%20Green"},
"tag":"s_science"'
"tag":"s_maths"'
"tag":"s_arts",
{"uid": "5",}]})
I have three "tag" elements. but when we access the products.tag it gives always last element like:s_arts.
Is there any way to find out all the elements eg:s_science,s_maths,s_arts.
please help.
It is invalid json, your tag should be:
...,
"tag": ["s_science", "s_maths", "s_arts" ],
...
Then product.tag would be an array that you could access successfully
Regards
If you have multiple keys in the same object, you're going to get undefined behaviour. Only one will be preserved, and since pairs are not ordered, you can't guarantee which you'll get.
In short: the webservice is returning you faulty data. If multiple tags are expected, the service should return an array of values in the tag attribute:
...
"tag":["s_science", "s_maths", "s_arts"],
...
You need to send the tags as an array:
jsonp1332655154667({"products": [{"uid": "37",
"samsid": "hjk",
"name": "Science%20Essentials%2010%20AC%20edn",
"shortname": "scienceessentials10",
"description": "Science%20Essentials%2010%20ACE%20is%20the%20fourth%20in%20a%20series%20of%20four%20books%20designed%20for%20the%20National%20Curriculum.%20",
"generated": "3/25/2012%205:59:19%20AM",
"Description": "Science%20Essentials%2010%20ACE%20is%20the%20fourth%20in%20a%20series%20of%20four%20books%20designed%20for%20the%20National%20Curriculum.%20",
"PublishingCompany": "Macmillan%20Australia",
"Service": "OneStopScience",
"Service": "OneStopDigital",
"Icon": "http://curriculumplatform.s3.amazonaws.com/prod/icons/brain48.png",
"Country": "Australia",
"Shortname": "scienceessentials10",
"MarketingSite": "http%3a%2f%2fwww.macmillan.com.au%2fsecondary%2fonix%2fall%2f6F597241EFC0E43DCA257791001CAFC0%3fopen%26div%3dSecondary%26cat%3dScience%253EAustralian%252BCurriculum%26template%3ddomSecondary%26ed%3dsite%2fseced31.nsf",
"Skin": "OneStopScience%20Green"},
"tags": [
"s_science"'
"s_maths"'
"s_arts"
],
{"uid": "5",}]})
Then you reference them as data.tags[0], data.tags[1], data.tags[2].
if your response is in this format
YourResponse = {
"products" : [
{"uid" :"5", ......., "whtever":"someval"},
{"uid" :"6", ......., "whtever":"someval1"}
]
};
you can use this
$(YourResponse).each(
function(objName, objValue) {
console.log(objName); // wil get object name like uid, whtever
console.log(objValue); // wil get object's value
});
so to get Tags you will have to take Tuan's suggestion; send them in array