Interactive Data Visualization for the Web — Scott Murray

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Interactive Data Visualization for the Web — Scott Murray — alignedleft</title> <meta name="description" content="Design, data, visualization, culture." /> <meta name="keywords" content="code, art, design, data, visualization, generative, algorithmic, processing, p5, d3, d3.js, book, maps" /> <meta name="robots" content="index, follow" /> <link rel="alternate" type="application/rss+xml" href="https://scottmurray.org/work/feed" /> <link rel="stylesheet" type="text/css" media="screen" href="https://scottmurray.org/assets/css/screen.css" /> <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="https://scottmurray.org/assets/css/narrow.css" /> <meta name="viewport" content="initial-scale=1.0" /> </head> <body> <div id="migrationBanner"><p>This website is not current and will be retired at some point. See <a href="/about">About</a> for latest.</p></div> <header> <h1><a href="https://scottmurray.org">Scott Murray</a></h1> <nav> <ul> <li><a href="https://scottmurray.org/about">About</a></li> <li><a class="active" href="https://scottmurray.org/work">Work</a></li> <li><a href="https://scottmurray.org/tutorials">Tutorials</a></li> <li><a href="https://scottmurray.org/resources">Resources</a></li> <li><a href="https://scottmurray.org/talks">Talks</a></li> <li><a href="https://scottmurray.org/contact">Contact</a></li> </ul> </nav> </header>  <noscript> <div id="js_warning"><strong>JavaScript is turned off, so this page won’t be very interactive.</strong> Switch JavaScript back on in your web browser for the full experience.</div> </noscript> <h4>Project / 2013 March</h4> <h2>Interactive Data Visualization for the Web</h2> <div id="media"> <div class="image"> <img src="https://scottmurray.org/content/02-work/300-d3-book/1.jpg" width="500" height="656"> </div> <div class="image"> <img src="https://scottmurray.org/content/02-work/300-d3-book/2.png" width="500" height="1000"> </div> </div>  <div id="text"> <p>An introduction to <a href="http://d3js.org">D3</a> for people new to programming and web development, published by O’Reilly. The inital ebook was released in November 2012. The final ebook and paper copies were published in March 2013.</p> <p><a href="/work/d3-book-2e">Second edition</a> out now! <em>The links below will be useful only if you’re already referencing the now-out-of-date first edition.</em></p> <p>This book is a massive expansion of my <a href="https://scottmurray.org/tutorials/d3">online D3 tutorials</a>, and, by request, includes more information on basic web development, including comprehensive introductions to all of the web technologies behind D3: HTML, CSS, JavaScript, and SVG.</p> <ul> <li><a href="http://chimera.labs.oreilly.com/books/1230000000345/">Free online version</a></li> <li><a href="https://github.com/alignedleft/d3-book/releases">Example code files</a></li> </ul> <p>Also see my <a href="/work/d3-video-courses">D3 video courses</a>.</p> <h3>Translations</h3> <ul> <li><a href="http://books.gotop.com.tw/v_A388">Chinese (Traditional) / 中文（繁體）</a></li> <li><a href="http://www.ptpress.com.cn/Book.aspx?id=35616">Chinese (Simplified) / 中文（简体）</a></li> <li><a href="http://www.oreilly.co.jp/books/9784873116464/">Japanese / (日本語版)</a></li> <li><a href="http://www.insightbook.co.kr/books/programming-insight/interactive-data-visualization-for-the-web">Korean / (한국어)</a> (<a href="http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9788966261062&orderClick=LAG&Kc">1</a> <a href="http://book.interpark.com/product/BookDisplay.do?_method=detail&sc.shopNo=0000400000&sc.prdNo=214187538&bid1=search&bid2=product&bid3=img&bid4=001">2</a> <a href="http://www.yes24.com/24/goods/12425766?scode=029">3</a> <a href="http://www.aladin.co.kr/shop/wproduct.aspx?ISBN=896626106X">4</a>)</li> <li><a href="http://helion.pl/ksiazki/interaktywna-wizualizacja-danych-scott-murray,inwida.htm">Polish / Polski</a></li> </ul> <h3>What People Are Saying</h3> <p>“Explaining tricky technical topics with aplomb (and a little cheeky humor) is Scott Murray’s forte. If you want to dive into the world of dynamic visualization using web standards, even if you are new to programming, this book is the place to start.” —<a href="http://bost.ocks.org/mike/">Mike Bostock</a>, creator of D3</p> <p>@<a href="https://twitter.com/andyteucher/status/314144379495403520">andyteucher</a> Reading Interactive Data Vis for the Web by @alignedleft. Can't believe I'm actually laughing out loud reading a coding book.</p> <p>@<a href="https://twitter.com/gonzofish/status/309859544018870273">gonzofish</a> Completely engrossed @alignedleft's book… I can feel the #D3js mastery growing in me. Soon.</p> <p>@<a href="https://twitter.com/Ian__Watkins/status/309438831831154688">Ian__Watkins</a> @alignedleft Reading the Early Release eBook and running the code. Loving the humour, really helping the learning process by making it fun.</p> <p>@<a href="https://twitter.com/adelleywelley/status/307872188139184128">adelleywelley</a> Started learning D3 this weekend with @alignedleft's awesome book. I wholeheartedly agree that "variabalize" should be a word, make it so!</p> <p>@<a href="https://twitter.com/obfuscurity/status/312761612127858689">obfuscurity</a> Snagged the Kindle version of @alignedleft’s new dataviz/D3.js book. Yesssssss.</p> <p>@<a href="https://twitter.com/d3noob/status/301173947599314945">d3noob</a> That chapter on Geo mapping alone is fantastic! Great work.</p> <p>@<a href="https://twitter.com/#!/37point2/status/376099768071516160">37point2</a> Amazing resource on d3.js from @alignedleft and @OReillyMedia. <a href="http://chimera.labs.oreilly.com/books/1230000000345/">chimera.labs.oreilly.com...</a> You should really check it out.</p> <p>@<a href="https://twitter.com/#!/StocktonSays/status/375818052153012224">StocktonSays</a> Thank you @alignedleft for writing <a href="http://chimera.labs.oreilly.com/books/1230000000345/">chimera.labs.oreilly.com...</a>. It's awesome. And especially thanks for this: <a href="http://calmingmanatee.com">calmingmanatee.com</a></p> <p>@<a href="https://twitter.com/jcukier/status/271167633204854784">jcukier</a> re @alignedleft book: The hardest part of learning d3 is the bump at the beginning of the curve... Scott's patient tone will work wonders.</p> <p>@<a href="https://twitter.com/tmcw/status/304989188732882944">tmcw</a> and re: people asking for a good single resource on d3, just buy @alignedleft's book already</p> <p>“Right this moment I’m halfway through chapter 9 and I have this incredible animated scatter plot in front of me that is making me feel like quite the baller. Your book was my first real introduction to HTML, CSS, and JavaScript (plus I’d never even set up a local web server before). Suffice it to say, it doesn’t feel fair that I’ve created something so cool in less than two days.” —<a href="https://twitter.com/cpwalker07">Chris Walker</a></p> </div> <div id="proj_nav"> <p> <span><em>№</em> 30/42</span> <span>← <a href="https://scottmurray.org/work/ukpi">United Kingdom Peace Index</a></span> <span><a href="https://scottmurray.org/work/downton-ipsum">Downton Ipsum</a> →</span> </p> </div> <footer> <p>Copyright © 2006–2025 Scott Murray</p> </footer> </body> </html>

CINXE.COM

Interactive Data Visualization for the Web — Scott Murray — alignedleft