In the Middle explainer


The aim of this puzzle: Add another set of dots that are medium-sized.
Walkthrough of the solution: The for loop will loop 50 times, and each time, it will make a big blue circle and a little green circle. You’ll basically need to copy one of the commands and change the size and color. You’ll want to start writing the new command between the other two because it will be medium-sized and that gives it a better chance that it won’t get covered up by the big circle, or cover up the little circle (however, there’s no guarantee it won’t happen the next time through the loop). The size is set by the 'r' attribute, and it needs to be between 5 and 15 because those are the radii for the small and large circles. The color can be whatever you want, but find something you think looks nice!
Sample code solution:
(Tap below to reveal)

for (var i = 0; i < 50; i = i + 1) {
    .attr('r', 15)
    .attr('cx', pickRandom(position))
    .attr('cy', pickRandom(position))
    .attr('fill', 'dodgerblue');
    .attr('r', 10)
    .attr('cx', pickRandom(position))
    .attr('cy', pickRandom(position))
    .attr('fill', 'white');
    .attr('r', 5)
    .attr('cx', pickRandom(position))
    .attr('cy', pickRandom(position))
    .attr('fill', 'lime');

JavaScript Concepts: Binary Expression (+, <), Code Block (for loop), Calling Functions, Call Nesting
Grasshopper Concepts: pickRandom()
D3 Concepts: .append(), .attr(‘r’,), .attr(‘cx’,), .attr(‘cy’,), .attr(‘fill’,)
Additional Code: There is hidden code that runs before the puzzle’s code that creates the variable position.


There appears to be a bug in the provided code; position is used for both cx and cy, but the window size appears to be about 440x230 (i.e., x and y are not the same dimensions). Is this deliberate?



Hey @Scott_McNay,

position is defined in the additional code like this:

var position = [];
for (var i=15; i<=window.innerWidth; i+=30) position.push(i);

It is dependent on the window width, since that is wider than the window height the same array of numbers are picked from randomly to decide both cx and cy. The aim is to simply change the distribution of circles each time the code runs, rather than being purely random locations. This creates a new pattern each time, while still being an organized grouping of shapes.

H :slight_smile:


Please help me complete this. I am unable to even after entering the code given as solution



Can you share a screenshot of your code? We can take a look at it and help you get it working.



Thanks a lot for the support. I could clear it. There was an extra bracket in the code. It happened so because of the typing method in the app. To add a new property, we have to tap the last added one. The tap was not proper … Ended up with an unwanted bracket in code…

Thanks sir,

Will surely mail you with next doubt

Have a blooming day



i is number of circles . And i < 50 means circles can’t reach more than 50 .


Continuing the discussion from In the Middle explainer:


In the middle circle, there is an .attr() call attached to a pickRandom() call. Try deleting the .attr('cy',...) and adding it back to the end of the whole chain.



This is a situation where looking at the pattern can reveal the issue; there is only one right-parenthesis after the first pickRandom instead of two, and at the end of the line there are two instead of one, unlike the other two lines.