We're here.

We're live.

Yes, we're back.

Surprise.

This is one of those rare occasions where a coding train episode is planned within, like, 15 minutes.

That's not entirely true.

Because surely welcome again to surely guest from last Friday's regularly scheduled Nothing nothing has ever regularly scheduled.

But somewhat consistently on Fridays, I have been live streaming and we mostly surely, but I'll say we since I was also here.

Uh uh, did a tutorial around working with D three Js for data visualization, and it was completely my fault that I arrived.

Sure related Rush rush.

So there was very little time.

Uh, I'm just checking the chat.

Make sure nobody's saying focus alert.

I will focus the camera.

I forgot to focus the camera.

So we're saw a soft focus.

I look nice.

Um, so we rushed through a lot of stuff and I felt like that wasn't fair to surely on dhe.

So here we are, back surely generously had an extra little bit extra time today.

Shirley's here, actually, at I t p doing a fellowship, working on a bunch of really go to her social media and see, you're making all these like physical?

Yes.

Talk about that for a minute.

Why focus the camera?

Yes.

Okay.

So I don't know how to talk about this without any visual aid.

Oh, actually, I couldn't have visual aid, right?

I could open up a browser.

Yeah, I'm which you have hit in the way.

So it's on the dock is on the left side.

I'll just do this.

Who?

Look at all these things that showed up.

Okay.

Like what?

Oh, did laptops not actually on screen.

I know.

It's fine.

It will be now in a second.

Okay, So I'm I'm I tiki because usually I do data visualization in the web, so it's very I'm very digital, but I've been wanting Thio.

I'm kind of brought in my horizons and get more into the physical world.

So I've been auditing two of the classes here on one has to do with, like, are doing news and sensors.

And the other one, I'm like, screaming all of my media.

It's, like, kind of basic, and, uh, the other one has to do with fabrication.

So I'm doing two projects.

One final project with the students I'm and it's gonna be a physical data visualization of I'm women in Computing is really excited.

This is the one with the laser cut.

No, no, no.

This is the one.

I'm that we're still prototyping, so it's gonna be like an actual installation.

You walk through on and there's gonna be hanging lights, um, and it's going to be hanging like orbs.

And then the idea is that as you walk through the orbs, each of them are represent a woman that had a great contribution in computing.

Um, but the thing is that most of them we don't know about most of them.

So at the beginning of the installation, they're all going to start out really dim because they're they're not very well known.

And as people go through their invited to kind of like I'm seeing or kind of interact what they read more about the woman.

And there's gonna be details in the or And every time someone reads more about them, they grow glow brighter and a little bit brighter and a little bit brighter.

And the hope is that by the end of the exhibit, like all of them will be lit up a lot more beautiful.

Yeah.

And then so as you walk through, I'm so there's a lot of, like, kind of data and coat into it.

So it's gonna be my first, like, kind of big data installation that, like people can actually walk through.

So that's the one I've been working on.

That's what this tilt switch is for that I was playing with because then when someone interacts with I'm so I don't know if you can see, but yeah, I'm like, as that's which is being tilted.

I'm the l e d lights up s Oh, that's gonna be how we control.

Like when someone interacts with the order.

That's how we sense that they're like, interacting with it.

I'm so that one that you saw with the laser.

Oh, so this is kind of the prototyping for that.

Like reforms for the orbs.

Yeah.

Like mysterious old.

Like she's so cool.

She is a prolific inventor and co founder and CEO.

One laptop per child.

I am, but yeah, and then the other one you saw is on.

This was one, right.

Okay.

And this is just for fabrication homework where I wanted Thio.

And these are some of the women noble Laureates and this is this is a prototype base, but I'm The idea is to light.

The led is from the bottom are sorry.

Like the crystals from the bottom.

I'm and so this is kind of the latest iteration I was working on yesterday.

So, like, then I'm they're color coded by the category of their award.

And as and so I'm gonna put the crystals on top of the lights and then it's gonna glow the different colors.

This is great.

So it's so fun to see because, you know, I'm somewhat of I would say, like an anomaly here, but so many people at this program at I, t.

P and I am a work it with physical computing and fabrication and building physical devices, making three dimensional objects that live in the real world.

And I kind of fall back to my safe, happy place of software, which has its own problems and complexities.

But it's great to see I know that you have done so much work with data visualization on screen and the browser d three.

That's what we're talking about.

What we talked about it Friday we're talking about today, so it's really I find it always exciting to see people move into, like to, like break through that What could be scary, like Thio and like start to make physical stuff.

But it's been such like a friendly, supportive environment like I realized, like how deeply I am in software.

So much so that, like even the most obvious physical things I don't see like you.

Earlier today I was talking to one of the residents and I was like, Oh, I need to build in the switch and he's like, No, just unplug it and I'm like, Oh, like I was sorry.

I was I was plugging like like a battery into an art studio.

And I'm like, Oh, now I should build a switch to, like, control on and off And he's like, No, you can Just like Yes, I'm going.

By the way, I think I mentioned this, but wait and going be waiting into laser cutting myself.

Cy was a student here, and I are gonna work on I have Ah, it's going to arrive sometime this week, a box of 250 train whistles, and I'm gonna try to, like Liza Wretch, the coding train, send them out is like patri on, but I'm not.

I think I'm not gonna use Patron, but it's a longer story that I will get to it.

Another way.

You'll talk about more in this Friday's life membership Gifts for people.

Um, okay, uh, so let's move.

Let's move on, because way we'll hope that won't be super rushed today, but we'll be here till about five o'clock.

That's about 45 months.

That's 1/2 an hour.

Okay, so I'm gonna kind of let surely take the lead here, Let me at least open up.

What I what we'd made before.

And I will try to, in my own words, kind of recap what we did.

And then you can tell me if I kind of understood it correctly.

Um oh, And then we will also take your questions on Peter in is asking, Can you explain how to generate over the films again?

So that that has to do with kind of like the interrupter.

They exit stuff.

So now that we need to answer that right now, I'm just trying to pinpoint where s so I feel like there's two parts he could be talking about one when we loop through the data itself to calculate on dhe use the scales I'm and but he's probably talking about the enter update exit part.

But we're in arraigning through the kind of the SPG, so we'll make the jump.

What we re coded somewhat step by step last time was how to make one flower based on one movie.

But then we really quickly I don't think we again who is surely, surely very quickly just added some code.

And so, yes, let's try to take some time to unpack that.

And I also would love to show a couple of projects that people made based on, um yeah, so I know there were.

So it's so let me first recap, and I'm gonna try to spend less than two minutes doing this.

So the first thing that I learned from Shirley is that syntax for creating a path in S V g m remove.

See for curve, too.

There's also L for lying to you and then on then that's really what That's what's happening here.

This petal path is like start here, started the top curve to the bottom and then curve again, back to the top And so there's a very simplistic design on dhe.

Maybe surely will touch on how you might make that more beautiful.

Or you could look at her actual film.

What's it called again?

Film them Flowers project to see that we learned then we could actually put that on an HTML page by creating an SPG element when all this is happening in the observable notebook, which is like the P five Web editor in the sense that I'm coding in the browser but very different in that it's got cells that could be executed separately, uses require a bunch of different syntax things.

Okay, then we loaded the D three library that's the primary library were using in these code examples.

Then we loaded a Jason file that has all this information about movies in particular there.

The year they were released, their box office, the number of the ratings, things like that.

A lot of many meta data about then what we did was use a nominal, just like sort make this discussion much shorter.

We use the D three library, So if I go up here and look at the data we can see here is the movie die hard to on all of the data associate with that movie.

Then we use the D three library to parse out two pieces of data the rating and what was the number of votes again Soon A number I am Devi votes.

So basically the number of people that like raided Okay, so and those pieces of data were used to design the flower?

Yes.

And so the all this functionality that you're seeing, like extent, scale, linear Kwan ties all of these air D three built in D three functions that perform common operations on data like remap it from this range of this range or, you know, inverted or multiplied by this or that kind of stuff.

And so we did that.

And once that was done, there is now this sort of crucial piece of code which I think is kind of what you want to re explain in this crucial piece of code.

After the data is parsed in on re mapped all the appropriate ranges, it takes the data and makes the flowers out of it.

Through this process called enter update exit.

But we're only using enter for this particular exam.

Yes, Yeah.

And, um, we were talking about, um I think going through the enter update, I say and then kind of talking about steps of maybe what I'm people that are watching might be able to do to kind of, like, complete the project, right?

I am.

And so do you want to do the which I think you should start with re explaining We're slowly.

Any of the bits you thought you rushed had to rush through.

And you could do that on the white board.

Who spread the whiteboard camera on?

Yes, I do love.

I would love any.

And I will keep an eye on the chat.

Yes, that'd be great.

I think I would love any questions to do with the interrupting, actually.

And I think that is Peters Peters Question.

Yeah, and science is giving us information about, uh, details of S e G tags.

And so why don't let me just make sure this works if I switched to hear books.

No, that's the wrong, but okay.

The audio should be back.

That was my fault.

So why I'm gonna all right.

I think I might know what's going on here.

Um, so just do this sound should be back and hopefully the white It's gonna be packing a second.

People can still hear me.

Um, okay.

Video capture device existing weird.

Something happened.

Create new.

Okay, everybody, I realized that's the green screen.

That's no signal.

That's the computer.

This should be the white board.

There we go.

We're back in business saying I don't know what happened there.

So can I say something for a second?

Surely.

Okay.

Your mike is good.

So now we're we're back in business, so you can explain.

Go back to whatever discussion you want tohave with the viewers, and I will keep an eye on the chat.

Okay, So, um, we did this last Friday where I, like super intensely rushed through Enter update, exit.

And that was the kind of the one that I want to to go over.

And then if we have more questions about other parts of what we went over on Friday, I love to answer that, too, but I'm going to start with this and then hopefully, like, questions will come in as we're doing this.

I'm so what I wanted to do is kind of give a more concrete example of like, um, something that you might actually do when you're working with data are working with the three and data on DSO.

Let's make this, like, hypothetical data set of I'm just gonna start with three.

So let's just say I want to draw like, three circles and my and I want to like Matt my data to that.