Totally. I plan to devote the next episode to all this stuff. Thanks for the suggestion!
I did not do much this time for the assignment but looking forward to learning and creating cool stuff. 
Connecting the dots with lines:
2 Likes
Here is my solution for the exercise:
I just used a reduce function to compute the lines set and I put such a code in the vizData module. I put the code there, since it resembles much more a processing for the viz rather than a raw data creation.
my reduce function
const lines = data.reduce((accumulator, currentValue, index) => {
const nextElement = data[index + 1];
if(typeof nextElement !== 'undefined') {
accumulator.push({
'x1' : currentValue.x,
'y1' : currentValue.y,
'x2' : nextElement.x,
'y2' : nextElement.y,
'r': currentValue.r,
});
}
return accumulator;
}, []);
Then I exploited the selectAll / data / join pattern to build lines and keep them up to date.
Not sure if there is an easier way to achieve that. Peeking in the @adilzeshan solution, I guess there is, but I didn’t find anything else to get this exercise done when I looked into my JS/D3 toolkit.
1 Like
And here is a kind of lollipop trees collection, rising and falling with a sin-like pace
2 Likes
Whooo great! I finally got it. For those interested in it, @adilzeshan and @curran explain this approach based on a D3’s line generator here. Very clean and elegant!
You might want to get rid of this little difference in the path overlapping
You can just invert the order of the circle and the path selections putting the path selection first. Working this way, the new items created in the enter / update pattern follow the same “z” rule. e.g.,
Still not sure about the reason why this issue is happening only in the reverse order.
EDIT:
Just wanna share my Aha-moment! This happens due to the order we are modifying the DOM with, using the enter / update / exit (aka join) pattern!
Case 1: circles, then path
If we have:
selection
.selectAll('circle')...
selection
.selectAll('path')...
our starting dom looks like:
<circle></circle>
<circle></circle>
.
.
.
<circle></circle>
<path></path>
The path element is a kind of a singleton that is only going to change values in its d attribute respect to dots coordinates! And this is perfectly fine. However, when we start to iterate over time, new circles are added and removed after the path element, thus creating a kind of mismatch in “z” ordering!
Case 2: path, then circles
In this case we have:
selection
.selectAll('path')...
selection
.selectAll('circle')...
therefore our DOM looks like:
<path></path>
<circle></circle>
<circle></circle>
.
.
.
<circle></circle>
This time, all new circles are appended in a consistent z ordering.
Now, I can exit from this rabbit hole! 
1 Like
Very nice! An alternative way to deal with constent ordering would be to put the circles into a group element. Great work!
Thanks! Yes, group element! Super suggestion. The simpler way I’ve found is the following:
selection
.selectAll('g')
.data([null])
.join('g')
.selectAll('circle')
.data(data)
.join('circle')
...
The orders of the selections still matters. E.g., here you have the path over all the (grouped) circles:
1 Like
Very nice! That’s perfect. The .data([null]) is a great way to handle it.
Trying to catch-up on the Exercises. Here’s my attempt at plotting the sine and cosine curves - keeping in with the “black and white” theme 
4 Likes
Added a connecting line using lineGenerator function in ‘d3’.
2 Likes
I tried making the DNA shape , but this is all i got 
thanks to Adil’s code i was able to connect the dots vertically.
Hey that’s pretty darn good! Try forking and varying parameters until it’s really cool.
1 Like
Circles change colour and size with time and form a massive worm
Amazing! That’s art right there.
Excellent course
1 Like
Thanks! Nice work you’ve done there. I love the color changes.
I just know there was a simpler way of doing this, but I learned a lot doing it.
1 Like
Wow that’s so cool! Excellent work!
Thanks for the amazing lessons, Curran. Do you think there will be future episodes? I would definately like to tag along in the future.