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.
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.
With a minimal investment of time you can learn the skills necessary to build your own charts.
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.
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.
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.
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.
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.
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.
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!
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.
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.
“Joyfully educational” is rare in a tech book but it’s how I would describe D3 + SVG. I love the writing style and spending extra time with the code examples is very helpful for all the new concepts and knowledge I’m gaining. Highly recommended!
― Nicholas Gentile, Software Developer, Money.Net
Ben's videos and D3 Tips always cover so much in a short space, and this continues with additional depth in the D3 + SVG book. It's a great guide to get you confidently working with SVG and D3 without getting lost in the abyss. The tone is friendly and very encouraging, with clear examples illustrating some fantastic best practices. You cannot go wrong with it.
― Sundar Singh, Data Visualisation Developer, Times Higher Education
If you’ve tried to learn D3 before and ended up with half-built visualizations and a hodge-podge of copied and pasted code, this is what you’ve been looking for. D3 + SVG condenses Ben’s knowledge into a 100% actionable product that will get you the results you want. The book is gold and the video lessons are top-notch over-the-top helpful.
― Sebastian Gutierrez, Principal, Dashing D3.js
A great introduction to d3. The examples are spot on and cover everything you need to know to get started.
― Alan Wilson, Senior UI Designer, Adobe
I've been watching Ben's D3 videos for a long time, and this book is a perfect companion. It really demystifies concepts that can be tough to get your head around and provides a blueprint for success. I would definitely recommend Ben's content to anyone hoping to add D3.js to their skillset.
― Joe Maddalone, Lead UI Developer, CloudBees
D3 + SVG is a fantastic introduction to SVG. It teaches you how to understand and create common D3 charts while adhering to established community conventions. If you’re just starting out this is a great resource.
― Denise Mauldin, Full Stack Software Engineer
Once again, Ben has done a fantastic job of taking a complex topic and breaking it down into small, digestible pieces with clear code examples to reinforce the concepts. D3 + SVG is a great resource for anyone who cares about creating products that people love.― Lukas Ruebbelke, Chief Builder, VenturPlex
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.
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.
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.
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.)
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.
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!