Simply Shapes explainer

[grasshopperexplainer]

The aim of this puzzle: Draw a circle.
Walkthrough of the solution: The code that you start with for drawing a rectangle is very similar to what you need to draw a circle. Let’s take a look at each part of the command and build a similar command for our circle. var rect is creating a variable called rect – that’s nothing new. Next, = says that we’re going to give the variable something to store inside of it. Now for the new part: svg.append('rect'); The svg stands for Scalable Vector Graphics which are basically shapes that the computer sees as “connect the dots” – connected with straight lines or sometimes different types of curves. This might be different from the way you usually think of computerized pictures because zooming into an SVG doesn’t get blurry or pixelated. .append() is a command to add something to the screen. In the example line, svg.append('rect') adds a rectangle to the screen, similar to how you would use drawBox('red') to draw a red box. But instead of a color, you tell it a shape. That lets you use 'circle' inside of .append() to create a circle! So, to create a circle, you make a new variable (maybe you could just call it circle), and then assign to it: svg.append('circle')
Sample code solution:
(Tap below to reveal)

var rect = svg.append('rect');
var circle = svg.append('circle');

JavaScript Concepts: Identifiers, Member Expression, Variable Declaration
D3 Concepts: .append()
Additional Code (hidden code that runs before the puzzle’s code):

class D4 {
  constructor(d3) {
    this.d3 = d3;
  }
  attr(key, value) {
    this.d3.attr(key, value);
    return this;
  }
  append(name) {
    const result = this.d3.append(name);
    result._groups[0].forEach(el => {
      // list shapes and attributes to change here:
      if (el.tagName === 'rect') {
         el.setAttribute('x', 25);
         el.setAttribute('y', 25);
         el.setAttribute('width', 100);
         el.setAttribute('height', 100);
         el.setAttribute('fill','pink');
      }
      if (el.tagName === 'circle') {
         el.setAttribute('r', 50);
         el.setAttribute('cx', 75);
         el.setAttribute('cy', 75);
         el.setAttribute('fill', 'blue');
      }
    });
    return this;
  }
}

var svg = new D4(d3.select('body').append('svg').attr('width',500).attr('height',500));

[Mario_Schalau]

Can somebody explain?

[RetroJLO]

@Mario_Schalau Looks like we’ve accidentally used the variable circle rather than the string 'circle' in the last part of our code. It’s kicking it back because it thinks you’re trying to declare the variable using the variable itself as part of the value.

Try changing the last line of your code to be var circle = svg.append('circle'); instead, using the str button to allow you to input the string.

[Petufo]

It would be good to add “show additional code that runs before the puzzle’s code” ability into the app. For those who are curious enough. Without additional code I feel you learnt me just half of it. I understand that for someone else it could be confusing. But I feel confused without the additional code

[Grasshopper_Heather]

Hey @Petufo,

We’re working on it! We 100% agree that it would be great to surface additional code within the app.

For this puzzle, it’s a little tricky as the code is pretty advanced to allow for the SVG shapes’ color, size and position to be defined before they are created. We don’t want to overwhelm people! So we’re trying to figure out the best balance.

Thanks for your feedback!
H

[Nguyen_Minh]

Can you show us the additional codes run behind it?

[Grasshopper_Heather]

Hey @Nguyen_Minh,

This code is pretty complicated (and we don’t teach most of it), so don’t worry at all if you don’t understand it. It’s defining the color, size and position of the SVG shapes before they are created, as well as creating an SVG environment.

class D4 {
 constructor(d3) {
   this.d3 = d3;
 }
 attr(key, value) {
   this.d3.attr(key, value);
   return this;
 }
 append(name) {
   const result = this.d3.append(name);
   result._groups[0].forEach(el => {
     if (el.tagName === 'rect') {
        el.setAttribute('x', 25);
        el.setAttribute('y', 25);
        el.setAttribute('width', 100);
        el.setAttribute('height', 100);
        el.setAttribute('fill','pink');
     }
     if (el.tagName === 'circle') {
        el.setAttribute('r', 50);
        el.setAttribute('cx', 75);
        el.setAttribute('cy', 75);
        el.setAttribute('fill', 'blue');
     }
   });
   return this;
 }
}
var svg = new D4(d3.select('body').append('svg').attr('width',500).attr('height',500));

[SARTHAK]

Can you start a new program to teach all these complex stuffs ?