Help with Simon Zipline regarding d3.js

So I used D3 to do this. I place in an array with values from one to four called master which I use to run a sequence on the game when on the on/off swtich is toggled. I notice that it play’s fine when i press it, but if I place my mouse over the object, the sound plays, but the transition used on the object does not happen. so when the number 3 is processed, the sound for red plays, but the transition from red to light red to red again doesn’t happen.

Does anyone know why this is?


See the Pen Simon Game by Ben C (@bennibee23) on CodePen.


I’m using d3 for my simon game, too. It is not working yet but for a different
reason from your problem.
Here is how I did the transition,

(open it in a new window). I haven’t looked at your code yet but here is an example ofhow I made the transition work,“path”).transition(300)
.attr(“d”, arcFinal3)
.attr(“stroke-width”, 1)
      .attr("d",arcFinal3).attr("stroke-width", 0)

so you have to select the svg grouping you made, then transition on the attribute
of the svg group by changing the color, width, etc. Hope that helps.

Margaret G.

Hi Ben,

I got a chance to look at your program and the only thing that I think you need to adjust is when the same two colors play in a sequence. Then I did not see a transition. Also I changed a copy of this and made some slight changes to the interfacesetup() function. I can post this on the gitter helpjavascript page with your name on it and you can use it or not. Just want to say this is really nice. I hope I can figure out what is wrong with my program and finish!


Hi Ben, I put the code on the main free code camp page and it is tagged @benabee. So if you want to try that please feel free.

Hi greaneym, Thanks for the help, I really appreciate it! It took me a while to get a sequence where I would have two in a row of the same color, but I see what you mean. I’m not really sure how to fix that right now though. I was trying to find the post you made on gitter but I could not find it :frowning: I’m curious on how you changed it


I posted the changes I made to codepen,

The gitter support people told me not to post long code there so maybe they removed what I put there for you,

The changes to the interface function were of this sort,
.append(“circle:svg”) etc. and after that I could see your game working fine, but noticed when the duplicate tones did not show up as well. I think you
could fix that by making a longer timeout. I did not make a grouping on
your svgs but probably that will help.

If you are not familiar with grouping svgs, here are two good sources to read.

"However, unlike the other selection methods, defines data per-group rather than per-element: data is expressed as an array of values for the group, or a function that returns such an array. Thus, a grouped selection has correspondingly grouped data! " from

look for this line in particular,
var CircleGroup = svgContainer.append(“g”);

Hope that helps you. I am still working on figuring out the setTimeout and
setInterval game loop that will make my game work. If you have any suggestions for me I will appreciate it.

Margaret G.