Develop Reference

accessing CSV file in d3.js with no header row

I have a CSV file with data as such:
,tests,Mary,Joe,Frank
0,Test1,92,15,72
1,Test2,74,25,70
2,Test3,30,65,50
3,Test4,82,80,48
this data has been taken from a space delimited text file, converted into a dataframe in pandas, and then converted into a csv file for use in a d3.js driven scatterplot.
I want to bind data to points so each dot on that scatterplot would hold info like
studentname: Joe
Test1: 15
Test2: 25
Test3: 65
Test4: 80
for each student and each test. I have a function like
d3.csv('path/to/file.csv', function(error, data) {
if error throw error;
data.forEach(function(d) {
d.studentname = d.name;
d.test = d.tests;
d.score = d.studentscore;
})});
which I know doesn't access the data the way I want it to. How can I get the function to pick out the data I want correctly?

First off, your CSV will not work as you haven't got a name for the first element in the header.
If you did, and you read the first element of the dataset you will get something like :
randomname(this i made up) : 0
tests : Test1
mary : 92
joe : 15
frank : 72
So to get it in the format you want you will have to loop through this and make a new data set, something like so (bare in mind I converted this to JSON to work with in JSFiddle easily). There probably is easier ways too :
Create individual student objects :
var newData = [];
for (var i in data[0]) { //create individual student objects
if (i != 'randomname' && i != 'tests') {
newData.push({
studentName: i
})
}
}
Create array to get index of individual student. I did this to make it easier to retrieve the individual student objects to give them test data :
var elementPos = newData.map(function(x) {
return x.studentName; //create array to get index of each student
});
Now loop through the data, find each student and give them a test score :
for (var i = 0; i < data.length; i++) { //loop through data
for (var j in data[i]) { //loop through each element in data[i]
if (j != 'tests' && j != 'randomname') { //get all students test scores
var thisStudent = newData[elementPos.indexOf(j)]; //get student object array based on index
thisStudent["test" + i] = data[i][j]; //set testscore, incremented
}
}
}
Working fiddle : https://jsfiddle.net/thatOneGuy/h7b2p2eh/1/
Working code :
var data = [{
"randomname": 0,
"tests": "Test1",
"Mary": 92,
"Joe": 15,
"Frank": 72
}, {
"randomname": 1,
"tests": "Test2",
"Mary": 74,
"Joe": 25,
"Frank": 70
}, {
"randomname": 2,
"tests": "Test3",
"Mary": 30,
"Joe": 65,
"Frank": 50
}, {
"randomname": 3,
"tests": "Test4",
"Mary": 82,
"Joe": 80,
"Frank": 48
}];
var newData = [];
for (var i in data[0]) { //create individual student objects
if (i != 'randomname' && i != 'tests') {
newData.push({
studentName: i
})
}
}
var elementPos = newData.map(function(x) {
return x.studentName; //create array to get index of each student
});
for (var i = 0; i < data.length; i++) { //loop through data
for (var j in data[i]) { //loop through each element in data[i]
if (j != 'tests' && j != 'randomname') { //get all students test scores
var thisStudent = newData[elementPos.indexOf(j)]; //get student object array based on index
thisStudent["test" + i] = data[i][j]; //set testscore
}
}
}
console.log(newData)

Push different object in an array with a for loop

I have an element structured like this:
Element ->
[{values: arrayOfObject, key:'name1'}, ... ,{values: arrayOfObjectN, key:'nameN'}]
arrayDiObject -> [Object1, Object2, ... , ObjectN] //N = number of lines in my CSV
Object1 -> {x,y}
I have to take data from a big string:
cityX#substanceX#cityY#substanceY#
I thought to make it this way, but it seems like it pushes always in the same array of objects. If I put oggetto = {values: arrayDateValue, key: key}; inside the d3.csv function, instead if I put outside the function it add me only empty objects.
Here is my code:
var final = new Array();
var oggetto;
var key;
function creaDati() {
var newdate;
var arrayDateValue = new Array();
var selString = aggiungiElemento().split("#");
//selString is an array with selString[0]: city, selString[1]: substance and so on..
var citySelected = "";
var substanceSelected = "";
for (var i = 0; i < selString.length - 1; i++) {
if (i % 2 === 0) {
citySelected = selString[i];
} else if (i % 2 !== 0) {
substanceSelected = selString[i];
key = citySelected + "#" + substanceSelected;
d3.csv("/CSV/" + citySelected + ".csv", function(error, dataset) {
dataset.forEach(function(d) {
arrayDateValue.push({
x: d.newdate,
y: d[substanceSelected]
});
});
});
oggetto = {
values: arrayDateValue,
key: key
};
arrayDateValue = [];
final.push(oggetto);
}
}
}
Any idea ?

First you should make the if statement for the city and then for the key, which you seem to be doing wrong since you want the pair indexes to be the keys and the not pair to be the city, and you are doing the opposite. And then you need to have the d3.csv and push the objects outside of the if statement, otherwise in your case you are just adding elements with citySelected="".
Try something like :
for(var i = 0; i < selString.length -1; i+=2){
cittySelected = selString[i];
substanceSelected = selString[i+1];
key = citySelected + "#" + substanceSelected;
d3.csv("/CSV/"+citySelected+".csv", function(error, dataset){
dataset.forEach(function(d){
arrayDateValue.push({x: d.newdate, y: d[substanceSelected]});
});
});
oggetto = {values: arrayDateValue, key: key};
arrayDateValue = [];
final.push(oggetto);
}
It's is not the best way to do it, but it is clearer that what you are following, i think.

In the if(i % 2 == 0) { citySelected = ... } and else if(i % 2 !== 0) { substanceSelected = ... } citySelected and substanceSelected will never come together.
The values should be in one statement:
if(...) { citySelected = ...; substanceSelected = ...; }
The string can be splitted into pairs
city1#substance1, city2#substance2, ...
with a regex (\w{1,}#\w{1,}#).
Empty the arrayDateValue after the if-statement.
Hint:
var str = "cityX#substanceX#cityY#substanceY#";
function createArr(str) {
var obj = {};
var result = [];
var key = "";
// '', cityX#substanceX, '', cityYsubstanceY
var pairs = str.split(/(\w{1,}#\w{1,}#)/g);
for (var i = 0; i < pairs.length; i++) {
if(i % 2 !== 0) {
key = pairs[i];
// d3 stuff to create values
obj = {
// Values created with d3 placeholder
values: [{x: "x", y: "y"}],
// Pair
key: key
};
result.push(obj);
}
// Here should be values = [];
}
return result;
}
var r = createArr(str);
console.log(r);

May be you can do like this;
var str = "cityX#substanceX#cityY#substanceY",
arr = str.split("#").reduce((p,c,i,a) => i%2 === 0 ? p.concat({city:c, key:a[i+1]}) : p,[]);
console.log(JSON.stringify(arr));

RESOLVED-
The problem is about d3.csv which is a asynchronous function, it add in the array when it finish to run all the other code.
I make an XMLHttpRequest for each csv file and it works.
Hope it helps.

How to iterate over an array in an array

I want to iterate over my 'areasarray' in the array 'areas' dataprovider array,
I have no idea how to loop over an array in an array, I've tried several tries with for-loops but none of it succeeded.
this is amCharts Maps framework.
var areasarray = {};
//get JSON File
$(function getData() {
var url = "../assets/document.json";
$.ajax({
url: url,
dataType: 'json',
success: function (data) {
console.log(data);
for (var i = 0; i < data.fact.length; i++) {
if (inverseCountryCodes[data.fact[i].dims.COUNTRY] != null) {
areasarray[i] = {
"id": inverseCountryCodes[data.fact[i].dims.COUNTRY],
"value": data.fact[i].Value,
"info": "Verkeersdoden per 100 000 inwoners: " + data.fact[i].Value
}
}
}
//console.log(areasarray);
//Map initialiseren
var map;
map = new AmCharts.AmMap();
map.colorSteps = 20;
var dataProvider =
{
mapVar: AmCharts.maps.worldLow
areas: [
{
id: "BE",
value: 10,
info: "Verkeersdoden ..."
}
]
};
console.log(dataProvider);
map.areasSettings = {
autoZoom: true,
selectedColor: "#338DAB"
};
map.dataProvider = dataProvider;
var valueLegend = new AmCharts.ValueLegend();
valueLegend.right = 10;
valueLegend.minValue = "little";
valueLegend.maxValue = "a lot!";
map.valueLegend = valueLegend;
map.addListener("clickMapObject", function (event) {
document.getElementById("info").innerHTML = '<p><b>' + event.mapObject.title + '</b></p><p>' + event.mapObject.info + '</p>';
});
map.mouseWheelZoomEnabled = true;
map.write("mapdiv");
}
});
});

If you want to iterate over areasarray which is actually an object and not an array you should look into using a for...in loop
For iterating over arrays within arrays, one approach would be to nest for loops
for(var i = 0; i < array1.length; i++) {
for(var j = 0; j < array2.length; j++) {
// do something
}
}
It's not clear to me what you mean by "array in an array" in this context and it would help if you provided more information about what exactly you are trying to accomplish

I would try a nested loop. Here is an example of creating an array of arrays and then looping through each.
var matrix = []
matrix[1] = []
matrix[1][1] = "foo"
matrix.forEach(function(column){
column.forEach(function(cell){
console.log(cell);
});
});

var areasarray = {}; means it's an object, not an array.
To iterate through each items in this object, try this.
var keys = Object.keys(areasarray);
keys.forEach(function(k) {
// you can access your item using
// k is the property key
console.log(areasarray[k]);
console.log(areasarray[k].id);
console.log(areasarray[k].value);
console.log(areasarray[k].info);
});
Not sure why you chose to create areasarray as an object.
If you wanted to, you could have defined it as:
var areasarray = [];
Then when adding to the array you use:
areasarray.push({
"id": inverseCountryCodes[data.fact[i].dims.COUNTRY],
"value": data.fact[i].Value,
"info": "Verkeersdoden per 100 000 inwoners: " + data.fact[i].Value
});
So later on, you can simply do:
for (var i = 0; i < areasarray.length; i++) {
console.log(areasarray[i]);
console.log(areasarray[i].id);
console.log(areasarray[i].value);
console.log(areasarray[i].info);
}
Note: in the above code, i is an index, where in the object block code, k is a key to the object.

Use nested loops.
Example:
var a1=["1","2","3","4","5","6","7"];
var a2=["a","b","c","d","e"];
for(var i=0;i<a1.length;i++) //loop1
{
console.log(a1[i]);
for(var j=0;j<a2.length;j++) //loop2
{
console.log(a2[j]);
}
}
Sample Output:
1st iteration of loop1:
1abcde
2nd iteration of loop1:
2abcde
and so on...
For every iteration of loop1,loop2 iterates 4 times(j<5).
Hoping I got your question right...This could be an answer.!

Comparing an Array with an Objects' Array in JavaScript

I am new to JavaScript and wondering how can I compare an array with another array consists of JavaScript objects.
The array is a series of sorted time in the "YYYY-MM-DD" format.
The array of objects missed some price values of several days.
I want to find the missed value and assign it as "NULL".
For example, I have an array as:
array = ['2014-10-09','2014-10-10','2014-10-11','2014-10-12'];
and an array with objects as:
objArray = [{
date:"2014-10-09",
price:"100"
},
{
date:"2014-10-10",
price:"99"
},
{
date:"2014-10-12",
price:"102"
}];
I want to get the price array in this way:
priceResult = [100, 99, "NULL", 102];
What would be the most efficient way without using other libraries? I wanted to see if anyone had a more elegant solution. I deeply appreciate your help.

You can create a lookup set from the object array, then you can use that to translate the dates to prices.
This scales well, as it is an O(n+m) solution rather than the O(n*m) solution that you get if you use a loop in a loop to find the prices.
var array = ['2014-10-09','2014-10-10','2014-10-11','2014-10-12'];
var objArray = [{ date:"2014-10-09", model:"A", price:"100" },{ date:"2014-10-10", model:"A", price:"99" },{ date:"2014-10-12", model:"A", price:"102" }];
var lookup = {};
for (var i = 0; i < objArray.length; i++) {
lookup[objArray[i].date] = parseInt(objArray[i].price, 10);
}
var priceResult = [];
for (var i = 0; i < array.length; i++) {
if (lookup.hasOwnProperty(array[i])) {
priceResult.push(lookup[array[i]]);
} else {
priceResult.push('NULL');
}
}
// output result in StackOverflow snippet
document.write(JSON.stringify(priceResult));
Note: Instead of the string 'NULL' you might want to use the value null instead, as it is generally easier to handle.

lodash is the best library for this. But you did say "without using other libraries", so you will need to do it natively.
The easiest way to do it is nested for loops:
var i, j, d, res = [];
for (i=0; i<dateArray.length; i++) {
d = dateArray[i];
for (j=0; j<objArray.length; j++) {
if (objArray[j] && objArray[j].date && objArray[j].date === d) {
res.push(objArray[j].price);
j = objArray.length; // don't waste energy searching any more, since we found it
}
}
}
// res now contains all you wanted
If objArray is really big, and you don't want to search it multiple times, then you could turn it into an object indexed by date:
var i, obj = {}, d, res = [];
for (i=0; i<objArray.length; i++) {
if (objArray[i] && objArray[i].date) {
obj[objArray[i].date] = objArray[i];
}
}
for (i=0; i<dateArray.length; i++) {
d = dateArray[i];
res.push(obj[d] ? obj[d].price : null : null);
}
// res now contains all you wanted

Loop trough the object and search for the date in your array
// Add contains to array proto: http://css-tricks.com/snippets/javascript/javascript-array-contains/
var priceResult = [];
for(var i in objArray) {
if(dateArray.contains(objArray[i].date)) priceResult.push(objArray[i].date));
}
console.log('matches:', priceResult);

This function will give you map of all individual arrays in your object array
function getArrayMap(array) {
var map={}
for(var i=0;i<array.length;i++){
var o = array[i];
for(var k in o){
if(!map[k]){
map[k]=[];
}
map[k].push(o[k]);
}
}
return map;
}
you can use it like -
var map = getArrayMap(objArray);
console.log(map["date"]);//date array
console.log(map["price"]);//price array
console.log(map["model"]);//model array

If i am understanding your question correctly, for all the values in array, you want to check the objArr and find the price for each date, and if not found u want to inset null. If this is what you want, then following will help
var found= false;
var list=[];
for(var i=0; i< dateArray.length; i++)
{
for(var j=0; j< objArray.length; j++)
{
if(objArray[j].date == dateArray[i])
{
list.push(objArray[j].price);
found = true;
}
}
if(!found)
{
list.push("null");
}
found = false;
}
alert(list);

(I'm going to call your first array dates rather than array, to avoid confusion.)
There are basically two options:
Loop through your dates array and, for each entry, loop through the objArray looking for a match, and when found add to your priceResult array, or
Build a map from your objArray, then loop through yourdatesarray once, building thepriceResult` array.
Looping and Looping
You can loop through your dates array using forEach, and you can use Array#some to find out whether your objArray contains the date and add to priceResult if so (it's an ES5 feature, but you can polyfill it for really old browsers):
var priceResult = [];
dates.forEach(function(date) {
objArray.some(function(object) {
if (object.date == date) {
priceResult.push(object.price);
return true;
}
});
});
Array#some keeps looping until you return true, which is why we do that when we find the firs tmatch. That's why I say this is "looping and looping," even though we only write one loop, the other is within Array#some.
var dates = ['2014-10-09', '2014-10-10', '2014-10-11', '2014-10-12'];
var objArray = [
{
date: "2014-10-09",
model: "A",
price: "100"
},
{
date: "2014-10-10",
model: "A",
price: "99"
},
{
date: "2014-10-12",
model: "A",
price: "102"
}
];
// Do it
var priceResult = [];
dates.forEach(function(date) {
objArray.some(function(object) {
if (object.date == date) {
priceResult.push(object.price);
return true;
}
});
});
snippet.log(priceResult.join(", "));
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
Mapping and Looping
First, create a map of prices by date:
var prices = {};
objArray.forEach(function(object) {
prices[object.date] = object.price;
});
...then create your results:
var priceResult = [];
dates.forEach(function(date) {
if (prices.hasOwnProperty(date)) {
priceResult.push(prices[date]);
}
});
var dates = ['2014-10-09', '2014-10-10', '2014-10-11', '2014-10-12'];
var objArray = [
{
date: "2014-10-09",
model: "A",
price: "100"
},
{
date: "2014-10-10",
model: "A",
price: "99"
},
{
date: "2014-10-12",
model: "A",
price: "102"
}
];
// Create the map
var prices = {};
objArray.forEach(function(object) {
prices[object.date] = object.price;
});
// Create your results:
var priceResult = [];
dates.forEach(function(date) {
if (prices.hasOwnProperty(date)) {
priceResult.push(prices[date]);
}
});
// Show them
snippet.log(priceResult.join(", "));
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

var dates = ['2014-10-09','2014-10-10','2014-10-11','2014-10-12'];
var objArray = [{date:"2014-10-09", model:"A", price:"100" }, {date:"2014-10-10", model:"A", price:"99" }, {date:"2014-10-12", model:"A", price:"102" }];
var val;
var priceResult = [];
for (var a in dates) {
val = null;
for (var b in objArray) {
if (dates[a] == objArray[b].date) {
val = objArray[b].price;
}
}
priceResult.push(val);
}
var dates = ['2014-10-09', '2014-10-10', '2014-10-11', '2014-10-12'];
var objArray = [{
date: "2014-10-09",
model: "A",
price: "100"
}, {
date: "2014-10-10",
model: "A",
price: "99"
}, {
date: "2014-10-12",
model: "A",
price: "102"
}];
var val;
var priceResult = [];
for (var a in dates) {
val = null;
for (var b in objArray) {
if (dates[a] == objArray[b].date) {
val = objArray[b].price;
}
}
priceResult.push(val);
}
// output result in StackOverflow snippet
document.write(JSON.stringify(priceResult));

Try this:
var temp[]
temp= jQuery.grep(objArray , function (n, i)
{
for(j=0;j<dateArray.lenght+j++ )
if( n.date === dateArray[j])
return n.price;
);

dateArray = ["2014-10-09", "2014-10-10", "2014-10-11", "2014-10-12"];
function ObjectExample(date1,model,price)
{
this.date1 = date1;
this.model = model;
this.price = price;
}
var objArray = [new ObjectExample("2014-10-09","A","100"), new ObjectExample("2014-10-10","A","99"), new ObjectExample("2014-10-12","A","102")];
var i = 0;
var priceDate = new Array();
var count = 0;
while(i < dateArray.length)
{
var j = 0;
while(j < objArray.length)
{
if(dateArray[i] == objArray[j].date1)
{
priceDate[count] = objArray[j].price;
break;
}
else priceDate[count] = "NULL";
j = j + 1;
}
i = i + 1;
count++;
}
document.write(priceDate);

selecting particular keys from json data

I have a array as:
var cols = ["ticker", "highPrice", "lowPrice","lastPrice"] // dynamic
Json data comming from backend as:
info = {ticker: "AAPL", marketCap: 2800000000, lowPrice: 42.72, highPrice: 42.84}
suppose I want to select market cap then I can do info.marketCap. But I want to select only those json values which keys are equals to cols i.e. info.ticker, info.highPrice, info.lowPrice
and assign N/A to those which is undefined in json but present in cols array i.e info.lastPrice = "N/A"
Note: cols changes from time to time
Here is what I have got so far
SyScreener.fillScreenerResult = function(info) {
var cols = ["ticker", "highPrice", "lowPrice", "openPrice", "lastPrice", "currentVol", "avgVol"];
var data = [];
for(var i=0; i<info.length; i++) {
var jsonKeys = Object.keys(info[i]);
for(var j=0; j<jsonKeys.length; i++) {
if(cols.contains(jsonKey[j])) {
// TODO something like - data.push([info[i].jsonKey[j])
} else {
// TODO something like - info[i].colsValue = "N/A"
}
}
}
SyUtils.createDataTable("screener_result", data);
};

do you mean something like this:
var cols = ["ticker", "highPrice", "lowPrice","lastPrice"];
info = {ticker: "AAPL", marketCap: 2800000000, lowPrice: 42.72, highPrice: 42.84};
for(var c = 0, clen = cols.length; c < clen; c++) {
if( !(cols[c] in info) ) {
console.log("N/A");
}
else {
console.log(info[cols[c]]);
}
}
Demo:: jsFiddle

I may not be reading your question correctly but from my understanding I might suggest something like this.
for (var i=0; i<cols.length; i++) {
var fieldName = cols[i];
if (!info.hasOwnProperty(fieldName)) {
info[fieldName] = 'N/A';
}
}
This simply iterates through each field name in cols and checks if it is a property of the info JSON object. If it isn't already present the loop adds the property with a value of 'N/A'.

var cols = ["ticker", "highPrice", "lowPrice","lastPrice"]
var info = {ticker: "AAPL", marketCap: 2800000000, lowPrice: 42.72, highPrice: 42.84}
var output = {};
for(each in info) {
var index = cols.indexOf(each)
if(index != -1) {
output[each] = info[each];
//remove extra already checked element
cols.splice(index,1)
}
}
//append remaining keys
for(var i=0;i<cols.length;i++) {
output[cols[i]] = "N/A"
}
console.log(output)
//output Object {ticker: "AAPL", lowPrice: 42.72, highPrice: 42.84, lastPrice: "N/A"}

First thing, you nedd deserialize you JSON data.
To do this using jQuery use the function parseJson that you can find here
http://api.jquery.com/jquery.parsejson/
once you deserialized it, you can do whatever you want with this data since you manipulate it as a plain javascript array. Hope this helps.