D3 Tips and Tricks v4.x

D3 Tips and Tricks v4.x

Malcolm Maclean
Buy on Leanpub

Table of Contents

D3 Tips and Tricks v4.x

  • Acknowledgements
    • Mike
    • Partners, Supporters and Contributors.
    • Proof Reading
    • The d3.js Community
    • Cover art
    • Leanpub
    • Make sure you get the most up to date copy of D3 Tips and Tricks
  • What is d3.js?
  • Introduction
  • What do we need to get started?
    • HTML
    • JavaScript
    • Cascading Style Sheets (CSS)
    • Web Servers
    • PHP
    • Other Useful Stuff
    • Text Editor
    • Getting D3
    • Host d3.js locally
    • Use a remote CDN to always use the latest version of d3.js
    • Potential directory structure
    • Where to get information on d3.js
    • d3js.org
    • Google Groups
    • Stack Overflow
    • Github
    • bl.ocks.org
    • Twitter
    • Books
  • Starting with a simple graph
    • HTML
    • Cascading Style Sheets (CSS)
    • D3 JavaScript
    • Setting up the margins and the graph area.
    • Getting the Data
    • Formatting the Date / Time.
    • Setting Scales Domains and Ranges
    • Adding data to the line function
    • Adding the SVG element.
    • Actually Drawing Something!
    • Drawing the line
    • Drawing the Axes
    • Wrap Up
  • Things we can do with the simple graph
    • Setting up and configuring the Axes
    • Change the text size
    • Changing the number of ticks on an axis
    • Rotating text labels for a graph axis
    • Formatting a date / time axis with specified values
    • Adding Axis Labels
    • The x axis label
    • The y axis label
    • How to add a title to your graph
    • Change a line chart into a scatter plot
    • Smoothing out graph lines
    • Make a dashed line
    • Filling an area under the graph
    • CSS for an area fill
    • Define the area function
    • Draw the area
    • Filling an area above the line
    • Adding a drop shadow to allow text to stand out on graphics.
    • CSS for white shadowy background
    • Drawing the white shadowy background.
    • Adding grid lines to a graph
    • The grid line CSS
    • Define the grid line functions
    • Draw the lines
    • Adding more than one line to a graph
    • Labelling multiple lines on a graph
    • Multiple axes for a graph
  • Elements, Attributes and Styles
    • The Framework
    • Elements
    • Circle
    • Ellipse
    • Rectangle
    • Line
    • Polyline
    • Polygon
    • Path
    • Clipped Path (AKA clipPath)
    • Text
    • Anchor at the bottom, middle of the text:
    • Anchor at the bottom, right of the text:
    • Anchor at the middle, left of the text:
    • Anchor in the middle, centre of the text:
    • Anchor in the middle, right of the text:
    • Anchor at the top, left of the text:
    • Anchor at the top, middle of the text:
    • Anchor at the top, right of the text:
    • Attributes
    • x, y
    • x1, x2, y1, y2
    • points
    • cx, cy
    • r
    • rx, ry
    • transform (translate(x,y), scale(k), rotate(a))
    • transform (translate(x,y))
    • transform (scale(k))
    • transform (rotate(a))
    • width, height
    • text-anchor
    • dx, dy
    • textLength
    • lengthAdjust
    • Styles
    • fill
    • stroke
    • opacity
    • fill-opacity
    • stroke-opacity
    • stroke-width
    • stroke-dasharray
    • stroke-linecap
    • stroke-linejoin
    • writing-mode
    • glyph-orientation-vertical
    • Using styles in Cascading Style Sheets
  • Manipulating data
    • How to use data imported from a csv file with spaces in the header.
    • Extracting data from a portion of a string.
    • Grouping and summing data (d3.nest)
    • Selecting a random string from an array.
  • Bar Charts and Histograms
    • Bar Chart
    • Histogram
    • Bar Charts
    • The data
    • The code
    • The bar chart explained
    • Histograms
    • The data
    • The code
    • The histogram explained
  • Tree Diagrams
    • What is a Tree Diagram?
    • A simple Tree Diagram explained
    • A horizontal tree diagram explained
    • Styling nodes in a tree diagram
    • Changing node and link colours
    • Changing the nodes to different shapes
    • Using images as nodes
    • Generating a tree diagram from external data
    • Generating a tree diagram from ‘flat’ data
    • Generating a tree diagram from a CSV file.
    • An interactive tree diagram
  • Sankey Diagrams
    • What is a Sankey Diagram?
    • Which Sankey plugin should we use?
    • How d3.js Sankey Diagrams want their data formatted
    • Description of the code
    • Formatting data for Sankey diagrams
    • From a JSON file with numeric link values
    • From a JSON file with links as names
    • From a CSV with ‘source’, ‘target’ and ‘value’ info only.
  • Assorted Tips and Tricks
    • Change a line chart into a scatter plot
    • Adding tooltips.
    • Transitions
    • Events
    • Get tipping
    • on.mouseover
    • on.mouseout
    • Including an HTML link in a tool tip
    • Moar Links!
    • What are the predefined, named colours?
    • Selecting / filtering a subset of objects
    • Select items with an IF statement.
    • Applying a colour gradient to a line based on value.
    • Applying a colour gradient to an area fill.
    • Transitions
    • Transitioning Chaining
    • Transition Easing
    • Show / hide an element by clicking on another element
    • Using HTML inputs with d3.js
    • What is an HTML input?
    • Using a range input with d3.js
    • The code
    • The explanation
    • Using more than one input
    • The code
    • The explanation
    • Rotate text with an input
    • The explanation
    • Use a number input with d3.js
    • Change more than one element with an input
    • The code
    • The explanation
    • Add an HTML table to your graph
    • HTML Tables
    • First the CSS
    • Now the d3.js code
    • A small but cunning change…
    • Explaining the d3.js code (reloaded).
    • Wrap up
    • More table madness: sorting, prettifying and adding columns
    • Add another column of information:
    • Sorting on a column
    • Prettifying (actually just capitalising the header for each column)
    • Add borders
    • Adding web links to d3.js objects
    • It’s all about the ‘a’ and the ‘xlink’
    • Adding in the links
    • Making the mouse pointer ignore an object
    • Using the Yahoo Query Language (YQL) to get data.
    • YQL by example
    • Export an image from a d3.js page as a SVG or bitmap
    • Bitmaps
    • Vector Graphics (Specifically SVG)
    • Let’s get exporting!
    • Copying the image off the web page
    • Open the SVG Image and Edit
    • Saving as a bitmap
    • Understanding JavaScript Object Notation (JSON)
  • D3.js Examples Explained
    • Multi-line graph with automatic legend and toggling show / hide lines.
    • Purpose
    • The Code
    • Description
    • Nesting the data
    • Applying the colours
    • Adding the legend
    • Making it interactive
D3 Tips and Tricks v4.x/overview

D3 Tips and Tricks v4.x

course_overview

D3 Tips and Tricks version 4. Interactive graphics in a web page using d3.js

count_chapters
begin_reading
download
p_implied_book_part_name

D3 Tips and Tricks v4.x13 chapters

Begin ›
  1. Acknowledgements

  2. What is d3.js?

  3. Introduction

  4. What do we need to get started?

  5. Starting with a simple graph

  6. Things we can do with the simple graph

  7. Elements, Attributes and Styles

  8. Manipulating data

  9. Bar Charts and Histograms

  10. Tree Diagrams

  11. Sankey Diagrams

  12. Assorted Tips and Tricks

  13. D3.js Examples Explained