Leanpub Header

Skip to main content
Go to Leanpub.comLeanpub

D3 Tips and Tricks v5.x

Interactive Data Visualization in a Web Browser

Malcolm Maclean

Tips and tricks for using d3.js (version 5), one of the leading data visualization tools for the web. It's aimed at getting you started and moving you forward. You can download for FREE or donate to encourage further development if you wish :-).

The author is letting you choose the price you pay for this book!

Pick Your Price...
PDF
EPUB
WEB
1,918
Readers
406
Pages
About

About

About the Book

New version avaialble! Go here for the v7 edition!

D3.js can help you make data beautiful.

D3 Tips and Tricks is a book written to help those who may be unfamiliar with JavaScript or web page creation get started turning information into visualization.

Data is the new medium of choice for telling a story or presenting compelling information on the Internet and d3.js is an extraordinary framework for presentation of data on a web page.

What version of d3.js is this written for?

Version 5.x. If you're looking for the edition of this book that was written for version 4.x you can get it here or for 3.x you can find it here...

Is this book for you?

It's not written for experts. It's put together as a guide to get you started if you're unsure what d3.js can do. It reads more like a story as it leads the reader through the basics of line graphs and on to discover animation, tooltips, tables, interfacing with databases via PHP, sankey diagrams, force diagrams, maps and more...

Why was D3 Tips and Tricks originally written?

Because in the process of learning things, it's a great way to remember them if you write them down :-).

As a result, learning how to do cool stuff with D3 meant that I accumulated a sizeable number ways to help me out when the going got tricky. Then I realised that these could be useful for others who were trying out d3.js and who were at a similar knowledge level.

So here we are! A collection of tips and tricks for d3.js written by a noob for people who might consider that they're in the same situation :-).

What's in the book?

I've captured the appropriate code (in cool looking coloured text) and added in heaps of illustrations of what's going on so that you will get more traction at the start of your learning process than I did.

But wait! There's code!

There are over 50 code examples used in the book (with their data files) available to download (still free!) and they will also available online.

The awesome that is Open Source.

Please consider this an opportunity for you to contribute back to the Open Source community that makes products like d3.js possible. If you find something that can be improved about the book or think there's something that can be added, just let me know!

The book has a lot of information in it, but there's still more to come. I have a long list of material that I want to add, so I'm hoping that publishing using Leanpub will allow readers to get easy notification of when updates and improvements are made.

Download the whole book just to try it out!

I'm making the manual available for free because I think it's a great way to give something back to the community as a whole, but if you find some value in the book, please consider donating when you download it so that Leanpub get something for hosting the book and providing such an awesome service.

(Don't be put off by the button at the top saying 'Buy the ebook now'. Once you click on it, you can select any price you want including $0!)

Enjoy.

So I hope you get something out of the book, please excuse the sometimes light-hearted conversational manner in which I approach the topic and enjoy D3!

Kudos for the original version of D3 Tips and Tricks from d3noob.org;

"Thanks, super helpful!" - Davo

"Thanks for the help (reading through your book now, and it's awesome!)" - Jared

"Thank you for doing this. I've been looking for something like this for a while." - Marla

"You have just inspired me to give Sankey a fresh new face in Dex" - Patrick

"Thank you - exactly what I was looking for explained clearly and succinctly" - Anon

"Much appreciated. Excellent tutorial" - Anon

"Thanks!! This help rocks" - greencracker

"Thx for book. It's awesome." - Michael Guimet

"Thank you !! :) very very thank you." - Nuri Lee

"Thanks for your work man, it inspired me to use in my research!" - napicool

Used as a teaching resource at;

  • The Dublin Institute of Technology for Data Visualization.
  • The University of Nebraska

Share this book

Categories

D3.jsComputers and ProgrammingGraphicsSoftware

Feedback

Email the author

Price

Pick Your Price...

Minimum price

Free!

$0.99

You pay

$0.00

Author earns

$0.00
$

All prices are in US $. You can pay in US $ or in your local currency when you check out.

EU customers: prices exclude VAT, which is added during checkout.

...Or Buy With Credits!

Number of credits (Minimum 0)

0
The author will earn $0.00 from your purchase!
You can get credits monthly with a Reader Membership

Author

About the Author

Malcolm Maclean

I have a passion for knowledge and I realise that part of the responsibility of gathering knowledge is being able to advance the state of the human condition in some way.

My aims in writing these books are to play with software, achieve personal goals and try something new for fun. It also helps that I think Open Source, technology, the visual representation of data and information rock in serious ways.

The books that I write are a mechanism to support my own learning, so the way I explain things is focused on trying to impart understanding in a simple but functional way.

I'm totally in awe of the Open Source community that has made this type of work possible. If you feel that you would like to support continued development of this content, feel free to donate when you download.

If you're looking for a hard copy version of any of these publications, they will be available through Amazon (not all will be available sorry).

Contents

Table of Contents

Acknowledgements

  1. Mike
  2. Partners, Supporters and Contributors.
  3. Proof Reading
  4. The d3.js Community
  5. Leanpub
  6. Make sure you get the most up to date copy of D3 Tips and Tricks

What do we need to get started?

  1. DON’T FREAK OUT!
  2. HTML
  3. JavaScript
  4. Cascading Style Sheets (CSS)
  5. Full disclosure
  6. Web Servers
  7. Normal web server
  8. Blockbuilder
  9. PHP
  10. Other Useful Stuff
  11. Text Editor
  12. Getting D3
  13. Host d3.js locally
  14. Use a remote CDN to always use the latest version of d3.js
  15. Potential directory structure
  16. Where to get information on d3.js
  17. d3js.org
  18. Google Groups
  19. Stack Overflow
  20. Github
  21. bl.ocks.org
  22. Twitter
  23. Books

Starting with a simple graph

  1. HTML
  2. Cascading Style Sheets (CSS)
  3. D3 JavaScript
  4. Setting up the margins and the graph area.
  5. Getting the Data
  6. Formatting the Date / Time.
  7. Does Time Matter?
  8. Setting Scales Domains and Ranges
  9. Scales, Ranges and the “Ah Ha!” moment.
  10. Adding data to the line function
  11. Adding the SVG element.
  12. Actually Drawing Something!
  13. Drawing the line
  14. data vs datum.
  15. Drawing the Axes
  16. Wrap Up

Things we can do with the simple graph

  1. Setting up and configuring the Axes
  2. Change the text size
  3. Changing the number of ticks on an axis
  4. Rotating text labels for a graph axis
  5. There might be a better way
  6. Formatting a date / time axis with specified values
  7. Adding Axis Labels
  8. The x axis label
  9. Why does that line look odd?
  10. The y axis label
  11. How to add a title to your graph
  12. Change a line chart into a scatter plot
  13. Smoothing out graph lines
  14. Make a dashed line
  15. Filling an area under the graph
  16. CSS for an area fill
  17. Define the area function
  18. Draw the area
  19. Filling an area above the line
  20. Adding a drop shadow to allow text to stand out on graphics.
  21. Is this evil?
  22. CSS for white shadowy background
  23. Drawing the white shadowy background.
  24. Adding grid lines to a graph
  25. The grid line CSS
  26. Define the grid line functions
  27. Draw the lines
  28. Adding more than one line to a graph
  29. Labelling multiple lines on a graph
  30. Multiple axes for a graph

Elements, Attributes and Styles

  1. The Framework
  2. Elements
  3. Circle
  4. Ellipse
  5. Rectangle
  6. Line
  7. Polyline
  8. Polygon
  9. Path
  10. Clipped Path (AKA clipPath)
  11. Text
  12. Anchor at the bottom, middle of the text:
  13. Anchor at the bottom, right of the text:
  14. Anchor at the middle, left of the text:
  15. Anchor in the middle, centre of the text:
  16. Anchor in the middle, right of the text:
  17. Anchor at the top, left of the text:
  18. Anchor at the top, middle of the text:
  19. Anchor at the top, right of the text:
  20. Attributes
  21. x, y
  22. x1, x2, y1, y2
  23. points
  24. cx, cy
  25. r
  26. rx, ry
  27. transform (translate(x,y), scale(k), rotate(a))
  28. transform (translate(x,y))
  29. transform (scale(k))
  30. transform (rotate(a))
  31. width, height
  32. text-anchor
  33. dx, dy
  34. textLength
  35. lengthAdjust
  36. Styles
  37. fill
  38. stroke
  39. opacity
  40. fill-opacity
  41. stroke-opacity
  42. stroke-width
  43. stroke-dasharray
  44. stroke-linecap
  45. stroke-linejoin
  46. writing-mode
  47. glyph-orientation-vertical
  48. Using styles in Cascading Style Sheets

Manipulating data

  1. How to use data imported from a csv file with spaces in the header.
  2. Extracting data from a portion of a string.
  3. Grouping and summing data (d3.nest)
  4. Selecting a random string from an array.

Bar Charts and Histograms

  1. Bar Chart
  2. Histogram
  3. Bar Charts
  4. The data
  5. The code
  6. The bar chart explained
  7. Histograms
  8. The data
  9. The code
  10. The histogram explained

Tree Diagrams

  1. What is a Tree Diagram?
  2. A simple Tree Diagram explained
  3. A horizontal tree diagram explained
  4. Generating a tree diagram from external data
  5. Generating a tree diagram from ‘flat’ data
  6. An interactive tree diagram

Sankey Diagrams

  1. What is a Sankey Diagram?
  2. Which Sankey plugin should we use?
  3. How d3.js Sankey Diagrams want their data formatted
  4. Description of the code
  5. Formatting data for Sankey diagrams
  6. From a JSON file with numeric link values
  7. From a JSON file with links as names
  8. From a CSV with ‘source’, ‘target’ and ‘value’ info only.
  9. Sankey diagram case study

Bullet Charts

  1. Introduction to bullet chart structure
  2. D3.js code for bullet charts
  3. Adapting and changing bullet chart components
  4. Understand your data
  5. Add as many individual charts as you want.
  6. Add more ranges and measures
  7. Updating a bullet chart automatically

Mapping with d3.js

  1. GeoJSON and TopoJSON
  2. Starting with a simple map
  3. center
  4. scale
  5. rotate
  6. Zooming and panning a map
  7. Displaying points on a map

Assorted Tips and Tricks

  1. Adding tooltips.
  2. Transitions
  3. Events
  4. Get tipping
  5. There is only one!
  6. on.mouseover
  7. on.mouseout
  8. Including an HTML link in a tool tip
  9. Moar Links!
  10. What are the predefined, named colours?
  11. Selecting / filtering a subset of objects
  12. Select items with an IF statement.
  13. Applying a colour gradient to a line based on value.
  14. Applying a colour gradient to an area fill.
  15. Transitions
  16. Transitioning Chaining
  17. Transition Easing
  18. Looping a Transition
  19. Show / hide an element by clicking on another element
  20. The code
  21. Using HTML inputs with d3.js
  22. What is an HTML input?
  23. Using a range input with d3.js
  24. The code
  25. The explanation
  26. Using more than one input
  27. The code
  28. The explanation
  29. Rotate text with an input
  30. The explanation
  31. Use a number input with d3.js
  32. Change more than one element with an input
  33. The code
  34. The explanation
  35. Add an HTML table to your graph
  36. HTML Tables
  37. First the CSS
  38. Now the d3.js code
  39. A small but cunning change…
  40. Explaining the d3.js code (reloaded).
  41. Wrap up
  42. More table madness: sorting, prettifying and adding columns
  43. Add another column of information:
  44. Sorting on a column
  45. Prettifying (actually just capitalising the header for each column)
  46. Add borders
  47. Adding web links to d3.js objects
  48. It’s all about the ‘a’ and the ‘xlink’
  49. Adding in the links
  50. Making the mouse pointer ignore an object
  51. Export an image from a d3.js page as a SVG or bitmap
  52. Bitmaps
  53. Vector Graphics (Specifically SVG)
  54. Let’s get exporting!
  55. Copying the image off the web page
  56. Open the SVG Image and Edit
  57. Saving as a bitmap
  58. Understanding JavaScript Object Notation (JSON)

D3.js Examples Explained

  1. Multi-line graph with automatic legend and toggling show / hide lines.
  2. Purpose
  3. The Code
  4. Description
  5. Nesting the data
  6. Applying the colours
  7. Adding the legend
  8. Making it interactive
  9. Difference Chart: Science vs Style.
  10. Purpose
  11. The Code
  12. Description
  13. Nesting the data
  14. Wrangle the data
  15. Cheating with the domain
  16. data vs datum
  17. Setting up the clipPaths
  18. Clipping and adding the areas
  19. Draw the lines and the axes
  20. Adding a bit more to our difference chart.
  21. Add a Y axis label
  22. Add a title
  23. Adding the legend
  24. Link the areas
  25. The final result
  26. My Favourite tooltip method for a line graph.
  27. Purpose
  28. The Code
  29. Description
  30. Adding the circle to the graph
  31. Set the area to capture the mouse movements
  32. Determining which date will be highlighted
  33. Move the circle to the appropriate position
  34. Complex version
  35. Code / Explanation

The Leanpub 60 Day 100% Happiness Guarantee

Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.

You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!

So, there's no reason not to click the Add to Cart button, is there?

See full terms...

Earn $8 on a $10 Purchase, and $16 on a $20 Purchase

We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.

(Yes, some authors have already earned much more than that on Leanpub.)

In fact, authors have earned over $14 million writing, publishing and selling on Leanpub.

Learn more about writing on Leanpub

Free Updates. DRM Free.

If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).

Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.

Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.

Learn more about Leanpub's ebook formats and where to read them

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!

Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.

Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.

Learn more about writing on Leanpub