Importing data from two csv files using d3js - javascript

consider this fiddle link FIDDLE. In this example I would like to use a csv file to load data at line no.33-[data.csv] and data at line no.158-[data1.csv]. I want to use two separate csv files. I tried using a csv file for data at line no.33 with this code
d3.csv("data.csv", function(csvData) {
csvData.forEach(function (d,i) {
data[i] = {
first: +d.first,
second: +d.second
}
});
console.log(data);
I was able to get an output but the charts had moved far away from each other with the following errors : Unexpected value NaN parsing cy attribute. How to load the two datasets in an efficient way using two separate csv files ?

Here is hopefully the final plunker in this ever-growing project :) (A lot of the csv work here has been guided by the great Lars...as usual, many kudos to him.)
Updated plunker with data on top chart coming from datam.csv.

Related

javascript d3 render chart

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 }
},

How to read in CSV with d3 v4?

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.

Plot heatmap from CSV file [Highcharts]

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>

Three .json files 'StockChart' - highcharts

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/

Upload csv file using javascript and d3

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.

Categories