scatter plot d3.js freecodecamp pronect having trouble with yscale displaying minutes - javascript

I had completed all 14 user stories, except 2, userstory #6 and #12 they are related to each other (about YScale domain and range, and converting it to minutes)
It's been two days I stuck on this, I will share my code
Can anyone tell me what is the bug in my code.
##https://codepen.io/codebrakerk/pen/ZEWOPpz

You need to access "Time" from your dataset.
{
"Time": "36:50",
"Place": 1,
"Seconds": 2210,
"Name": "Marco Pantani",
"Year": 1995,
"Nationality": "ITA",
"Doping": "Alleged drug use during 1995 due to high hematocrit levels",
"URL": "https://en.wikipedia.org/wiki/Marco_Pantani#Alleged_drug_use"
}
I guess the "Seconds" attribute implies the time it took for the person to complete his run. Your time code should run as follows:
(item) => {
let t = item["Time"].split(':');
return new Date(minutes=t[0], seconds=t[1]);
}

Related

figuring out Chartjs dataset

I have a challenge with displaying data in a barchart. I choose to use Chartjs as it seemed the best free fit for my needs.
Though the principle of datasets is clear, I can't get my head around the following:
I need to display 2 assignment ratings (y-axis) of 10 people grouped per course (x-axis).
"id": "15686a84-a0cb-4944-b268-f25f2b3b89e1",
"user_id": 5,
"assignment": {
"course_id": 100002,
"difficulty": 4,
"fun": 1
}
},
{
"id": "8e567e3d-3618-445d-8148-e1977016e238",
"user_id": 6,
"assignment": {
"course_id": 100012,
"difficulty": 1,
"fun": 3
}
},
Here are two assignment records shown for two different users (2, 6) for two different courses (10002, 100012) with both two ratings (fun, difficulty) so you can see how the data is constructed.
if i use:
data: assignments
.filter((assignment) => assignment.user_id === s.id)
.map((a) => [a.assignment.difficulty, a.assignment.fun]),
Chartjs will interpret the two values of difficulty and fun as a min and max. But I want them to be treated as two seperate values.
I tried everything but I didn't found the holy grail yet.
Can any one help me digging into this?

Iterate over JSON arrays with javascript

I'm having problems with extracting two arrays from json using javascript and outputting them to a bootstrap list.
In testing this I've been able to get this far. I can't quite figure what's wrong.
var data = [{
"title": "Ligo First Light",
"date": "2012-06-23",
"category": "scheduled",
"wikipedia": "The first direct observation of gravitational waves was made on 14 September 2015 and was announced by the LIGO and Virgo collaborations on 11 February 2016.[3][4][5] Previously, gravitational waves had only been inferred indirectly, via their effect on the timing of pulsars in binary star systems. The waveform, detected by both LIGO observatories,[6] matched the predictions of general relativity[7][8][9] for a gravitational wave emanating from the inward spiral and merger of a pair of black holes of around 36 and 29 solar masses and the subsequent ringdown of the single resulting black hole.[note 2] The signal was named GW150914 (from Gravitational Wave and the date of observation 2015-09-14).[3][11] It was also the first observation of a binary black hole merger, demonstrating both the existence of binary stellar-mass black hole systems and the fact that such mergers could occur within the current age of the universe.",
"youtube": [{
"publishDate": "1976-03-04T04:19:34.259Z",
"url": "https://www.youtube.com/embed/B4XzLDM3Py8"
},
{
"publishDate": "1976-03-04T04:19:34.259Z",
"url": "https://www.youtube.com/embed/CKynfOx3-ac"
}
],
"articles": [{
"title": "Observation of Gravitational Waves from a Binary Black Hole Merger",
"publishDate": "1976-03-04T04:19:34.259Z",
"url": "https://physics.aps.org/featured-article-pdf/10.1103/PhysRevLett.116.061102"
},
{
"title": "First observation of gravitational waves",
"publishDate": "1997-11-03T10:03:39.123Z",
"url": "https://en.wikipedia.org/wiki/First_observation_of_gravitational_waves"
},
{
"title": "Gravitational Waves Detected 100 Years After Einstein's Prediction",
"publishDate": "1997-11-03T10:03:39.123Z",
"url": "https://www.ligo.caltech.edu/news/ligo20160211"
}
]
}];
function getArrayByName(name) {
return data.filter(
function(data) {
return data.name == name
}
);
}
var found = getArrayByName('youtube');
document.getElementById('output').innerHTML = found[0].url;
<div id="output"></div>
I think you are looking for something like this:
var data = [{
"title": "Ligo First Light",
"date": "2012-06-23",
"category": "scheduled",
"wikipedia": "The first direct observation of gravitational waves was made on 14 September 2015 and was announced by the LIGO and Virgo collaborations on 11 February 2016.[3][4][5] Previously, gravitational waves had only been inferred indirectly, via their effect on the timing of pulsars in binary star systems. The waveform, detected by both LIGO observatories,[6] matched the predictions of general relativity[7][8][9] for a gravitational wave emanating from the inward spiral and merger of a pair of black holes of around 36 and 29 solar masses and the subsequent ringdown of the single resulting black hole.[note 2] The signal was named GW150914 (from Gravitational Wave and the date of observation 2015-09-14).[3][11] It was also the first observation of a binary black hole merger, demonstrating both the existence of binary stellar-mass black hole systems and the fact that such mergers could occur within the current age of the universe.",
"youtube": [{
"publishDate": "1976-03-04T04:19:34.259Z",
"url": "https://www.youtube.com/embed/B4XzLDM3Py8"
},
{
"publishDate": "1976-03-04T04:19:34.259Z",
"url": "https://www.youtube.com/embed/CKynfOx3-ac"
}
],
"articles": [{
"title": "Observation of Gravitational Waves from a Binary Black Hole Merger",
"publishDate": "1976-03-04T04:19:34.259Z",
"url": "https://physics.aps.org/featured-article-pdf/10.1103/PhysRevLett.116.061102"
},
{
"title": "First observation of gravitational waves",
"publishDate": "1997-11-03T10:03:39.123Z",
"url": "https://en.wikipedia.org/wiki/First_observation_of_gravitational_waves"
},
{
"title": "Gravitational Waves Detected 100 Years After Einstein's Prediction",
"publishDate": "1997-11-03T10:03:39.123Z",
"url": "https://www.ligo.caltech.edu/news/ligo20160211"
}
]
}];
function getArrayByName(name) {
return data.filter(
function(item) {
return item[name];
}
)[0][name];
}
var found = getArrayByName('youtube');
document.getElementById('output').innerHTML = found[0].url;
Here we are first filtering the data array by the name property. So, all elements in the data array which contain the supplied name will be returned. Then we are accessing the first element of the returned list and returning the value of the name property.

map a 2d array array to produce leaflet.js markers

Hi I'm having some trouble generating my markers in leaflet js. I have an object which has multiple entries per year. I want to create a layer group for each year that can be switched on and off. But i've hit a sticking point, I cant quite figure out how to map only the entries that match the parent array. IE 2016 == 2016.year...
My trouble is not being able how to map the second level items. The object is like this:
{
"2016": [
{
"year": 2016,
"latitude": 50.9500019,
"longitude": 6.4836722
},
{
"year": 2016,
"latitude": 50.9500019,
"longitude": 6.4836722
}
],
"2017": [
{
"year": 2017,
"latitude": 50.9500019,
"longitude": 6.4836722
}
]
}
and the code is this:
const getGroupMarkers = (array, groupName) => Object.keys(array).map(function(keys, value){
array[keys].map(createMarkers.bind(groupName));
});
This works to a degree but it returns all the years not just 2016.
Here's a pen of what I'm working on. Line 270 for the function in question.
https://codepen.io/sharperwebdev/pen/gvEQXe?editors=0010
Any help would be greatly appreciated, I'm scratching my head a bit with this one.
Thanks
I managed to do this with bracket notation. array[requiredEntry].map(callback);

Programmatically highlighting DyGraph time series

I’m putting together an web-app that plots time series of weather data for the current year and the past 10 years on one dygraph. I want the time series for the current year (2015 at this time) to be highlighted relative to the past years, so I’m trying to increase the strokewidth for the current year from a default of 2 to 5. My problem is that I’m having trouble getting this to work programatically. The daily data for each year is in native array format, so the time series are identified by the contents of the array Yr0Labels:
["Date", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015"]
Next January 1 the Yr0Labels will programmatically change to:
["Date", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015",”2016”]
In the dygraph options parameter I set default strokeWidth to 2 and the strokeWidth for 2015 to 5. Because I want the current calendar year data to be highlighted properly after Jan. 1 , I’ve tried identifying the series to be highlighted by the contents of yr0Labels[11],
{
……
strokeWidth: 2,
labels: yr0Labels,
series: { yr0Labels[11] : { strokeWidth: 5} },
……..
}
This produced a syntax error - SyntaxError: missing : after property id
Suspecting that dygraph didn’t want to see array syntax in the series identifier, I tried to identify the series via a string variable “cyear”,
cyear = yr0Labels[11];
{…strokeWidth: 2,
labels: yr0Labels,
series: { cyear : { strokeWidth: 5} },
…….}
This didn’t produce an error, but also didn’t highlight the series.
The only way I’ve been able to make this work is to directly enter the current year value as the series identifier,
{…strokeWidth: 2,
labels: yr0Labels,
series : { ‘2015’ : { strokeWidth: 5} },
…….}
This worked, but I’d have to edit the dygraph option parameter every Jan. 1 to make data for the current calendar year plot properly.
How I can make this highlighting work programmatically?
The issue is with how you're using keys in JavaScript object literals.
This:
{ foo: 'bar' }
is the same as:
{ 'foo': 'bar' }
even if there's a variable in scope called foo. To achieve the result you want, you need to do fill out your objects using something like:
var foo = 'blah';
var o = {};
o[foo] = 'bar';

Plotting an empty interval for elasticsearch date histogram

I'm using an elasticsearch date histogram to group responses by count over time. The date histogram facet works great for this but if an interval doesn't have any responses that fall within in it it doesn't show up in the json. I figured the best way to combat this is to use javascript to fill in the gaps in a charting library. (ideally in highcharts but d3 or something else is possible). Months seem pretty easy to do but it get more complicated when I need to do it by week and day as well. Basically my problem is:
{ date: April: 5, count: 5 }, { date: June, count: 10 }
needs to be more like
{ date: April: 5, count: 5 }, {date: May, count: null }, { date: June, count: 10 }
min_doc_count=0 only creates intervals in between nonempty buckets. If you want to plot empty intervals outside your buckets (a few months ahead or behind of the start of your data), then add extended_bounds (docs).
In elasticsearch_dsl, to allow empty buckets out to two years ago, this looks like
A(
"date_histogram",
field="publishedAt",
calendar_interval="month",
format="MMM yyyy",
min_doc_count=0,
extended_bounds={"min": f"{date:%b %Y}||-2y"},
),
I had the same issue for a while after searching and reading the documentation I found out extended_bounds will fix my problem:
{
"aggs": {
"total": {
"date_histogram": {
"extended_bounds": {
"max": "2022-11-01",
"min": "2015-09-04"
},
"field": "eventDate",
"calendar_interval": "1d",
"min_doc_count": 0
}
}
}
}

Categories