Rainbow Treasure explainer


#1

The aim of this puzzle: Make the black pot turn to gold when you tap it.
Walkthrough of the solution: The change you need to make to solve this puzzle is very simple: just change the string 'black' to 'gold' and the string 'rect' to 'circle'. But let’s see why those are the right changes to make. The variable firstCircle should be storing the first circle that was drawn to the screen. The code d3.select() searches the screen for the first object added that is a certain shape. Since you want to select a circle, you change 'rect' to 'circle'. The next chunk of code is a function that is supposed to turn the pot into gold. The main part to look at is the .attr() because that is where the color property is changed. Setting the 'fill' attribute to the string 'gold' is all you need to do. Now, when the turnToGold function runs, it will take the firstCircle and transition its color to gold! The last bit of code is where the program senses when you tap the circle and runs the code inside of the turnToGold function.
Sample code solution:
(Tap below to reveal)

var firstCircle = d3.select('circle');

function turnToGold() {
  firstCircle.transition()
    .attr('fill', 'gold');
}

firstCircle.on('click', turnToGold);

JavaScript Concepts: Code Block (function), Identifiers, Member Expression, Variable Declaration
D3 Concepts: .select(), .transition(), .attr(‘fill’,), .on(‘click’,)
Additional Code: There is hidden code that runs before the puzzle’s code that sets the SVG Shapes attributes.


#2

So, the d3.select( ) always searches only for the first object?


#3

Hello,
Yes, that is correct, the first object added.

Thanks,
Ahsen


#4

How does it know the black one is the first object? It looks from left to right?


#5

As you .append() shapes, each one gets places on top of all the previous ones. That means the first one will be at the bottom of the pile if the shapes overlap at all. Even if they don’t overlap, they still have an order, but you may not be able to tell just by looking. Ultimately, the order is determined by when each .append() is executed in your code.

–Frankie


#6


#7

Hey thanks for the app just a quick question. Is d3.select built in to JavaScript? Are all these functions built in? Do they work the same outside of the grasshopper app?


#8

The d3 functions are not built into JavaScript, but they can be included in your own JavaScript code pretty quickly. The Animations Playground already has d3 set up, but it’s not too hard to do it from scratch either.

Create a new text file on your computer and write this in it:

<html>

<body>
    <script src="https://d3js.org/d3.v5.js"></script>
    <script type="text/javascript">
        var svg = d3.select('body').append('svg').attr('width', 300).attr('height', 300);

        svg.append('circle').attr('r', 100).attr('cx', 100).attr('cy', 100).attr('fill', 'blue');
        d3.select('circle').attr('fill', 'red');
    </script>
</body>

</html>

Then save that file as myExample.html. Any name will work, but it will need to be an html file. I wrote a little bit about html tags here. You can think of them as fancy parentheses that give properties to the things they surround.

The line: <script src="https://d3js.org/d3.v5.js"></script>, says “Include the code from this webpage: https://d3js.org/d3.v5.js”. That webpage includes the code for d3. There is also a compressed version of this file at https://d3js.org/d3.v5.min.js.

Next, in our html file, we see: <script type="text/javascript">... </script>. That says, we have some JavaScript code that we want to include. The stuff in that section should be familiar to you. It has .attr() and .append() and .select(). The 1st line that has var svg = ... is creating the svg variable that you .append() shapes to. In Grasshopper, we usually do this for you. This is creating a blank canvas for you to draw on.

If you open your myExample.html file with Chrome, it should open a white webpage with a red circle on it. You should be able to change the <script>...</script> section of your example using JavaScript that you’ve learned to create different images. Just make sure to save the file and refresh the webpage that it’s displaying.

–Frankie