I am trying to learn some chart rendering techniques for front end web development. There is a d3 tutorial where the javascript function can be edited on the website (great for learning purposes) and I am attempting to use my own data instead. In the tutorial website I am attempting to modify the rawgit
//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/3_TwoNumOrdered_comma.csv",
with my own rawgit dataset:
//Read the data
d3.csv("https://raw.githubusercontent.com/bbartling/Data/master/City%20Rec%20Center%202%20kW%202019.csv",
One thing to note is my data is hourly and the tutorial data is daily.. So would I need to modify anything with the time parse function?
// When reading the csv, I must format variables:
function(d){
return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.value }
},
I am trying to follow this learn javascript site that talks about timeParse but not having anyluck... Could anyone give me a tip?
Also to mention my dataset the timestamp/index column is Date not date and the data is kW not value... Do I need to modify the tutorial code to accommodate for this as well?
I think I actually figured this out. At least I got the chart to render on the tutorial site... Changing the timeParse function to this:
//Read the data
d3.csv("https://raw.githubusercontent.com/bbartling/Data/master/City%20Rec%20Center%202%20kW%202019.csv",
// When reading the csv, I must format variables:
function(d){
return { date : d3.timeParse("%m/%d/%Y %H:%M")(d.Date), value : d.kW }
},
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 made a pollution table which it works perfectly with the series data inside the code. Yet I have no clue of how to make it read the same data from a CSV file without data module. You can see the table here: https://jsfiddle.net/Ruloco/58q60968/7/
Understanding the first column as the date, the second as the name of the station, and the third as the pollution value, I assume this is the format the CSV should have:
0,0,30
0,1,38
0,2,12
0,3,65
0,4,220
0,5,115
0,6,80
0,7,90
0,8,160
0,9,220
0,10,50
1,0,31
1,1,42
1,2,13
1,3,58
1,4,240
1,5,123
1,6,85
1,7,40
1,8,69
1,9,90
1,10,53
2,0,33
2,1,44
2,2,11
2,3,53
2,4,234
2,5,130
2,6,123
2,7,180
2,8,50
2,9,98
2,10,55
I hope you could help me. Thanks in advance!
Look at this JQuery plugin, basically it converts CSV files to javascript arrays: https://github.com/evanplaice/jquery-csv/
Once you have installed that you should be able to do
var result = $.csv.toArrays(csvInput);
with the CSV in the format you gave.
This snippet actually does exactly what you want I think.
var csv = $('textarea').val()
var result = $.csv.toArrays(csv)
console.log(result)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<textarea>
0,0,30
0,1,38
0,2,12
0,3,65
0,4,220
0,5,115
0,6,80
0,7,90
0,8,160
0,9,220
0,10,50
1,0,31
1,1,42
1,2,13
1,3,58
1,4,240
1,5,123
1,6,85
1,7,40
1,8,69
1,9,90
1,10,53
2,0,33
2,1,44
2,2,11
2,3,53
2,4,234
2,5,130
2,6,123
2,7,180
2,8,50
2,9,98
2,10,55
</textarea>
Please help by taking StockChart. Pinning three .json files as in the example , But does not work. The code is below:
www.jsfiddle.net/d8xwjxg7/2
You have an error in your code:
$.getJSON('http://www.iklimat.pl/'+name()+'.php', function (data) {
Should be:
$.getJSON('http://www.iklimat.pl/'+ name +'.php', function (data) {
Since name is a string not a function.
Also, this will not work in a JSFiddle since you cannot load files not from the site the javascript is running on without the endpoint you are accessing setting the access-allow-control-origin header.
EDIT:
I have sorted out the issue you were having getting data, however there is an issue with that data.
http://jsfiddle.net/d8xwjxg7/5/
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.