Develop Reference

d3 break line graph if no data

I am using dc to create a line graph where capacity is on the y-axis and week is on the x-axis. For weeks, the range is 1-52, but there is no data from weeks 2-40. I only have data for week 1 and 41-52, but my line graph is still creating a line when there is no data:
How do I get it so the line graph will break if there are no values? So it wouldn't be one connected line. Here is my code for reference
let chart = dc.lineChart("#chart");
let ndx = crossfilter(results);
let weekDimension = ndx.dimension(function (d) {
return d.week = +d.week;
});
function reduceAdd(p, v) {
++p.count;
p.total += v.capacity;
p.average = p.total / p.count;
return p;
}
function reduceRemove(p, v) {
--p.count;
p.total -= v.capacity;
p.average = p.count ? p.total / p.count : 0;
return p;
}
function reduceInitial() {
return { count: 0, total: 0, average: 0 };
}
let capacityGroup = weekDimension.group().reduce(reduceAdd, reduceRemove, reduceInitial);
chart.width(360)
.height(200)
.margins({ top: 20, right: 20, bottom: 50, left: 30 })
.mouseZoomable(false)
.x(d3.scale.linear().domain([1, 52]))
.renderHorizontalGridLines(true)
.brushOn(false)
.dimension(weekDimension)
.valueAccessor(function (d) {
return d.value.average;
})
.group(capacityGroup);
dc.renderAll('chart');
This is how results would look like
{month : "1", capacity: "48"}
{month : "1", capacity: "60"}
{month : "42", capacity: "67"}
{month : "42", capacity: "60"}
{month : "43", capacity: "66"}
{month : "44", capacity: "52"}
{month : "45", capacity: "63"}
{month : "46", capacity: "67"}
{month : "47", capacity: "80"}
{month : "48", capacity: "61"}
{month : "48", capacity: "66"}
{month : "49", capacity: "54"}
{month : "50", capacity: "69"}
I have tried to add .defined(d => { return d.y != null; }); and .defined(d => !isNaN(d.value)); but that didn't do anything... Any help will be greatly appreciated

As we discussed in the comments, the important problem is that dc.js will only draw the data it receives. It doesn't know if data is missing, so we will need to fill in the nulls in order to draw gaps in the line.
I linked to a previous question, where the data is timestamps. The answer there uses a d3 time interval to generate the missing timestamps.
However, your data uses integers for keys (even though it represents weeks), so we will need to change the function a little bit:
function fill_ints(group, fillval, stride = 1) { // 1
return {
all: function() {
var orig = group.all();
var target = d3.range(orig[0].key, orig[orig.length-1].key, stride); // 2
var result = [];
for(var oi = 0, ti = 0; oi < orig.length && ti < target.length;) {
if(orig[oi].key <= target[ti]) {
result.push(orig[oi]);
if(orig[oi++].key === target[ti])
++ti;
} else {
result.push({key: target[ti], value: fillval});
++ti;
}
} // 3
if(oi<orig.length) // 4
Array.prototype.push.apply(result, orig.slice(oi));
if(ti<target.length) // 5
result = [...result, ...target.slice(ti).map(t => ({key: t, value: fillval}))];
return result;
}
};
}
This function takes a group, the value to fill, and a stride, i.e. the desired gap between entries.
It reads the current data, and generates the desired keys using d3.range.
It walks both arrays, adding any missing entries to a copy of the group data.
If there are any leftover entries from the original group data, it appends it.
If there are any remaining targets, it generates those.
Now we wrap our original group using this function, creating a "fake group":
const filledGroup = fill_ints(capacityGroup, {average: null});
and pass it to the chart instead:
.group(filledGroup);
One weakness of using LineChart.defined(), and the underlying d3.line.defined, is that it takes two points to make a line. If you have isolated points, as week 1 is isolated in your original data, then it won't be shown at all.
In this demo fiddle, I have avoided the problem by adding data for week 2.
But what about isolated dots?
I was curious how to solve the "isolated dots problem" so I tried showing the built-in dots that are usually used for a mouseover effect:
chart.on('pretransition', chart => {
const all = chart.group().all();
isolated = all.reduce((p, kv, i) => {
return (kv.value.average !== null &&
(i==0 || all[i-1].value.average == null) &&
((i==all.length-1 || all[i+1].value.average == null))) ?
{...p, [kv.key]: true} : p;
}, {});
chart.g().selectAll('circle.dot')
.filter(d => isolated[d.data.key])
.style('fill-opacity', 0.75)
.on('mousemove mouseout', null)
})
This works but it currently relies on disabling the interactivity of those dots so they don't disappear.

Alerting data specifics inside array

I'm running into a javascript beginner's problem. I have this data stored in an array, and I'm trying to alert the data to see if it checks out.
I want to alert myself the average of the distance of all, not both planets even though both is all in this case, but I eventually want to have an array that keeps a lot more than just two. Right now, it just alerts the distance of the last record in the array list, which is weird. I thought it'd be an average for all.
Also, how do I program the least and highest numbers of the "Distance" property in the array, and then alert the "Host name" with it. So, if I have a button and I click on "Closest", the Host name of the lowest number in "Distance [pc]" will be alerted. I only need an example of the code for "Distance", so I'll know how to do the same for all other variables.
Thank you if you're willing to help out!
Btw, the list is JSON data. Maybe important to mention this.
// this array holds the json data, in this case stastics of exoplanets retrieved from nasa's website
var arr= [ {
"rowid": 684,
"Host name": "K2-15",
"Number of Planets in System": 1,
"Planet Mass or M*sin(i)[Jupiter mass]": null,
"Planet Radius [Jupiter radii]": 0.221,
"Planet Density [g": {
"cm**3]": null
},
"Distance [pc]": 437,
"Effective Temperature [K]": 5131,
"Date of Last Update": "7/16/2015"
},
{
"rowid": 687,
"Host name": "K2-17",
"Number of Planets in System": 1,
"Planet Mass or M*sin(i)[Jupiter mass]": null,
"Planet Radius [Jupiter radii]": 0.199,
"Planet Density [g": {
"cm**3]": null
},
"Distance [pc]": 134,
"Effective Temperature [K]": 4320,
"Date of Last Update": "7/16/2015"
}];
//every record is put in a variable
var rowid;
var hostName;
var numberOfPlanetsInSystem;
var planetMass;
var planetRadius;
var distance;
var effectiveTemperature;
for(var i=0;i<arr.length;i++){
rowid= arr[i]["rowid"];
hostName= arr[i]["Host name"];
numberOfPlanetsInSystem= arr[i]["Number of Planets in System"];
planetMass= arr[i]["Planet Mass or M*sin(i)[Jupiter mass]"];
planetRadius= arr[i]["Planet Radius [Jupiter radii]"];
distance= arr[i]["Distance [pc]"];
effectiveTemperature= arr[i]["Effective Temperature [K]"];
};
//alert to test it out
alert(distance);

let totalDistance = maxDistance = 0;
let minDistance = arr[0]["Distance [pc]"];
let closestHost = farthestHost = "";
for(let i = 0; i < arr.length; i ++) {
totalDistance += arr[i]["Distance [pc]"]
if (arr[i]["Distance [pc]"] < minDistance) {
minDistance = arr[i]["Distance [pc]"];
closestHost = arr[i]["Host name"];
}
if (arr[i]["Distance [pc]"] > maxDistance) {
maxDistance = arr[i]["Distance [pc]"];
farthestHost = arr[i]["Host name"];
}
}
let meanDistance = totalDistance/arr.length;

In your cycle you are always overwrite your variable distance, not adding them.
Use distance += arr[i]["Distance [pc]"]
+= measn distance = distance + arr[i]["Distance [pc]"]
EDIT
Here is a working jsFiddle
You need to init var distance = 0;
var distance = 0; //Important!
var arr = [{
"rowid": 684,
"Host name": "K2-15",
"Number of Planets in System": 1,
"Planet Mass or M*sin(i)[Jupiter mass]": null,
"Planet Radius [Jupiter radii]": 0.221,
"Planet Density [g": {
"cm**3]": null
},
"Distance [pc]": 437,
"Effective Temperature [K]": 5131,
"Date of Last Update": "7/16/2015"
},
{
"rowid": 687,
"Host name": "K2-17",
"Number of Planets in System": 1,
"Planet Mass or M*sin(i)[Jupiter mass]": null,
"Planet Radius [Jupiter radii]": 0.199,
"Planet Density [g": {
"cm**3]": null
},
"Distance [pc]": 134,
"Effective Temperature [K]": 4320,
"Date of Last Update": "7/16/2015"
}];
for (var i = 0; i < arr.length; i++) {
distance += arr[i]["Distance [pc]"];
};
alert('Total distance: ' + distance + "\n" + 'Number of planets: ' + arr.length + "\n" + 'Average: ' + distance / arr.length);

javascript/node JSON parsing issue

Here is my example data:
http://api.setlist.fm/rest/0.1/setlist/4bf763f6.json
I'm just writing a node app that prints out the details of this page. What I'm concerned with are sets, set and song.
var sets = setlist.sets
res.write(JSON.stringify(sets)) // THIS SHOWS THE CORRECT DATA
var numSets = Object.keys(sets).length;
for(var i = 0; i < numSets; i++){
res.write("\nsets " + i);
var set = sets.set[i];
console.log(Object.getOwnPropertyNames(set))
var numSet = Object.keys(set).length;
res.write(JSON.stringify(set))
for(var j = 0; j < numSet; j++){
res.write("\nset " + (j+1) + " of " + numSet);
var song = set.song;
console.log(Object.getOwnPropertyNames(song))
numSong = Object.keys(song).length;
for(var k = 0; k < numSong; k++){
res.write("\n song " + j + "-" + k);
res.write("\n "+JSON.stringify(song[k]["#name"]));
}
}
}
what I get is:
set 1 of 1
song 0-0
"Lift Me Up"
song 0-1
"Hard to See"
song 0-2
"Never Enough"
song 0-3
"Got Your Six"
song 0-4
"Bad Company"
song 0-5
"Jekyll and Hyde"
song 0-6
"Drum Solo"
song 0-7
"Burn MF"
song 0-8
"Wrong Side of Heaven"
song 0-9
"Battle Born"
song 0-10
"Coming Down"
song 0-11
"Here to Die"
There are TWO song elements in set: (sorry no code block or it won't wrap)
{
"set": [{
"song": [{
"#name": "Lift Me Up"
}, {
"#name": "Hard to See"
}, {
"#name": "Never Enough"
}, {
"#name": "Got Your Six"
}, {
"#name": "Bad Company",
"cover": {
"#disambiguation": "British blues-rock supergroup",
"#mbid": "0053dbd9-bfbc-4e38-9f08-66a27d914c38",
"#name": "Bad Company",
"#sortName": "Bad Company",
"#tmid": "734487",
"url": "http://www.setlist.fm/setlists/bad-company-3bd6b8b0.html"
}
}, {
"#name": "Jekyll and Hyde"
}, {
"#name": "Drum Solo"
}, {
"#name": "Burn MF"
}, {
"#name": "Wrong Side of Heaven",
"info": "Acoustic"
}, {
"#name": "Battle Born",
"info": "Acoustic and Electric"
}, {
"#name": "Coming Down"
}, {
"#name": "Here to Die"
}]
}, {
"#encore": "1",
"song": [{
"#name": "Under and Over It"
}, {
"#name": "Burn It Down"
}, {
"#name": "The Bleeding"
}]
}]
}
In Swift I just make set a Dictionary and it works just fine. Javascript is not my forte. Why can't I get that second song element?

setlist.set is an array of two objects, one containing the "regular"(?) songs and the other containing the encore information.
It looks like you are mixing up loop variables with other objects/arrays and not iterating what you think you're iterating.
Here's a simplified version that should show what you're expecting:
// `sets` is an object containing (at least) `set` and `url` properties
var sets = setlist.sets;
// `set` is an array containing (in your example, two) objects
var set = sets.set;
for (var i = 0; i < set.length; ++i) {
console.log('Set %d/%d', i+1, set.length);
// `curSet` is an object containing a `song` property
var curSet = set[i];
// `songs` is an array of objects
var songs = curSet.song;
for (var j = 0; j < songs.length; ++j) {
// `song` is an object containing properties like `#name` and possibly others
var song = songs[j];
console.log(' - Song: %s', song['#name']);
}
}

The line
var numSets = Object.keys(sets).length;
Should be
var numSets = sets.set.length;
May I also suggest that you use a forEach loop rather than a for loop (a .map() would be even better). for loops are much more prone to bugs than the alternatives.

Values of a graph

I have a pentagon graph made up with SVG coding. So I made the pentagon with codes like so:
<svg><path cs="100,100" d="M0.5,-62.5 L60.5,-18.5 L37.5,51.5 L-36.5,51.5 L-59.5,-18.5 L0.5,-62.5 M0,0 L0,0"></svg>
Right now, on a graph perspective, the pentagon is showing values of 30 for each side. I am trying to find a way to change the values without always having to go inside PATH CS to change the degree values.
Anyone have an idea, I have been looking it up and found that connecting it with a javascript would be the best case but I have no idea how to write the proper javascript. Could anyone help?

I'm not sure it answers your question. I don't understand what is cs property neither what you really want to modify.
But, here is a way (maybe not the best) to access all your polygon's points by javascript :
You can set all your d points into an array of array, then access each point by modifying it
var p = document.querySelector('path');
var a = [
[ ["M"],[0.5, -62.5] ],
[ ["L"],[60.5, -18.5] ],
[ ["L"],[37.5, 51.5] ],
[ ["L"],[-36.5, 51.5] ],
[ ["L"],[-59.5, -18.5] ],
[ ["L"],[0.5, -62.5] ],
[ ["M"],[0, 0] ],
[ ["L"],[0, 0] ]
];
function draw() {
//loop through the array to join path descriptions with their values
var d = function(){var r = '';for (var i = 0; i < a.length; i++) r += a[i].join('') + " "; return r;};
p.setAttribute('d', d());
}
//EXAMPLes
//Change each value manually then redraw
p.addEventListener('click', function() {
a[1][1][0] ++;
a[2][1][1] --;
draw();
}, false);
//a simple function to change values of set points
function move(point, xy, newValue) {
a[point][1][xy] = newValue;
draw();
}
window.onclick = function() {
move(2, 0, 75);
};
<svg>
<path cs="100,100" d="M0.5,-62.5 L60.5,-18.5 L37.5,51.5 L-36.5,51.5 L-59.5,-18.5 L0.5,-62.5 M0,0 L0,0">
</svg>
If you won't change the structure (number of points) of your polygon, then you can use a simpler structure :
var p = document.querySelector('path');
var a = [
[0.5, -62.5],
[60.5, -18.5],
[37.5, 51.5],
[-36.5, 51.5],
[-59.5, -18.5],
[0.5, -62.5],
[0, 0],
[0, 0]
];
function draw() {
//HardWrite the path descriptions
p.setAttribute('d', "M" + a[0] + " " + "L" + a[1] + " " + "L" + a[2] + " " + "L" + a[3] + " " + "L" + a[4] + " " + "L" + a[5] + " " + "M" + a[6] + " " + "L" + a[7]);
}
//Change each value manually then redraw
p.addEventListener('click', function() {
a[1][0] ++;
draw();
}, false);
//a simple function to change values of set points
function move(point, xy, newValue) {
a[point][xy] = newValue;
draw();
}
window.onclick = function(){ move(2, 0, 75);};
<svg>
<path cs="100,100" d="M0.5,-62.5 L60.5,-18.5 L37.5,51.5 L-36.5,51.5 L-59.5,-18.5 L0.5,-62.5 M0,0 L0,0">
</svg>

First Javascript program. What am I doing wrong?

I have finally gotten around to creating my first little practice program in Javascript. I know it's not elegant as it could be. I have gotten most of this code to work, but I still get an "undefined" string when I run it a few times. I don't know why. Would someone be kind enough to explain to me where this undefined is coming from?
var work = new Array();
work[1] = "product design";
work[2] = "product system design";
work[3] = "product social media post x5";
work[4] = "product Agent Recruitment system design";
work[5] = "product profile system design";
work[6] = "product Agent testing design";
work[7] = "product customer support";
work[8] = "product promotion";
var course = new Array();
course[1] = "javascript";
course[2] = "mandarin";
course[3] = "javascript practical-Code Academy";
course[4] = "javascript practical-learn Street";
course[5] = "mandarin practical-memrise";
course[6] = "new stuff with audiobooks";
var activity = new Array();
activity[1] = "listen to podcasts";
activity[2] = "chat online";
activity[3] = "Exercise";
activity[4] = "take a walk";
activity[5] = "call a friend";
var picker1 = Math.floor(Math.random()*3+1);
var picker2 = Math.floor(Math.random()*work.length+1);
var picker3 = Math.floor(Math.random()*course.length+1);
var picker4 = Math.floor(Math.random()*activity.length+1);
var group_pick = function(){
if(picker1 === 1){
return "Time to work on ";
} else if(picker1 === 2){
return "Time to learn some ";
} else if (picker1 === 3){
return "Lets relax and ";
} else {
return "error in group_pick";
}
};
var item_pick = function() {
if (picker1 === 1) {
return work[picker2] ;
} else if (picker1 === 2) {
return course [picker3] ;
} else if (picker1 === 3) {
return activity[picker4] ;
} else {
return "error in item_pick";
}
};
var task = group_pick() + item_pick();
document.write(task);

Array's start with an index of zero. When you assign a value to the 1 index, a 0 index is created you, with no value (undefined).
var arr = new Array();
arr[1] = 'hi!';
console.log(arr); // [undefined, "hi!"]
console.log(arr.length) // 2
Length is 2, check that out. You thought you had one item in that array but length is 2.
Usually it's easier to not manage the array indices yourself. And the array literal syntax is usually preferred for a number of reasons.
var arr = [];
arr.push('hi!');
console.log(arr); // ["hi!"]
console.log(arr.length) // 1
Or just create the array with the items in it directly, very handy.
var arr = [
"hi",
"there!"
];
console.log(arr); // ["hi", "there"]
console.log(arr.length) // 2
Once you are making the arrays properly, you can get a random item with simply:
var arr = ['a','b','c'];
var index = Math.floor(Math.random() * arr.length);
console.log(arr[index]); // "a", "b" or possibly "c"
This works because var index will be calculated by a random value of between 0.0 and up to but not including 1.0 times 3 (the length of the array). Which can give you a 0, 1 or a 2.
So this arr right here, has 3 items, one at 0, one at 1, and one at 2.
Learning to address arrays from zero can be mentally tricky. You sort of get used to it. Eventually.
A working example using these tips here: http://jsfiddle.net/du5Jb/
I changed how the arrays are declared, and removed the unneeded +1 from var pickerX calculations.

The problem is that the .length attribute for arrays counts the number of elements in the array starting from zero. So for example activity has elements 1 through 5, so according to Javascript the .length is actually 6. Then your random number calculation will choose a number from 1 through 7, past the end of the array. This is where the undefined comes from.
You can fix this by starting your index numbering at 0 instead of 1, so activity would have elements 0 through 4, with a .length of 5. Also remove the +1 from your choice calculations.

When you use your "pickers", you don't want to have the +1 inside of the `Math.floor functions.
Consider this array:
var array = [ "one", "two", "three" ];
array.length; // 3
The length is 3 -- makes sense, there are 3 items inside.
But arrays are zero-based.
array[0]; // "one"
array[1]; // "two"
array[2]; // "three"
array[3]; // undefined
So when you add that + 1, you're:
a) making it impossible to pick the first thing in the array
b) making it possible to pick a number that is exactly 1 higher than the last element in the array (undefined)

The problem here as i see it is that when you generate your random variables you're doing PickerX + 1...
So the right way to do it would be PickerX without the +1.
Also Off topic you shouldn't use if commands, try using switch case...
Here's the fixed code-
var work = new Array()
work[0] = "product design";
work[1] = "product system design";
work[2] = "product social media post x5";
work[3] = "product Agent Recruitment system design";
work[4] = "product profile system design";
work[5] = "product Agent testing design";
work[6] = "product customer support";
work[7] = "product promotion";
var course = new Array();
course[0] = "javascript";
course[1] = "mandarin";
course[2] = "javascript practical-Code Academy";
course[3] = "javascript practical-learn Street";
course[4] = "mandarin practical-memrise";
course[5] = "new stuff with audiobooks";
var activity = new Array();
activity[0] = "listen to podcasts";
activity[1] = "chat online";
activity[2] = "Exercise";
activity[3] = "take a walk";
activity[4] = "call a friend";
var picker1 = Math.floor(Math.random() * 3 +1 );
var picker2 = Math.floor(Math.random() * work.length );
var picker3 = Math.floor(Math.random() * course.length );
var picker4 = Math.floor(Math.random() * activity.length );
var group_pick = function(){
switch(picker1){
case 1:
return "Time to work on ";
case 2:
return "Time to learn some ";
case 3:
return "Lets relax and ";
default:
return "error in group_pick";
}
};
var item_pick = function() {
switch(picker1){
case 1:
return work[picker2] ;
case 2:
return course [picker3] ;
case 3:
return activity[picker4] ;
default:
return "error in item_pick";
}
};
var task = group_pick() + item_pick();
document.write( task );​

Don't work so hard. Zero is your friend. Let's go golfing...
var work = [
"product design", "product system design",
"product social media post x5",
"product Agent Recruitment system design",
"product profile system design",
"product Agent testing design",
"product customer support", "product promotion",
], course = [
"javascript", "mandarin",
"javascript practical-Code Academy",
"javascript practical-learn Street",
"mandarin practical-memrise", "new stuff with audiobooks",
], activity = [
"listen to podcasts", "chat online", "Exercise",
"take a walk", "call a friend",
];
function rint(cap) {
return (Math.random() * cap) | 0;
}
function pick(item) {
switch (item) {
case 0: return "Time to work on " +
work[ rint(work.length) ];
case 1: return "Time to learn some " +
course[ rint(course.length) ];
case 2: return "Lets relax and " +
activity[ rint(activity.length) ];
default: return "error";
}
}
document.write(pick(rint(3)) + '<br>');