Welcome everybody.

Thanks for coming to the first Angular conference or Angular

Meetup here in Mountain View in 2014.

So we've got I think a really good start of the year tonight.

I've got a couple of announcements,

like I always do.

Then Victor's going to come up and talk about Angular D3,

and Igor will finish up with how will

pull requests work in the Angular world.

A couple of announcements before we get going.

Like always, if you plan to talk, meaning ask a question,

and we hope you do, you will need to sign one of the forms

that Igor has right back there.

And I think we give you a T-shirt if you do such a thing.

Is that still true?

Yeah.

OK.

I think that's still true.

No pandering questions, just real questions.

And I think that's it.

With that, we'll get started.

So, not a lot of things happened in the world of Angular

in 2014, except we got a lot of releases out somehow.

Apparently, we don't observe holidays.

I think we've never gotten so many releases out

as we did between last Meetup and this one.

There's a couple of highlights in these four releases.

There was 114 pull requests closed.

A couple features got in, like we

have multi-line NG options now.

There's one jqLite feature for element dot one.

A ton of performance things went in for injector, resource,

compile, parse, broadcast, even in jqLite,

some things got faster.

And then a ton of bug fixes.

A lot of things around IE8, a whole bunch

of stuff in the animation bits, and across the rest of Angular.

In the world of Angular Dart, we got out two releases.

If you haven't been following along,

Angular Dart are the ports to the Dart language.

And it's kind of just getting started.

We're working towards the 1.0 release.

Some of the things that we added are getting parity

with Angular JS side.

So we're still adding a bunch of directives.

There's new things that got added there.

A lot of performance improvements to make it

perform very well on Dart.

This is still a bit of a new place for us.

And then we have some experimental supports

for this thing called shallow-repeat.

One other announcement I'd like to make

is that we have a conference going on in two days.

On the 16th we start in Salt Lake City.

Anybody coming there with us?

A couple-- Just us.

OK.

Yes, one over here.

Good.

Great.

So this is for everybody who's not coming.

We're actually going to be live streaming

the entire conference.

You can tune into it live and you can watch me again,

and some of the other folks, talk

about other interesting things in the world of Angular.

So please tune in.

I think it starts at 9:00 in the morning,

but that's maybe an hour off in Salt Lake time.

And I'll see you guys there.

One other announcement.

If you are interested in Angular on Dart,

the Dart team, along with us, we're

running this thing called Flight School to get you up

and running.

So if you want to learn the Dart language

and learn about Angular Dart on top of it.

This is happening in many cities around the world, and really

around the world.

If you just search for-- Sorry I don't have a link for it.

If you just search for Dart Flight School,

you'll find it as the first result.

And from Shanghai to Chicago you can find a local place

where you can come tune in and learn Angular Dart.

That's it for this month's announcements.

We'll have Victor come up and talk to us about D3.

VICTOR POWELL: Thanks Brad.

Can you hear me?

You're not supposed to see that.

So I'm a freelance data visualization engineer,

and I'm giving a talk, if you couldn't

tell by the slides, a talk on visualizing data

with Angular and D3.

Also, all the slides are going to be online after the talk,

so we'll pack out the link on the Meetup,

so you shouldn't have to worry about taking notes furiously.

We're going to be going over a lot.

This is sort of the combination of D3 and Angular.

So don't worry about that.

But before I begin, could I just get a quick show of hands.

Who's in some way at all familiar with Angular?

And don't be shy if you're not.

It's totally fine, because this is the cross-pollination

of Meetups from the E3 [INAUDIBLE] area.

OK, keep your hands up, though.

Keep your hands up.

Now, anyone that doesn't have their hand up,

look at the person that does have their hand up and talk

to them.

But it's a good turnout.

Nice hand raising for a D-- Not surprising

for an Angular Meetup.

Now anyone that has some familiarity with D3

go ahead and raise your hand.

Cool.

Now, if you're not familiar with D3, that's fine.

Find someone who is and talk to them, shake their hand,

say hello.

OK, now we're going to get into the talk.

So little about me, because I think it's important for you

to know a little bit about who I am so you'll pay attention.

You'll know why to listen in the first place.

I visualize data, obviously.

As a freelance developer, I've most recently

worked with a company called Monsoon

to help them build a dashboard for Hewlett Packard that

helps them analyze their data center energy

consumption across all of their data centers.

I teach at a hacker school in San Francisco

called Hack Reactor.

We actually have a few students here today-- former students,

not current students.

Some of those, actually.

OK.

So I also really like to explain things.

This is a visualization of the central limit

theorem I did a while back.

Here's also an explanation of the Monte Hall problem.

If you're not familiar, you should Google it and find

this explanation, and it'll tell you what it is

and why it's interesting.

Also, the Simpson's paradox, which

is a really interesting statistical anomaly--

I'm not going to get too much into details because it'll

probably just confuse you, but if you read this,

hopefully you won't be confused anymore.

I'm sorry.

A lot of these data visualizations

I've also done with my good friend Lewis-- he's here today.

Lewis Lehe, or Le-- you don't pronounce the H-E.

I'm also writing a book with Ari Lerner, who

is in charge of ng-newsletter, or puts together ng-newsletter.

And he's also written the book, the ng-book.

This book is still in a peer release state,

so it's not done completely, but if you buy it now

you'll get a discount over the release price.

And if you need help understanding your data,

send me an email and maybe I can help,

or the duo combination of me and Lewis.

So no more ads.

Let's start to get into the good parts.

So just to give you a high level view,

this talk's going to be on why and how you should use Angular

and D3 for doing data visualizations.

Before we do that, though, let's talk a little

about why you should care about data

visualization in the first place.

And to do that, I'd like to show you

one of my most favorite examples, Anscombe's quartet.

This is a series of four data sets with x and y values

for each.

As a table it's kind of hard to understand, so maybe

as a good idea, let's look at the summary statistics

of that data set.

But when we do that, unfortunately, they all

happen to have exactly the same summary statistics.

How is that possible?

That's so frustrating.

The mean of x and variance of x, the mean of y,

the variance of y, correlation of x and y,

and the linear regression is exactly the same.

And if we just look at the summary statistics,

that's very confusing, because all the data

seem somewhat different.

But it becomes immediately apparent

when we visualize the data, and we can see clearly

that the data sets represent completely different behavior.

So, OK, we understand why data visualization is important,

but why use Angular for doing data visualization?

Chief among them all are directives.

For those not familiar with directives,

give us essentially custom HTML tags.

It also allows our visualizations

to stay modular and self-contained

so that we can pick them up and drop them

in to some other application fairly easily.

But there's more reasons than just directives

for doing data visualization.

Some of those we'll get into, but for the most part

it's directives.

I like to think of directives as input fields.

They're kind of like directives that the browser gives us

automatically.

They're not actual directives in an Angular sense.

But they are like directives in that they encapsulate

a lot of behavior and we're given a simple API

to plug into them.

So the one example right here is the range input.

And I specify the min and the maximum value,

and then the current value.

And then it, the browser, handles

creating the slider, and the knob,

and watching for changes to that knob,

and updating the value for me.

I don't have to worry about the internals of that slider.

It's just an input range.

Same thing for the date input field.

There's really a lot of complex user interaction

here that the browser gives us for free,

but it abstracts away all those concerns for us.

Well, wouldn't it be nice if we could have something

like a donut chart element, and then we

wouldn't have to worry about the internals.

We could just plug our data into it,

and not have to, after having created our element,

not have to worry about how it does all that it does.

Well, directives make this possible.

Beyond directives, some of the other interesting features

that Angular gives us when we have our visualizations

and directives are things like ng-switch

for conditional templating.

So let's say, for example, based on some criteria,

we would like a pie chart to be displayed with our data,

but maybe in some other condition

we'd like a bar chart to be there instead.

Another really great feature of Angular that blends well, that

makes data visualization a lot easier is ng-repeat.

Small multiples is this idea, a powerful data visualization

tool, originally popularized by Edward Tufte,

and it facilitates the comparisons

of change across multiple charts side by side.

So this is a classic example of-- I'm

sorry-- of small multiples by Eadweard Muybridge,

and it's called a Horse in Motion.

You might be wondering, though, why can't we

just use animation?

Why can't we just play a video of a horse running?

Wouldn't that convey all the information?