I'm testing the sandey chart from the following link: https://gist.github.com/d3noob/c2637e28b79fb3bfea13
But I can only see the the chart in Firefox, not in Chrome. I suspect because Chrome doesn't allow to access data from an external file.
Therefore, I'm trying to integrate the json code, but when I try it, the chart doesn't show up in Firefox
I have added a variable with all the json code like:
var dataset = {"nodes":[{"node":0,"name":"node0"},{"node":1,"name":"node1"},{"node":2,"name":"node2"},{"node":3,"name":"node3"},{"node":4,"name":"node4"}],"links":[{"source":0,"target":2,"value":2},{"source":1,"target":2,"value":2},{"source":1,"target":3,"value":2},{"source":0,"target":4,"value":2},{"source":2,"target":3,"value":2},{"source":2,"target":4,"value":2},{"source":3,"target":4,"value":4}]};
And I've replaced this line of code:
d3.json("sankey-formatted.json", function(error, graph) {
For this one (just replacing the name of the file by the dataset variable):
d3.json(dataset, function(error, graph) {
,,, but not the chart is not showing. Any ideas why the sankey chart is not showing?
Thanks
The problem you're facing is that d3.json...
...returns a new request to get the JSON file at the specified url with the default mime type application/json.
That being said, the solution is simpler than you think: since you already have a variable with all the data, just name it as graph (your d3.json function loads the file and populates a data array called graph):
var graph = {"nodes":[{"node":0,"name":"node0"},...
And drop the d3.json function, don't forgetting to remove the closing curly bracket/parenthesis:
d3.json("sankey-formatted.json", function(error, graph) {//remove this...
//your function
});//...and don't fortget to remove this too.
Related
I'm just having a little trouble understanding the documentation for CSV Parse with D3. I currently have:
d3.parse("data.csv",function(data){
salesData = data;
});
But I keep on getting the error:
Uncaught TypeError: d3.parse is not a function
What is this supposed to look like? I'm just a little confused, and the only examples that I could find was something like this.
I also tried something like:
d3.dsv.parse("data.csv",function(data){
salesData = data;
});
and got:
Uncaught TypeError: Cannot read property 'parse' of undefined
Why is this happening? Any help would be greatly appreaciated, thanks!!
There is some misunderstanding here: you're confusing d3.csv, which is a request, with d3.csvParse, which parses a string (and also mixing D3 v3 syntax with D3 v4 syntax). This is the difference:
d3.csv (D3 v4)
The d3.csv function, which takes as arguments (url[[, row], callback]):
Returns a new request for the CSV file at the specified url with the default mime type text/csv. (emphasis mine)
So, as you can see, you use d3.csv when you want to request a given CSV file at a given url.
For example, the snippet below gets the CSV at the url between quotes, which looks like this...
name, parent
Level 2: A, Top Level
Top Level, null
Son of A, Level 2: A
Daughter of A, Level 2: A
Level 2: B, Top Level
... and logs the parsed CSV file, check it:
d3.csv("https://gist.githubusercontent.com/d3noob/fa0f16e271cb191ae85f/raw/bf896176236341f56a55b36c8fc40e32c73051ad/treedata.csv", function(data){
console.log(data);
});
<script src="https://d3js.org/d3.v4.min.js"></script>
d3.csvParse
On the other hand, d3.csvParse (or d3.csv.parse in D3 v3), which takes as arguments (string[, row]):
Parses the specified string, which must be in the delimiter-separated values format with the appropriate delimiter, returning an array of objects representing the parsed rows.
So, you use d3.csvParse when you want to parse a string.
Here is a demo, suppose you have this string:
var data = "foo,bar,baz\n42,33,42\n12,76,54\n13,42,17";
If you want to parse it, you'll use d3.csvParse, not d3.csv:
var data = "foo,bar,baz\n42,33,42\n12,76,54\n13,42,17";
var parsed = d3.csvParse(data);
console.log(parsed);
<script src="https://d3js.org/d3.v4.min.js"></script>
You can get csv data into d3 like the following -
// get the data
d3.csv("data.csv", function(error, data) {
if (error) throw error;
console.log(data);
//format data if required...
//draw chart
});
I also could not get the d3.csv("csv_file.csv", function(data) { //modifying code }
to work.
A classmate recommended using the following, which has worked so far:
d3.csv("data.csv").then(function(data){
//modifying code
}
As noted in the comments below, this is a fix if you're running v5 instead of v4.
Use d3.csv("data.csv", function(data){...}) to get CSV from url and parse, or use d3.csv.parse() to parse a CSV-formatted string.
Here is the code you can use to read csv file using d3.js
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
d3.csv("csv/cars.csv", function(data) {
console.log(data[0]);
});
</script>
Note that, the csv file name is "cars.csv", and the file is saved in a folder called csv.
console.log(data[0])
will help you to see the data output in the browser debug window. Where, you can also find if there is any error as well.
I am new to JavaScript and D3 and cannot figure out how to allow users to upload a csv file and displaying a scatterplot using d3. I am using the tag to allow user to select file. But I am not sure on what the next step should be. Is there a way to read the csv file and store it's contents in a d3 array and then displaying a graph using that array ??
Thanks in advance
Look into the d3.csv function (https://github.com/mbostock/d3/wiki/CSV). Here is a simple example
//load up the example.csv file
d3.csv('example.csv',
function(data){
//this is an object, the contents of which should
//match your example.csv input file.
console.log(data);
// do more stuff with 'data' related to
// drawing the scatterplots.
//
//-----------------------
},
function(error, rows) {
console.log(rows);
};
);
There are a number of examples online showing you how to go from a data array to a scatterplot...it's a matter of modifying those examples to fit your specific data format.
I have to load some data stored in tsv file to create a bar chart with d3js.
I use this code to read the file:
d3.tsv("data.tsv", function(error, data) {
The data inside the file change at every click of a button that invokes a servlet function to update these data.
The problem is that I can't get the updating data, so I am stuck on the fist data stored in the file.
I avoid this problem creating n-files and reading these different files.
But I want to use the same file.
So here you go,
Onclick get the new file
Once you are sure you have the updatedFile read it using d3.tsv (you can use callback here) and inside that give a call to the function which does drawing
This is because your browser is caching the file and not actually reloading it. You can avoid this by adding a changing query parameter to the call, which doesn't do anything but prevents the browser from caching:
var counter = 0;
// ...
d3.tsv("data.tsv?foo=" + i++, function(error, data) {
// ...
});
I have a php script that generates the google chart data and returns it in json encoded format. It's loaded into google chart using jQuery $.get() method. When I pass the return data to the google "arrayToDataTable" function like this:
var googleChartData = google.visualization.arrayToDataTable(chartData);
I get this error:
So, what I did was I dumped the value of my variable "chartData" and I got the following:
So, what I did was, copy this data from console window into the "arrayToDataTable" function manually like this:
var googleChartData = google.visualization.arrayToDataTable([["Date Range","0001\/102\/0 Available","0001\/102\/0 Unavailable","0001\/102\/1 Available","0001\/102\/1 Unavailable"],["02\/10\/2013",0,1,110,11],["03\/10\/2013",0,1,189,11],["04\/10\/2013",0,1,189,11],["06\/10\/2013",0,1,189,10],["07\/10\/2013",0,1,187,10],["08\/10\/2013",186,11,0,1],["09\/10\/2013",186,11,0,1],["10\/10\/2013",0,1,186,11],["11\/10\/2013",0,1,204,11],["13\/10\/2013",0,1,204,11]]);
Now the chart renders (as expected, because the returned data from my php script is correct):
This is a bit bizarre; does any one know why the chart doesn't work when it's loaded from the variable?
I've solved it by changing arrayToDataTable line like this:
var googleChartData = google.visualization.arrayToDataTable($.parseJSON(chartData));
Thanks to this post: https://stackoverflow.com/a/9420583/2332336
I am trying to create some JSON to be used for displaying a chart using Highcharts
http://www.highcharts.com/
I have copied one of their examples:
http://www.highcharts.com/stock/demo/basic-line
Click "View Options" under the graph to see the source. There is also a JSFiddle there to play with
If I copy that locally it all works fine.
The problem is when I try to use my own data source.
I have an ASP.Net MVC controler which is spitting out a list of arrays, just like their data source. However, that doesn't work.
Their datasource looks like this
http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?
and they retrieve it like this
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
So I thought I'd take a step back and copy thier data exactly and put it in a text file on my server and try that:
So I tried this
$.getJSON('/data.txt', function (data) {
and this
$.get('/data.txt', function (data) {
but neither work
I have also tried using both JSON.parse and jQuery.parseJSON after retrieving the data, but again - that doesn't seem to work
I am also wondering what the ? is at the start of their data
Their data looks like this
?([[<some data>],[some data]]);
I don't get any error message, the graph just doesn't display
any ideas?
SOLVED IT
Just need to retrive the data and turn it into an array and pass it to the chart.
Needs to be an array, not JSON
That datasource is ouputting JSONP, which is for cross-domain AJAX requests. It's not valid 'raw' JSON because of that extra callback(...) wrapper.
Read up about it here: http://api.jquery.com/jQuery.ajax/ under the 'dataType' section.
As you say in your tags, it's not JSON, it's JSONP. Do not parse it, catch it with a callback. Use jQuery.getScript to do it, and define function callback(data). Inside that function, data should contain the (parsed) object. Also, replace the ? in the URL with callback (or whatever you named your function) - ? is not a valid identifier in JavaScript, so ?([....]) is nonsense.