Need to learn D3.js?

I've got some good news.

Stop me if this sounds familiar. Your designer sends over revision #72, and they want to make some "tweaks" to the charts. Sounds easy enough. Problem is, the tweaks they want aren't something your chosen library allows you to do. "Nobody would ever need to change that."

Uh huh.

Now you have some decisions to make. Do you tell your boss "sorry, I picked a charting library that restricts what we can and cannot implement."? That doesn't sound like it would be very good for your career.

At the same time, you can't just rip out your chart library. Not this far into the project. Heck, even if you found another one that looked better, who's to say it actually is? What if it's worse?!

Rock, meet hard place. Population: you.

Don't paint yourself into a corner

3rd party chart libraries can make for a great demo, but getting them to production is a whole different story.

When you start a new project, you don't know exactly what you're going to build. You might have user stories, or wireframes, or even a detailed spec, but if you're doing it right, things will evolve. You'll discover the data doesn't support that view, or users would be happier with a different layout, and changes will be made. This is normal.

Unfortunately, you won't know until it's too late that your library of choice doesn't support your new requirement.

Does that off-the-shelf library expose the APIs and styles you need to implement the vision? That's anybody's guess.

You can and should control your own destiny

With a minimal investment of time you can learn the skills necessary to build your own charts.

Every device is already capable

Native, open web tech has all the tools you need to avoid looking like a schmuck.

Wouldn't it be nice if you knew how to target these performant and ubiquitous technologies? SVG has been a W3C spec since 1999! Not only does it perform well across devices, it also boasts small file sizes and it compresses really well.

Turnkey responsive design

What if you could make every single chart responsive with one small utility function? From a not-so-new smartphone to a massive 5K monitor and everything in between, SVG graphics will stay crisp and clear when built correctly.

Performant by default with room to grow

Thanks to its maturity SVG is speedy by default. Out of the box, you could use it to draw (and animate!) hundreds if not thousands of elements without issue.

If you do manage to bump up against the limits of SVG, D3 enables you to easily target canvas elements instead by changing just a small fraction of your code.

Control over every pixel

With D3 and SVG, you use CSS to style things, just like with the rest of your code. You've got direct, clean access to every stroke, fill, and dimension in existence.

Build foundational knowledge

Data Visualization is a great use case for SVG but it's not the only one. SVG has become a popular replacement for icon fonts and simple images thanks to their versatility and resolution independence.

Knowing how to work with SVG is a valuable skill to have in your toolbox, especially for developers tasked with building creative UIs and interactions.

Learning D3 doesn't have to be a struggle

Web developers who already know HTML, CSS, and JavaScript can get up and running with D3 in a handful of hours. D3 + SVG: How to Create Flawless Charts for Any Screen will take you from standard web dev to your team's go-to data visualization engineer in just 10 concise chapters.

Every concept in the book is accompanied by example code embedded directly in the text. Additionally, every example is built on CodePen, so you're one click away from experimenting with the code on your own.

If you're completely new to D3, the bundled D3 in 5 Days booklet will teach all the prerequisites. The two books together can take you from zero to D3 in a day or two.

Guaranteed.

Want to dive even deeper?

The Complete Bundle includes Build Interactive JavaScript Charts with D3 v4, an in-depth video course with 2.5 hours of instruction spread across 26 bite-sized lessons. This course was previously only available to Egghead PRO members.

Got 10 minutes? Check out this sample lesson and remember the course includes 25 more lessons like this.

The Complete Bundle also includes 3 months access to group Q+A office hours. Bring your questions and code samples and we'll sort them out together!

Do you need personalized help?

Embarking on a big project? Considering a refactor? Feeling constrained by past choices?

If you want advice from a seasoned expert with several years of D3 experience, the Coaching Call was made for you. I'll join you live on Skype or Hangouts or whatever to provide advice for your specific scenario.

100% Money Back Guarantee

Plain and simple: if you're not completely satisfied I don't want to keep your money. Email me at ben@knowbetter.io within 30 days of your purchase date and I will refund every cent of your money, no questions asked.

Does this stuff really work?

From zero to D3 in a hurry

These materials contain no magic. Every bit of information in them is freely available on the internet. Heck, that's how I learned!

But it's taken me since 2011 to build my D3 skills to where they are now. I'm guessing you'd like to get up to speed a bit quicker than that. That's where these materials come in.

The D3 in 5 Days booklet can take you from zero to familiar in about 6000 words.

The D3 + SVG: How to Create Flawless Charts for Any Screen book is 10 concise chapters that start where D3 in 5 Days left off and take you through building several common chart types.

Finally, Build Interactive JavaScript Charts with D3 v4 provides a video for most every topic in the book, plus several topics not covered in the book.

Who is this for?

This is for any web developer who wants to add D3.js to their toolbox.

It only assumes you're familiar with HTML, CSS, and JavaScript. If D3 in 5 Days was your first exposure to D3 this book should be perfect for you. It assumes no knowledge of SVG.

How is the book structured?

This book is divided into 2 parts. The first 4 chapters cover the basics of SVG itself, and the last 6 chapters introduce D3 APIs and techniques for creating SVG charts programmatically.

1. SVG Elements
2. Basic Shapes in SVG
3. Working with Text in SVG
4. SVG Groups and CSS Transforms
5. Creating SVG with D3 APIs
6. A Blueprint for Charts with Axes
7. SVG Bubble Charts with D3
8. SVG Line Charts with D3
9. SVG Area Charts with D3
10. Make Any SVG Responsive

The book is chock full of CodePen examples. They're presented with ample context and explanation in the book, but if you'd like to explore them on your own they're available as a collection here.

When you purchase a bundle you also receive 26 video lessons. Totaling more than 2.5 hours, nine of the lessons directly correspond to content in the book and are referenced in-place within the text. (These videos are also available to Egghead PRO subscribers.)

A Trusted Instructor

I'm Ben Clinkinbeard, a developer and instructor with more than 15 years experience. I've been working with D3.js professionally since 2011.

Since 2014 more than 25,000 developers have spent over 18,000 hours watching my video lessons. That doesn't happen with educational content that doesn't work.

This material will not waste your time. You'll get the knowledge you need to be successful in the shortest time possible.

Your success is my top priority.

100% Money Back Guarantee

Plain and simple: if you're not completely satisfied I don't want to keep your money. Email me at ben@knowbetter.io within 30 days of your purchase date and I will refund every cent of your money, no questions asked.

Happy hacking!