HTML range slider show JSON dependant on date - javascript

I have a JSON file containing:
{"mapping": [
[
"london",
"51.18452",
"-0.150839",
"2016-04-19"
],
[
"london",
"52.6127",
"-2.02296",
"2016-04-21"
],
[
"london",
"53.334",
"-6.2761",
"2016-04-15"
]
}
Within my HTML I wish to have a range slider like this:
[]-----------------
oldest recent
In this scenario, the oldest JSON data should be shown, so
"london",
"53.334",
"-6.2761",
"2016-04-15"
And as the user slowly moves the range slider closer to the right end, more recent data should be shown..
----------------[]-
oldest recent
displaying..
"london",
"52.6127",
"-2.02296",
"2016-04-21"
I have many other values within the JSON file, I just used these three examples to show the format of the file. I am creating a heat map and whilst the slider moves along, the heat map should change to generate different points. Thanks for any help with this!

Turning the arrays into objects is optional, but it is much easier to reference properties like that, also it allowed us to convert the date string into a date object which has a number value to compare with.
const objectMapping = data.mapping.map(element => ({city:element[0], latitude:element[1], longitude:element[2], date:new Date(element[3])}));
Now that you have objects rather than an array, you can just say Array.sort on the date object where if b is higher than a, then b will come before a in the list
const sortedMapping = objectMapping.sort((a, b) => b.date - a.date);
Then sortedMapping[0] = oldest date

Related

Crossfilter.js: Creating Dimensions/Groups With Nested Attributes

I'm working on a visualization utilizing the crossfilter.js library, and I'm a bit confused on how to create some dimensions from nested attributes within my dataset. For instance, each instance of the dataset has multiple dates associated with it, resulting in a data structure that looks like this:
[ { name: 'instance_name',
dates: ['2014-11-11', '2013-07-06', '2011-02-04'],
category: 'category 1' },
{ name: 'instance_name2',
dates: ['2012-01-01', '2013-03-07'],
category: 'category 2' } ]
I'd like to be able to create dimensions that will allow for filtering based on, say, the dates and the category and dimensions are a straightforward way to do this with crossfilter. However, I'm not sure how to parse the dates. I've tried first creating a date dimension using something like:
var cf = crossfilter(data);
var dateDim = cf.dimension(function(d) { return d.dates; });
and then tried to store just the dates as a variable using the .map() method like so:
var date = dateDim.top(Infinity).map(function(d) { return d.dates; });
The above does retrieve just the dates and stores them as a variable, however (a) this is just an array of dates each of which is a string, and (b) this doesn't get me any closer to linking the dateDim to other crossfilter dimensions I'd like to create for the visualization. Any help would be greatly appreciated. Thanks for reading.
My recommendation is be to flatten your structure before loading it in to Crossfilter. So your 1st record will become 3 records (1 for each date) and your 2nd record will become 2 records. You can then parse the dates and treat them as a dimension in Crossfilter without too much trouble. The downside is that counting because a problem, but that is manageable with custom grouping functions.

How do I retrieve an array from a csv file in javascript using d3?

Having spent hours on Google and SO, I have finally cracked.
I have a PSQL table of outbound flight data of one day sorted by time and destination continent.
I am going through all rows of my table, pushing the destination continent of each flight into arrays, with each array representing 15mins of flight data. for example,
1st array - 00:00 to 00:15 would be: [] ......(no flights)
21st array - 05:00 to 05:15 would be: ["NA", "NA", "NA", "EU", "AS", "EU"] etc.
all the way to 96 arrays (96 x 15 mins in 24 hours.)
I have this data pushed into a CSV file with the header being just flights
however, when I try to recall the data in d3 using:
d3.csv("/my_file.csv", function(data) {console.log(data);})
the object returned is 96 rows of "["NA"" or something equivalent; very obviously it is breaking at the very first comma. Is there a way to retrieve arrays from a CSV file using d3??
CSV files work best when there is a fixed number of columns in each row. For your data, can you use a JSON file instead? There are different ways you could represent your data as JSON, for example, you could use an object with each property being an array:
{
"00:00 to 00:15": [],
"05:00 to 05:15": ["NA", "NA", "NA", "EU", "AS", "EU"]
}

Couchdb view to selecting products using another key

I' ve a big list of products (they are ink cartidges and toner) stored in a couchdb, for every document i've got several fields, and one particular field called "models" that is a multidimensional array like this:
"models": {
"Brother": {
"HL": [
"5200",
"5240",
"5240 DN",
"5240 DNLT",
"5240 L",
"5250 DN",
"5250 DNHY",
"5250 DNLT",
"5270 DN",
"5270 DN 2 LT",
"5270 DNLT",
"5280 DW",
"5280 DWLT"
]
},
"": {
"MFC": [
"8460 DN",
"8460 N",
"8860 DN",
"8860 N",
"8870 DW"
],
"DCP": [
"8060",
"8065 DN"
]
},
"Lenovo": {
"": [
"LJ 3500",
"LJ 3550",
"M 7750 N"
]
}
},
I've to do several things with this data, starting with fixing a little problem that i've got while they was written, if you look at the example that i've posted, the second and the third brother serie has an empty array string instead of the "brand" value that should be "Brother"... i've many records that miss the "brand" key for certain series, and this should be set to the previous serie brand, i.e. the "MFC" serie should has the top level key set to "Brother" that is the key of the previous serie.
I can do this using a view in couchdb?
After doing that i need to obtain a list of unique models using another view with every product associated to them.. in other words i've to select all of my products using the last level of the multidimensional array "models" as key (including also brand and serie values as secondary result for futher sorting and filtering) and all the products that contain that certain model as value.
An output like this:
key: "Brother, HL, 5200" - value: "id_product1, id_product2, idproduct3, etc."
Before i start to reading all documentation present on the earth can someone explain me if this thin is at least doable?
Thanks in advance...

HighStocks Array Series

Im creating a singleline series chart using dates and closing prices from yahoo. I have converted the dates into JS timestamps and put them in an array named timeStampArray and put the closing prices into an array named closePrices.
I can populate the chart with data like so:
data : [
[ 1361750400000, 442.80],
[ 1361491200000, 450.81]
],
I wish to use the data from my arrays and the API says to use an array with two values for x and y, like this
data: [[5, 2], [6, 3], [8, 2]]
therefore can I combine my two arrays so that they fit this format?
I can only find examples of how to combine my arrays into key-value pairs like this {'test1':'1', 'test2':'2'};
Also when I create the chart using hardcoded data it orders the dates in ascending order but I want it to keep the ordering that they are input, e.g 25th Feb before 22nd Feb as this is showing historical data.
Is there a way to correct this?
Heres the jsFiddle of my current code: http://jsfiddle.net/mXnZy/
update: ive tried
var timeClose = new Array();
for(var i=0; i<data.query.results.quote.length; i++)
{
timeClose.push( [timeStampArray[i], closePrices[i]] );
}
however this outputs [1361750400000, 442.80, 1361491200000, 450.81] which is wrong.
If you mean that you want them sorted in reverse order, you can use the 'reversed' property on the x axis:
http://api.highcharts.com/highstock#xAxis.reversed
If you mean that you want them listed in whatever order they're entered, without being sorted, it will be much more complicated.
You could provide ordinal x values, and provide the date as additional data. You could then use the axis label formatter to show the dates that you wish.

How can I order datetime strings in Javascript?

I get from youtube JSON request (after a small parsing of the objects) these strings (which should represents datetime) :
2009-12-16T15:51:57.000Z
2010-11-04T10:01:15.000Z
2010-11-04T14:00:04.000Z
2010-11-04T11:12:36.000Z
2010-11-04T10:24:26.000Z
2010-11-04T12:05:58.000Z
2010-04-30T13:28:08.000Z
2010-11-17T13:57:27.000Z
In fact I need to order these list (descending), for taking the recent video published.
But how can I order those datetime? Is there a native method on JS?
You can just use a default sort method for this because the dates are perfectly formatted to do some sorting (year, month, day, hour, minute, second). This would be much more difficult if that was the other way around. Check out sort for example:
var unsortedArray = [
"2009-12-16T15:51:57.000Z",
"2010-11-04T10:01:15.000Z",
"2010-11-04T14:00:04.000Z",
"2010-11-04T11:12:36.000Z" ];
var sortedArray = unsortedArray.sort();
If you would like to reverse (descending) sorting, add .reverse() to the sorted array.
An easy way to achieve this would be to put all those into an array of strings and sort that array.
var arr = [ "2", "1", "3" ];
arr.sort(); // this gives [ "1", "2", "3" ]
You can read the full doc there :
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/array/sort
You asked for a descending sort. A quick way is to use reverse.
http://jsfiddle.net/6pLHP/
a = [
"2009-12-16T15:51:57.000Z",
"2010-11-04T10:01:15.000Z",
"2010-11-04T14:00:04.000Z",
"2010-11-04T11:12:36.000Z",
"2010-11-04T10:24:26.000Z",
"2010-11-04T12:05:58.000Z",
"2010-04-30T13:28:08.000Z",
"2010-11-17T13:57:27.000Z"
];
alert(JSON.stringify(a.sort().reverse()));

Categories

Resources