Placeholder Image

字幕列表 影片播放

  • Okay, now I'm lying.

  • Yeah.

  • Hello, everyone.

  • Welcome to a very special episode of coding Trade with a guest.

  • Surely, Woo, I would I would say, you know, the famous white.

  • That's not sanitary.

  • E do have a bell.

  • You can ring at once.

  • My only one.

  • Well, I don't know.

  • You could be.

  • Oh, very good.

  • Okay.

  • Um, there are sounds.

  • I'm sorry.

  • We have a little tongue, some technical difficulties in getting started because I thought you a little awkward.

  • We're gonna figure this out as we go.

  • I have this tendency to, like, Look over here because a little behind the scenes here, this is where I have the monitor and I can see the chat on weaken, like, sort of see what the mic levels are.

  • But if we stand like this the whole time, we're looking that way.

  • So I try to talk thio the picture over there on camera.

  • You can also just thought we could talk to each other.

  • I like two people.

  • I will get to introducing.

  • Surely in a minute.

  • Let me just kind of like late some, uh, just sort of like, give you the context of what's about to happen here today.

  • I will note it's around 4:15 p.m. Eastern time.

  • There is an event happening.

  • In the space of then are you at 6 p.m. So we have to end around five or 10 of.

  • And if for some reason everything goes wrong, we don't finish, we'll come back another time.

  • That's what's gonna happen to hire best.

  • So But this is a unique episode live stream of the coding train in the sense that I am going to learn something new taught by Shirley.

  • And in fact, a little technical magic here is Can I This is okay, right?

  • I My stream deck is failing, so I can't seem to set up a button.

  • But I'm gonna come over here and I'm gonna click something on the interface here.

  • Like this boom.

  • And that's my screen.

  • Two different screens.

  • So I'm gonna leave it as yours right now.

  • Sure for like, so that when we get to the point of you introducing yourself, you might have stuff there, So Okay, welcome.

  • Maybe you're like, What am I even watching?

  • This is the coding train.

  • I am your host.

  • That would Shiffman.

  • I tried to ST Conductor, conductor.

  • Conductor of your, By the way, can Everybody's here?

  • Surely?

  • OK, lots of noise from one of the two mikes.

  • Maybe dance, Mike, since it makes noise when he moves, somebody has a loose Mike Weir.

  • Well, we can We can test this other one is, um I can put this on and I can hear, so I go.

  • Hello?

  • Hello?

  • Hello.

  • It all sounds very good to me.

  • Actually, my name is Shirley.

  • Okay.

  • Um, I'm gonna mute my mike for a second.

  • Okay?

  • Surely Just talk.

  • My name is really Ah, yeah.

  • My name is Dan, and my mike is back on.

  • Mike is off.

  • That's definitely dance.

  • Oh, it's happening as I move around.

  • It's just loose connection here.

  • Okay, we try this.

  • Probably just Oh, that's yeah.

  • I can make it happen.

  • Okay.

  • I think we're okay right now.

  • It's me.

  • And I think I had, like, a weird connection.

  • All right, I'm gonna assume for the moment now, one thing you should be aware of what we're looking at a chat.

  • Um, everybody's about behind us.

  • Okay, So anything we say, it takes about 30 seconds to chat to actually see it got it.

  • So sometimes the messages are very hard.

  • Thio.

  • Oh, it's interacting with my hair.

  • Yeah, I think it might have been, but I think it's I think it's okay.

  • I think it really was mine, Mike, because as I was e I shifted wires.

  • I heard lots of crazy.

  • So I think we're good.

  • People are saying that my sound is low It's really bad on mine.

  • It's got worse.

  • I wonder, Is it better if I stand further away?

  • Is there some kind of receiver issue?

  • All right, hold on.

  • I'm gonna put that.

  • What's weird is I don't hear that glitch ing in, like, let me try toe.

  • We'll now hear some.

  • But that's because you're doing okay.

  • So now I shouldn't get anywhere near my hair.

  • Okay, this sounds perfect to me.

  • All right, everyone, I'm holding up three fingers.

  • So tell me if three fingers right now say three sounds good.

  • Sounds bad, because in the monitor, it sounds perfect, huh?

  • Oh, I heard it.

  • What is it?

  • Is it this movement?

  • So take out that hold on sec.

  • We're gonna we're gonna do a little debugging of this.

  • I'm just going to move us remove us from the picture.

  • Okay.

  • Why don't you take the whole thing off and let's just put the receiver on the table.

  • It's like it's going to make some noise.

  • Everybody.

  • I heard it there.

  • As I have a feeling, it's like, just put it here.

  • No, no, no.

  • Put the take the thing after.

  • Oh, not good.

  • Okay.

  • And just hold it as a spoon.

  • Put it, attach it.

  • Okay, The same way you had it before, but I'm gonna have to move around.

  • Yeah, I know, but let's just see if we get it working, okay?

  • I think maybe so we You can't see us right now, but we move some things around and does it sound okay?

  • We have to wait around 20 seconds.

  • Shea, say some things go us.

  • Okay.

  • Now they can see us again.

  • Okay.

  • I think it's okay now, because I'm not here.

  • I think this, uh, nothing was happening here.

  • Okay, It sounds good.

  • Okay.

  • Um okay, so I think we're, uh sounds all right now.

  • I think we're okay with the sound.

  • We're going to just work like this.

  • And then as soon as you have to move, I'll put this back into your pocket or something.

  • Well, then, Thio Yeah, it should be fine.

  • I think maybe I think you could probably put it in like you can clip it to your back pocket.

  • It might have just been this was getting, like, underneath something or whatever.

  • Anyway, I'm just gonna leave it on the table right back, back to your regularly scheduled program.

  • Maybe we'll make an edited version.

  • I think we should have another diversion where we just edit out the 1st 21 in your eyes.

  • If this happens every time, this is not an anomaly.

  • I always have having, like, we're technical things.

  • Okay, your setup is so intense.

  • I know.

  • I know.

  • When I used to string me used to just literally by be my computer, I don't think I ever had technical difficulties.

  • So I'm gonna skip with some of the pleasantries because I want us.

  • I want us to keep track of time here.

  • This is a special occasion with Surely here I'm going.

  • Thio.

  • So what's happening?

  • First of all, thank you to the node.

  • Our sponsor.

  • Do you have websites?

  • You host on the Internet?

  • Yeah.

  • So if you like surely has websites goes on the internet.

  • The node is a cloud server that you could use it in about halfway through the lifestream.

  • I'll come back and tell you a little about the note and how you get a coupon through the coding train.

  • Really?

  • Just by going to you know dot com slash coating drink.

  • But what we're gonna do today is most of my tutorials.

  • Most of the videos that I d'oh involved a job script library called p five p five surely is a amazing superstar data artist.

  • If you're not familiar with her work, you should definitely check out her web site, which I think you have.

  • You're right.

  • Now, can I think it's actually in this video descriptions link.

  • And some of the moderators, um, could maybe posted in the YouTube chat A link to Shirley's website?

  • Yeah.

  • Don't don't Don't worry so much, we'll we'll figure this out.

  • Oh, and, um actually, uh, what I'm gonna do here, I forgot one little technical piece that I'm gonna add.

  • I'm actually gonna record all of the separate outputs.

  • I'm not recording your laptop screen.

  • Just really.

  • That's fine.

  • Um, we're just gonna cook this opening last melting quarter.

  • Okay, I'm gonna fix that in a little bit.

  • Um, so and surely uses a variety of different tools I'm imagining for your work.

  • But one of the tools you used frequently is biggest.

  • One is Steve threw 83.

  • So D three is a job script library.

  • It's also has a link with number.

  • Yeah, it is pretty different.

  • So and I I want to say that I've never used the three, but that's not entirely true.

  • I think I've tried to use it once or twice, but I couldn't remember what I did the last time.

  • And so what?

  • This is gonna be so much similar to win and PJ was here.

  • TJ showed me a little bit about react.

  • Surely is going to teach me how to use d three and we're gonna make a workshop planned.

  • I'm the student surely is the teacher.

  • And I'm gonna attempt to code over here on my laptop, Which one will kind of switch back and forth?

  • So, um, maybe what we could do to get started with is, if surely if you want to take a minute to introduce yourself, I kind of did a little bit, but if there's anything I missed that you want to say about your work of things you do are other things you wanna plug.

  • You could do that.

  • I'm gonna just add one more technical feature, which is I wanna be recording two.

  • Disc your laptop screen.

  • Okay?

  • Because if we decide to make, like, an edited version of this that gets published us like a stand alone D three tutorial without a lot of the extra nonsense of figuring out mike stuff, I work with a video editor and he puts all the stuff together.

  • But if we're not recording this, we won't owe.

  • You know, we could do, though.

  • Much simpler solution.

  • I'm just gonna go capture.

  • Yeah.

  • I mean, I could set it up, but this is gonna be much quicker.

  • So I'm just gonna do a new screen recording.

  • Um, and I think you could just do the whole screen.

  • Yeah, but I wanted to just see if it has sound, but doesn't matter.

  • It's like, actually gonna do this.

  • And now it is.

  • It's recording.

  • All right, That's a much simpler solution on.

  • I won't worry about.

  • I have this other set up that records all the video signals.

  • I don't think I focus the camera.

  • Stay there.

  • Stand there.

  • You know, when they have just last minute at a second laptop?

  • Yeah, that was my fault.

  • I like I was all set up and ready to go, and then I was like, Damn, maybe he's good to have a second laptop.

  • So I'm just gonna If you could just stand still for a second, Okay?

  • Still, I'm gonna focus the camera on.

  • There we go.

  • That's better.

  • Great.

  • Um, okay.

  • So I think we're good technology wise.

  • We have your laptop.

  • If I want to switch to my laptop, I need to use this mouse.

  • I'm just going to get it ready, and I just click this button back to my laptop.

  • So that's how I'm gonna do it.

  • And I'm gonna leave it at yours and say, Take it away.

  • Tell me what you hae Your name is Shirley?

  • Yes.

  • How about I just read this?

  • My name is surely I'm an independent.

  • You could talk to Yo, that's right.

  • Okay.

  • So, uh, hi.

  • My name is surely, uh, my title that I've given myself is independent creator of data visualizations.

  • I'm and that doesn't really mean anything.

  • I'm just a freelancer, and I I work with clients.

  • Um, around the world, mostly on I'm, like, tight cos media companies, journalism companies and I work with them and their data to tell visual stories on dso.

  • Some of the things I've done before is I'm this one.

  • So this one is This is really fun, because the first time we met, um, but we were, like doing it was we met because we did a thing with M p J Mm e cole.

  • And then we were, like, 40 minutes into, like, a live stream, or like a recording.

  • I'm And then I started showing this project, and Dan was like, Wait, I know this project.

  • I spent a lot of time poking through this project.

  • There's, you know?

  • Yes, I'm a musical theater geek.

  • Nerd.

  • I've seen Hamilton a bunch of times plumbing your time, twice.

  • I have tickets to see a veto this weekend.

  • Very excited.

  • I've seen it three times.

  • Okay, now, uh, yes.

  • Oh, that's one of the projects that did really well.

  • I've also worked with the Guardian on something a lot more serious about homelessness, so I just I'm Yeah, my job is I tried to take data Sides that, you know, maybe when it's just numbers I'm It might seem cold or hard to understand and try to convey them in a way that's compelling and maybe even emotional.

  • Um, am for today.

  • What we want to do is I had this project and I just realized this is the first project I ever published after I went freelance.

  • So that was three and 1/2 years ago, and it's this visualization of the top summer blockbusters since I've been alive.

  • Um, and each of these flowers represent a movie, and each of the pedals are parental guidance ratings.

  • Colors are John Rose, I'm and then the number of petals and the size of the pedals correspond with, like, imdb data.

  • So, for example, like this is I'm I am Devi data out of 10 is the size I'm And so you know, there's like some of them.

  • They're like Dark knight rises Really big, beautiful.

  • I'm love Harry Potter inception.

  • I'm the one that I love.

  • Showing is 1997 that man there, Robin and how cute.

  • It's so tiny but today.

  • We're going to recreate this.

  • Okay, at least by the way, are very have a visual quality.

  • Very similar to some of the coating challenges I've done with polar roses.

  • So if you use polar coordinates to kind of loop around the path of a circle, but adjust the angle on the radius as you're moving and you loop around, you could get these throws like patterns, So I have.

  • But most recently, I think I did a video around The more a rose, which is a particular way of doing this anyway, just that toe like that together.

  • Yeah.

  • And so that's what we're doing today.

  • I'm and we talked about this, and I was like, I'm gonna go into this having prepped absolutely nothing.

  • It's been about That is how it works here.

  • No prep.

  • And so it's just gonna be pure, like we're just gonna be thinking through this together.

  • Great.

  • Yeah.

  • So do you want to get started, or do you want to do anything else?

  • But this is good.

  • Let's get started.

  • Way.

  • We're on a time crunch.

  • Yes.

  • Okay, so let's switch back to your laptop.

  • I'm gonna unfortunately couldn't get my stream deck button works up to this manually.

  • But now I'm here and I need to go Thio Web browser.

  • Now, I usually use the p five Web editor which most people have watched the channel I've seen, which looks like this.

  • I can type JavaScript code here.

  • If I run this run this sketch.

  • I see the canvas output here, but amazing, amazing, invisible cup there.

  • But, uh, we're gonna use a different web editor today.

  • Yeah, it's called observable observable h q dot com.

  • I think I'm just gonna google it and I don't know that's gonna be a good So this is, uh, kind of the newest iteration of the creator of D three is also behind this, and it's kind of like I think of it as I'm Jupiter notebook, but on the Web and kind of tailored for data visualization.

  • So a lot of people in the audience are probably familiar with Jupiter notebooks because it's a thing that's out there that a lot of a tool that you use, But it's not saying that I use regular on this.

  • So Jupiter notebook is a, um, Paige essentially that you can run in a Web browser type in python code and executed.

  • What's special about it is you can execute.

  • Like I think I called cells, like little blocks.

  • One of those times are these.

  • And so that's what we're seeing here.

  • But the difference is we could do that.

  • These, like little cells were gonna do that with job script.

  • Yeah.

  • Okay.

  • So how do I get started?

  • Do I need to create an account just like Ryan?

  • Let's see if I do signing with Get hub.

  • Let's try that.

  • All right, I'm gonna authorize it.

  • Here we go, everybody.

  • Uh, okay.

  • So now this is This is this is definitely the first time I've used observable myself.

  • I've looked at a lot of observable notebooks.

  • I have a kind of memory that it's got its a little bit of its own way of doing things that's different from maybe a traditional Java script.

  • Workflow.

  • Is that true?

  • Are yes.

  • So I only really recommend this for prototyping.

  • I'm obviously like if you want to them make a website or something, you would go and like doing index html or something.

  • I'm biting for this.

  • It would be fun to suit.

  • You want to be editing in these cells.

  • So where is this?

  • What?

  • I can call this.

  • 00 I see.

  • Yeah, so then you can and then I run.

  • Shift shift.

  • Returning is the short, huh?

  • All right.

  • Okay.

  • People tell me this is a little bit smaller than the font size I usually use, but I could also zoom into it again.

  • Andi, I can Yeah, I'll do this.

  • That's good.

  • Okay.

  • And I'm giving us this much this much space so that we don't stand in front of you.

  • I think we're good.

  • Okay.

  • All right.

  • So I think the very first thing I'm that we can do is just create one of the pedal shapes I'm in.

  • This is where I kind of wanted to talk through spg paths together with you.

  • Okay, I'm and I'm maybe the way we can do this is first we draw on the board, and then we put it in here.

  • Okay, I'm answer.

  • So I'm gonna switch the camera to the white board.

  • Yes, and you're just gonna have to take that.

  • Oh, that's right.

  • Thank you for them either.

  • And you have a marker, and I'm just gonna stand over here.

  • I like how everything is set up for Dan.

  • So it's like everything.

  • 00 and I'm gonna plug.

  • This is I'm This is a new sweater.

  • I'm is designed by Georgia loopy, Who is an amazing data artist and designer.

  • I'm and this sweater is a data visualization of Ada Lovelies and her over them for the Babbage engine.

  • Yeah, So please don't ask me how to read it, because I haven't decoded it yet.

  • I am, But I'm just really excited to like where this on your live could on.

  • Yeah.

  • Okay, so let's do spg pats together.

  • So, Dan, I know you work a lot and p five, So I'm guessing I'm guessing that you're extremely familiar with, like, canvas, like, Okay, I'm gonna put it in here, and I hope I'm gonna put it in another pocket and let me know if if audio ever goes crazy.

  • We've got the mic in Shirley's pocket.

  • Yes, a different pocket, different pot.

  • Different.

  • Good to me.

  • Okay, so I'm gonna We're gonna see.

  • So, um, I know you use a lot of canvas and you make a lot of shapes and campus, but for SPD today, I want to just talk about like, spg path.

  • There's, like, so much room up there that can reach.

  • Um and so what that looks like is actually, should I start from SPG And what spg Yeah, sure.

  • So I'm you probably cover a lot of canvas.

  • Oh, my writing is so it's okay.

  • It's much bigger people all right, A little bit bigger.

  • I would say it's This is a tiny little monitor.

  • That's not what people are seeing.

  • I'm so with canvas bigger here.

  • Thank you.

  • Uh, so with canvas, I'm is one dom element.

  • And the way you draw two way is that you literally it's literally drawing pixels on the canvas.

  • And you will say, like, draws, sir, for, like, Phil Recht ORF like you have dog Argh!

  • Or something like that I'm And it's just drawing filling pixels.

  • And with us V.

  • G S V g elements are actually dom elements.

  • So for each individual SPG element, like if we want to draw a circle, it's a circle element.

  • If we want to draw a rectangle, it's a rectangle element and so on and so forth.

  • So I'm the way I like to think about it is canvas It's kind of like Photoshopped.

  • I'm an SPG is like illustrator.

  • So today I just want to cover as Reggie paths because I think that's Fiji.

  • Pats are extremely powerful and if you just master it, you can, like, create any shapes that you want.

  • So, for those flowers were goingto use SPG path to create individual petals.

  • And so 11 point of reference for this is when I've done things in processing.

  • It's also a bit mapped images, but processing has a pdf renderers where I can save out the stuff I'm drawing as a vector.

  • I didn't know.

  • That's one thing that I've done from time to time and then blow something up much higher resolution and SPG stands for Scaleable Geographics.

  • Yeah, an illustrator.

  • If you draw an illustrator and use your super familiar with illustrator that exports the SPG too, and vice versa.

  • You can import spg into illustrator um and so the for path.

  • As DJ path looks at the base, it looks like this going and I'll say I it looks like huh?

  • And you want to.

  • The one thing you need is this attribute called D, and this is where you put in your path string.

  • And what I mean by a path string is that there's a Siri's of commands that you can use.

  • And today I just want to talk about em.

  • L and C.

  • And they stand for move to lying.

  • Thio, your handwriting is so much better than mine.

  • Really, Kurt, too.

  • Oh, you knew one of the things I was like, I'm excited, but kind of like, apprehensive about is like your level of energy on your videos is like, so intense.

  • And I'm like, I don't know if I'm gonna, like be able to match it, but at the same time, that might be too much liketo for, like, both of us to be at that level.

  • It's OK, I'm so yeah.

  • So the sand removed to lying to her, too I'm instant moved to is I'm probably the most straightforward, which is like, translate in p five.

  • I would assume translate is moving from one point to another.

  • The a difference in exit a difference and why?

  • Or you're moving to a direct location?

  • Yes.

  • So move Thio.

  • The way that I think about it is moved to is like if you take a pen or pencil and you drop that pen or pencil onto the X Y point.

  • Right?

  • That's how I think of move Thio.

  • Line two is then, uh, draw line from there to the next to where you're from, where you move to to the to the next X Y.

  • Yes, exactly.

  • So I'm the way I think about oh, line too.

  • Is that it?

  • Just says if when?

  • When you're when you're I'm If you're, uh, pen is on the paper, draw a straight line to that point.

  • I am.

  • And that means that l always needs to be changed with something before it.

  • Because I'm like, you can't draw a line if you're pen isn't on the paper.

  • Yes.

  • So you always need to start your path string with an M, and then you can judge and chain like M l l, um, whatever you want.

  • Okay.

  • Got it.

  • And then curved thio is I think the funnest one has a little bit of a tricky like I'm, uh, syntax.

  • But once I explain that it will make a lot of sense and they're just realized I need to multiple different colors.

  • Oh, wait.

  • And that is that something we have never thought about.

  • I'm sorry.

  • I forgot about this.

  • I am.

  • I'm gonna try my best with just these, Like a dotted line.

  • I knew, like, 34 different colors.

  • So it's not.

  • We'll see.

  • Okay.

  • See, I'm okay.

  • Sue the all right.

  • This is my, uh Okay.

  • So, uh, I'm gonna call a PX one p x two.

  • And I think by these are the control points.

  • So, you know, again, people might not be familiar with this, but if they're a P five user, this sounds like it's just like the busy a curve function where you have to end points and to control points.

  • Exactly.

  • So this is exactly the same maps to that idea.

  • Yeah.

  • So this is basically yes.

  • Ooh, if u N campus is exactly the same thing, I'm and so let me explain this syntax, Really?

  • And and there's a really nice reference while you're reading this out.

  • There's a really nice reference in room Manson's programming design systems book, which has a whole page about what a busy a curve is and has some interactive ways of playing with it.

  • I'll show it to you later for having seen it it's fantastic.

  • Eso then I'm This is just like you say control 0.1, control 0.2 and end point.

  • And so let's say, for example, we have, you know, a string a path string that says M 00 And then let's say we say, See, I'm okay, let's start drawing it.

  • So this is 00 So this is the M.

  • So this is why I like to use different colors.

  • So it's like, really visually clear what each one of them is.

  • And I like to think of it as like, let's say I'm gonna end up at Ah 100 coma zero.

  • And so we have 00 and I think of it as I'm drawing, I'm gonna draw a straight line to ah 100 0 and then I I have these kind of, like, implicit anchor points.

  • I'm that then I can take and kind of like, put it like, drag it wherever wherever I want And let's say I want to drag the anchor point to hear.

  • And that's roughly I would say, maybe 2020.

  • Maybe that's the anchor point is 2020 and then this anger point maybe is 80 20 and so all right that in 2020 any 20 in this path string would give me this current.

  • So basically exactly.

  • Hi.

  • It's called.

  • It's this curve to Isabel's leader, Busier curve Thio.

  • And I am So if if anyone works with illustrator, that's basically an illustrator.

  • How you draw a curve is you start from a starting point you like, make a line to your ending point and then you get to anchor points that you can drag around.

  • Yes, sir.

  • Here's a really nice reference.

  • I'll just switch over to it for a second.

  • This is a reference here that showing how busy curves were calculated.

  • And I think if I go down somewhere here, I remember this nice way of interacting with Yes, I Maybe it's this one.

  • Yeah, this this is a little bit different, but, um, so I think this one is a cubic her.

  • Oh, yeah.

  • Sorry.

  • This is a quadratic, this one.

  • Yes.

  • So that one is a quadratic busier curve and Cuba Cubic, and we're doing cubic.

  • So yeah, and the reason why I like teaching the cubic busier curve is because I think it gives much more options than the quadratic one right.

  • I am.

  • And so, yes.

  • So this is how to do and that speedy path.

  • And so what I like to do here now is then ask you to draw a petal shape or design the petal shape and then kind of, like, figure out approximately where I'm the points are and write this path string.

  • So design it here on the white board, not just tinker around designing here first, because I think it gives you, like, so maybe I'll use up here.

  • Yeah.

  • Okay.

  • So, in other words, a single pedal.

  • So if I think about a flower like a single petal might look like this Yeah, And you guy, I just went a little bit too high, but I'll cut it off and you could get creative.

  • Well, what was that?

  • What that was so I could use two different curves.

  • Yes.

  • So I would start here, huh?

  • And curve, like up to here?

  • Yes.

  • And then I would still be here and curved back down to here.

  • Yes, so I would do a first move, so I first need to get to this point.

  • Can you just consider that 0.0.0?

  • Sure.

  • So I would do m m 00 Yes.

  • And then I need to control points.

  • Oh, no, no.

  • The ama's just moved.

  • Now I need curve too hurt.

  • So I need three pairs of Ex Wise.

  • Yes, the first to being the control points.

  • Right?

  • So And how is in p five if I'm in a p five canvass?

  • The Cartesian plane is such that zero zero's the top left.

  • And it was this way.

  • Why am I going positive?

  • And it's exactly the same.

  • Yeah.

  • So I would be if I want my first control point to be, like over here.

  • Yeah, it would be negative.

  • Pixels, Yes.

  • Negative pixels.

  • Yes.

  • So if I say, like, negative 10 Negative 10 Yash and then I might want to go up here this again.

  • This is not as creative as maybe I could be reacting.

  • Then I would say negative.

  • 10.

  • Because I'm still the same except to go further up.

  • So I'm gonna say, like, negative 40.

  • Do you want do you want?

  • Uh, do you raise that?

  • Yes, I guess so.

  • I was afraid to erase, Say, negative 10.

  • Negative 40.

  • And then the last would be the anchor point.

  • No, that's the last point.

  • The U.

  • S.

  • So those thes two of your anger could I think of them as control points, control points points, And I think of this as an anchor, but I don't think that's not the right terminology.

  • You know what?

  • I think we're just making a term in logic.

  • Somebody in the chat is already telling us exactly what the terminology is supposed to, uh, except dot for 30 seconds on.

  • So then this last point, I wanted to be back to zero.

  • Yeah, and negative.

  • 50 pedal.

  • I just considered this to be like, ah, height of 50 pixels.

  • Yes.

  • And then I can curve right back to down to here.

  • So this will be easier, because I'm just gonna now go over 10 on and then down to negative 40 than over 10 and down to negative 10 and then back to 00 Yes.

  • Perfect.

  • So this is my code that I need to type into here inside the observable notebook.

  • Yes, I'm Do you want to just draw the two of control points on the other side?

  • I mean, this is not drawn to scale.

  • That's right.

  • I'm okay too.

  • Now that we have this, let's go back to Yeah.

  • So I'm gonna go back, Thio, I'm gonna put you this marker years one, and then I'm gonna go back to here on Do I make a new cell for me and you sell, And, um, I not using d three right now.

  • I'm just writing SPG stuff directly.

  • I'm new.

  • So this one right now is just to sell.

  • So, um, what we can do here is let's declare a variable and where it's going to be global to this notebook.

  • And so let's just call this like, petal, just let know.

  • So it's global, so you don't even to just just the variable name pedal?

  • Yeah.

  • Okay.

  • Petr shaper.

  • Whatever you want to call petal path.

  • Whatever you wanna call it.

  • I'm usually, uh you can either do it as a string or Yeah, I think stream my mix and, uh, just the path string that you like this?

  • No, no, no.

  • Just the just the just the thing that's going I'm usually, like, very good with my but the thing that's going right in here.

  • Yes, yes.

  • Perfect.

  • Okay, so?

  • So I could say m zero comma zero control.

  • Uh, I have to look at it.

  • Negative.

  • 10 negative.

  • 40 zero.

  • Just No, no comma, no space, no delimit.

  • Er, just go right to the next you can put in.

  • I think I'm so like this would be that that I'm so you can also between each of I like Thio So we know comma after the sea.

  • Oh, yeah.

  • And then I like to put a space between here and then No comma here.

  • No comment yet because that is easier to read for.

  • My God.

  • And so like, even like this could do.

  • Or that's bad.

  • I know you can like, see, Sue spg will like I'm reef that fine.

  • It's very easy going about Yes.

  • So it's just easier for me to read it.

  • I am.

  • And then close the string.

  • And then if you run the just look right, I think it looks right.

  • I think so.

  • But also see it there.

  • That's easier.

  • Oh, that's right.

  • Yeah.

  • Okay.

  • I'm gonna run it.

  • Yes, her effect.

  • It just showed it to me again.

  • Yes.

  • That's showing me like, what's in the memory right now?

  • Yes.

  • Okay, so let's make another and you sell And then let's just draw this.

  • So I think we should just be able to say HTML and then back takes so kind of like how we do the m d o on this is actually like I'm gonna puts him.

  • Hmm.

  • Yeah, I think that's how we can do it.

  • I've never tried to do this on then.

  • And then you can close that, uh, close the back.

  • Take.

  • I mean, but now I need to go in.

  • Yes, I think you can just do s v g in there.

  • I might be really wrong.

  • Uh, and then you can write html in there yet and like SPG.

  • And then I do path.

  • Yeah, And then you should be equals petal path like this.

  • Yeah, I think I could be completely wrong, but you're try like that.

  • Yeah, I think so.

  • So I'm using this particular syntax because this is that do you fancy way?

  • And it's not like including a variable expression.

  • And so it's the same here.

  • Yeah.

  • Let's see if it Oh, yes, I'm okay.

  • So let's go inspect element and see if it drew the path or not inspect this.

  • Yeah, it's just a Dom element.

  • Yes.

  • So then if we open up, maybe we can make a bigger for people who perfect so looks, but on Lee in love.

  • But I don't see any died not joining specify a color or something like that.

  • So Oh, you know why or how eyes this m It looks like the quotes are in there because I think you need to go back and put quotes around the But there's another reason why it's not showing up.

  • And we'll talk about that after you do this.

  • Yeah, and then run again.

  • And there's gonna be the next reason why it's not showing up is because and I'll do wait.

  • Okay, Let me try this.

  • Okay, So this is the 00 of S v g.

  • And you are drawing a pedal.

  • You are drawing a pedal up here.

  • You're not gonna see it, so I need to start.

  • I'm like, from over years.

  • So what we can do with SPG is SPG also has something called transform Transform That translate.

  • Yeah, so we can after the d, Let's put in like a transformer like here.

  • A new, you know, like a like a different.

  • That's a different attributes.

  • Oh, you mean like this?

  • Yeah, is equal to quote translate.

  • I have a keyboard issue Any one of those new Mac laptops that they fixed this butterfly keywords disaster giving anyway, that Zook Sorry.

  • Unrelated topic.

  • But I like seriously, this keyboard is making me so crazy.

  • OK, translate a never up.

  • And then like you, you made a good decision.

  • I made a bad decision on you.

  • You still want to translate down?

  • Because Because you're translating.

  • Basically, you're translating over.

  • You know why?

  • You still want to translate it down?

  • There's my paddle.

  • Yeah.

  • Wow, that's so sad.

  • Yes, so interesting.

  • Do you want a female moment?

  • No, no, that's good, right?

  • I'm just gonna say I miss you.

  • Do you want to go?

  • No, no, no.

  • This is good.

  • Yeah.

  • This is gonna leave it like that.

  • And the there's there's other attributes like Phil and stroke that would set the all that so similar to value drawn canvas.

  • But they're SPG attributes.

  • Yes.

  • So it's essentially ah, lot of the same functionality as canvas.

  • It will translate over really you?

  • Usually they just the interface is different.

  • Okay, I am Answer another thing.

  • I'm just gonna say right now this this is okay right now, But I like to set the width and height of the SPG as attributes are the within high attributes because one of the most common mistakes that people will you, um, have when they first start with SPG is you can think of spg as kind of like a window into the SPG world.

  • So there's, like, things being rendered here and you're just getting a little view poor.

  • And if your view port is too small and like, you know, you render your data like down here, you won't ever see it.

  • And I've seen so many frustrated people s o.

  • If you do that, it would be cut off, right, because now you're but 25 math math.

  • It's hard.

  • Okay, So what we can do is we can, like, set another variable and just say that the sizes 50 that, like the size of the pedal, is 50.

  • And now you can go around like tour for later.

  • We can use that as a very mean set, a variable up.

  • Here s oh, you can't.

  • Well, you can't do multiple variables in the cell.

  • You have tohave.

  • You have to do so.

  • New cell for the variable.

  • And then I would do like pedal size is 50.

  • Yeah, and then you condone.

  • Then you can use that later to, like, programmatically Oh, but I would want that to be in here, right?

  • No, no.

  • Oh, cause I would do that.

  • Use a transformed, like scale it.

  • Oh, for this for like or if you have for the translate later on.

  • But these air hard the path values are hard coded.

  • That's fine.

  • So if I wanted to suddenly make it bigger, you will use that transform scale transform scale.

  • Okay, so we'll get there.

  • Okay.

  • God.

  • Okay, so the next thing we want to d'oh now that we have a pedal is this is saving automatically.

  • Yeah, although, magically, I'm so if you want to go, Tiu or I can show it here.

  • Okay, so here you might notice.

  • I'm we have the pedals.

  • Oh, and then I can I can really quickly run through these, like so this one.

  • You know, I drew the g.

  • I drew, like a like a curve down to the bottom.

  • And then I I think I have maybe another Oh, yeah, I drew a curve down to the bottom by, like, that anchor point I, like did at the same line as, like, the bottom one.

  • And then I drew another curb the PG, I drew three curves.

  • The PG 13 was fun because I was one curve one line, one line, one curve.

  • I am so like once you know these pots, you can decode how these like shapes are made.

  • My thing is, usually I just do the simplest basic version without a lot of flair, and the audience will be amazed what they could make.

  • So, uh, take Shirley's work as inspiration for how you might design your pedal if you have to be following along.

  • And I'm very happy with Yeah, So, uh, the next thing we want to do So this is where we're actually gonna get into d three.

  • I'm and one of the things that I want to explain.

  • Some things.

  • I'm so ah d three is this sort of big library that has a lot of functionality.

  • I'm but what is it?

  • What it's really good for is translating raw data into what you need for the browser to render so um today and I'm just gonna Well, so there's a lot of, like things that it makes easy for us, like calculating positions of I'm, like, no downlink graphs And, um, you know, giving us difference like x y positions for not this 10 yes, yes, that one I am for like, drawing trees.

  • So, like it will calculate X Y positions and, like, SPG paths for all of that I'm.

  • But today what we want to do is use something called scales d three scales.

  • I'm and this is something I used in basically, like every one of my projects.

  • I'm And so what scales does is I'm essentially translate one thing one thing into another.

  • I think maybe.

  • And p five you have like dot map.

  • I think map is a function that will take a value with a given range and read and map it to a new range.

  • Yeah, exactly.

  • That's what scales for D three.

  • So, like just different vocabulary.

  • I'm And so, for example, we have, like, when your scales that do like, you know, linear leave and the map function just does it as like a linear scale.

  • Okay, so there's not a way.

  • There's obviously other ways you can think of a range and map the value, but it sounds like D three has a lot of yeah capabilities in terms of how you different kind of scales, like logarithms scale.

  • Yes.

  • So we have, like, power log time, like you mean like a map as input.

  • Like if you have, like, a date like a Java script State object, Because a lot of times in data you have, like, dates and years and you want to, like, map that too.

  • Like the exposition you will use scale time.

  • I'm one of my personal favorites.

  • Is kwon ties like, which is basically you give it a continuous input and then you give it a discrete output.

  • And when you I'm and then when you pass in your numbers, it would map thio.

  • So, like, there is very much like the machine learning examples I've been doing Put it map to a classification.

  • But in this case, you don't need machine learning is it's just really the literal range.

  • Yeah, divided up.

  • Yeah, yeah, yeah.

  • Sue, the reason why I'm talking about this is because now I want us to do some mapping from the data.

  • I'm thio each of these kind of attributes.

  • So I think what we want to do is let's do a mapping for the number of petals.

  • And so you can imagine it's from the number of IMDb, but votes to the number of, um, pedals.

  • And so that's the scale quantities from earlier, because it's a continuous number.

  • Continuous input.

  • But then you can't have, like, you know, 5.5 petals, right?

  • Like you want five petals or six titles or seven.

  • So I have, like, five, too.

  • I think nine or 10 minutes I'm and then we'll use a scale linear to dio I'm from the IMDb rating to the size to the scale.

  • Like we're just work with number of petals and size of the flower.

  • Yeah, put those two things.

  • I'm so let's actually just get into the observable.

  • I'm and I just realized I'm that maybe I also I want to give you the data.

  • Okay, So should I switch to my laptop?

  • Were so in yours?

  • No, thank you.

  • I'm well, let me let me, uh, let me pull up the data for us.

  • So the data should be on my film farmers.

  • So under film flowers, I have movie star Jason.

  • Okay, I can pull that up here.

  • Yeah, actually, that might be the easier thing to do and then switch to here.

  • Now we're back to the this laptop, and I'm going to get help dot com slash What's your S x Y w you on deacon?

  • D'oh slash You're not following e.

  • People follow people on.

  • Get up that either.

  • I don't think I don't know.

  • I don't notice that there's, like, a follow.

  • I don't know.

  • You're probably the only person now that I follow.

  • Uh, so also, it seems like we're about to get the data, which is kind of like a new stage, so we could take, like, I often like to take a break in the middle, just for a couple minutes.

  • So maybe now is a good time to do that.

  • As a as I get the data.

  • Okay.

  • Okay.

  • Uh, movie star Jason.

  • So do I need Thio?

  • How how is this gonna come into observable?

  • Also could take a break and let people do that.

  • Okay, so there's two ways I'm so let me let me just look good.

  • Yeah, rods so that we can get to the actual you are.

  • Okay, there's two ways I'm If you want to copy that, I'm and then I'm gonna show you the first way because I think it's the closest to how we actually will develop.

  • Okay, we're going to get the data into observable and that everyone who's watching if you're falling along, hopefully you have your own pedal design or an exact replica of my design and then the data into observable.

  • We'll take a short break to make sure everybody has that answer any questions and come back and finish the awesome.

Okay, now I'm lying.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

A2 初級

D3.js的介紹,由Shirley Wu主講。 (Introduction to D3.js with Shirley Wu)

  • 1 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字