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.
My Node script has this in it:
var connection = mysql.createConnection(...);
connection.connect();
connection.query(/*sql query*/, function(err, rows, fields){
app.get('/', function(req, res){
res.render('index', { data: JSON.stringify(rows) });
});
});
Then if I do this in my Jade template:
body
p !{data}
It displays the data from the MySql query exactly as you'd expect. But if instead I do:
body
script(type='text/javascript').
console.log(!{data});
It gives me [Object, Object, Object, Object....
Why is it interpreted differently if it's part of the client Javascript? And how can I fix this?
I put JSON.stringify in the local variable assignment because if I didn't, nothing would get passed through no matter where in the template I tried to put it. Is there another way I'm supposed to be transforming the data maybe?
You should have to give an index like
console.log(!{data[1]}); to view the objects in console..
I have recently run into this issue like you. I think it would be helpful to point out a few things:
The mysql library from node already returns your data into json. you using stringify returns it as a string; I believe that is why your getting that object back in the console log. try just returning data:rows and accessing the data via dot syntax notation in your template. this is what worked for me.
Any help will be appreciated.
I need to extract data from websites and found that node-unfluff does the job (see https://github.com/ageitgey/node-unfluff). There is two ways to call this module.
First, from command line which works!
Second, from node js which doesn't work.
extractor = require('unfluff');
data = extractor('test.html');
console.log(data);
Output : {"title":"","lang":null,"tags":[],"image":null,"videos":[],"text":""}
The data returns an empty json object. It appears like it cannot read the test.html.
It seems like it doesn't recognise test.html. The example says, "my html data", is there a way to get html data ? Thanks.
From the docs of unfluff:
extractor(html, language)
html: The html you want to parse
language (optional): The document's two-letter language code. This
will be auto-detected as best as possible, but there might be cases
where you want to override it.
You are passing a filename, and it expects the actual HTML of the file to be passed in.
If you are doing this in a scripting context, I'd recommend doing
data = extractor(fs.readFileSync('test.html'));
however if you are doing this in the context of a server or some time when blocking will be an issue, you should do:
fs.readFile('test.html', function(err, html){
var data = extractor(html);
console.log(data);
));
Am new to jquery.I need to know how to pass external json file as a argument to a function.
I know how to pass as a object in client side like below.
var json = { "key": "value" }
Basically i need to call this below function by passing the json data.
function draw(json) {
// Code here
console.log(json);
}
In client side json means i know to how to pass.
draw(json);
But my json file is come from server(External Json File)
I tried jquery.getJson() method also.But not getting exact solution.I don't know what i did mistake also.
My $.getJson code
draw("$.getJSON("http://localhost/cb/json/Json_30647.json",function(data) {
return data;
}));
Please help me to solve this issue.Thanks in advance.
You can not return from an asynchronous method. You are trying to eat the pizza before it it delivered to your house.
Call the function when the call is complete:
$.getJSON("http://localhost/cb/json/Json_30647.json",function(data) {
draw(data);
});
i want parse a json file to Dictionary and want write some data to it.
this is what i have, but i become a empty Dictionary
var users = {};
fs.readFile('login.json', function read(err, data) {
if (err) {
throw err;
}
users = JSON.parse(data);
});
In Node.js you can require JSON files, so your code could simply become:
var users = require('./login.json');
Though note the data will be cached, so if your login.json file changes without an application restart the users object will stay the same.
readFile is an asynchronous function. If you want to do anything with the data in it, you must do so in the callback function (or at some point after you know the callback has been run).
You may want to use readFileSync instead.