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.
Related
I need to get gtfs data and show raw data on screen. I tried to use gtfs-stream module, but not sure, how to get data from it.
var gtfs_source = 'https://www.bkk.hu/gtfs/budapest_gtfs.zip'
request.get(gtfs_source).pipe(gtfs.enhanced()).on('data', (entity) => {
console.log(entity)
})
gtfs-utils has a rich set of functions, but it is unable to get data from a compressed file.
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.
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 am Newbie to this crossfilter and d3.js..Data for my project is loaded from my project directory,i have csv files for data.When loading single data sheet(single csv file) and giving input to crossfilter its fine,its working well..
But when i have 2 sheets how can i combine into single and give input to crossfilter??
Corresponding code:
d3.csv("vc5.csv", function (data) {
crossfilter(data);
//Doing calculation
//All charts calculations and chart display
});
But now my requirement is,i have to read data from 2 datasheets(2 csv files) having common field "Name".
My requirement:
d3.csv("vc5.csv", function (data) {
d3.csv("xxx.csv",function(data1){
crossfilter()-------------------------->I have to combine 2 datas into single object and i have to pass to crossfilter.
//Doing calculation
//All charts calculations and chart display
});
});
Help me to achieve this?? Thanks in advance
You can use the add method: https://github.com/square/crossfilter/wiki/API-Reference#wiki-crossfilter_add
Step 3 in this answer is what you're looking for https://stackoverflow.com/a/21194072/916734
I need to extract the data from an excel sheet into csv or json format and then display the content in the form of charts(bar, pie and line) using javascript. I have been working on it since 2 days and not able to find any good source. Any help regarding this would be appreciated. Thank you.
You can also pull data from a google spreadsheet as CSV data like this:
var spreadsheet = "https://docs.google.com/spreadsheet/pub?key=youruniquekeyhere&single=true&gid=2&output=csv"
d3.csv(spreadsheet, function (error, data) {
// use your data here
});
Notice the output=csv at the end of that URL.
gid=0 is worksheet 1, gid=1 is worksheet 2 and so on. You must publish your worksheet to the web first to make it available.
In addition to Christophe Viau's tutorials, here are more resources:
https://github.com/mbostock/d3/wiki/Gallery#basic-charts
http://www.d3noob.org