D3 Tips and Tricks v3.x

D3 Tips and Tricks v3.x

Malcolm Maclean
Buy on Leanpub

Table of Contents

D3 Tips and Tricks v3.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 you need to get started?
    • HTML
    • JavaScript
    • Cascading Style Sheets (CSS)
    • Web Servers
    • PHP
    • Other Useful Stuff
    • Text Editor
    • Getting D3
    • Where to get information on d3.js
    • d3js.org
    • Google Groups
    • Stack Overflow
    • Github
    • bl.ocks.org
    • Twitter
    • Books
  • Starting with a basic graph
    • HTML
    • CSS
    • D3 JavaScript
    • Setting up the margins and the graph area.
    • Getting the Data
    • Formatting the Date / Time.
    • Setting Scales Domains and Ranges
    • Setting up the Axes
    • Adding data to the line function
    • Adding the SVG Canvas.
    • Actually Drawing Something!
    • Wrap Up
  • Things you can do with the basic graph
    • Adding Axis Labels
    • How to add a title to your graph
    • Smoothing out graph lines
    • Adding grid lines to a graph
    • The grid line CSS
    • Define the grid line functions
    • Draw the 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 more than one line to a graph
    • Labelling multiple lines on a graph
    • Multiple axes for a graph
    • How to rotate the text labels for the x Axis.
    • Format a date / time axis with specified values
    • Update data dynamically - On Click
    • Adding a Button
    • Updating the data
    • Changes to the d3.js code layout
    • What’s happening in the code?
    • Update data dynamically – Automatically
  • 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
  • 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.
    • Show / hide an element by clicking on another element
    • 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
    • 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
    • Understanding JavaScript Object Notation (JSON)
    • Using the Yahoo Query Language (YQL) to get data.
    • YQL by example
    • Using Plunker for development and hosting your D3 creations.
  • 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).
    • Padding for zero values
    • Lo-Dash
    • _.find
    • The explunit method
    • Build the array
    • scale.ticks([count])
    • Populate the array
    • x.ticks()
    • .map([object])
  • Bar Charts
    • The data
    • The code
    • The bar chart explained
  • Sankey Diagrams
    • What is a Sankey Diagram?
    • 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.
    • From MySQL as link information (only automatically).
    • Sankey diagram case study
  • Tree Diagrams
    • What is a Tree Diagram?
    • A simple Tree Diagram explained
    • Styling nodes in a tree diagram
    • Changing the nodes to different shapes
    • Using images as nodes
    • Making a vertical tree diagram
    • Generating a tree diagram from ‘flat’ data
    • Generating a tree diagram from external data
    • Generating a tree diagram from a CSV file.
    • An interactive tree diagram
  • Force Layout Diagrams
    • What is a Force Layout Diagram?
    • Force directed graph examples.
    • Basic force directed graph showing directionality
    • Directional Force Layout Diagram (Node Highlighting)
    • Directional Force Layout Diagram (varying link opacity)
    • Directional Force Layout Diagram (Unique Node Colour)
  • Bullet Charts
    • Introduction to bullet chart structure
    • D3.js code for bullet charts
    • Adapting and changing bullet chart components
    • Understand your data
    • Add as many individual charts as you want.
    • Add more ranges and measures
    • Updating a bullet chart automatically
  • Mapping with d3.js
    • Examples
    • GeoJSON and TopoJSON
    • Starting with a simple map
    • center
    • scale
    • rotate
    • Zooming and panning a map
    • Displaying points on a map
    • Making maps with d3.js and leaflet.js combined
    • leaflet.js Overview
    • Leaflet map with d3.js objects that scale with the map
    • Leaflet map with d3.js elements that are overlaid on a map
  • D3.js Examples Explained
    • Dynamically retrieve historical stock records via YQL
    • Purpose
    • The code
    • The description
    • Linux Processes via Interactive Tree diagram
    • Purpose
    • The Code
    • Description
    • 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
    • My Favourite tooltip method for a line graph.
    • Purpose
    • The Code
    • Description
    • Adding the circle to the graph
    • Set the area to capture the mouse movements
    • Determining which date will be highlighted
    • Move the circle to the appropriate position
    • Complex version
    • Code / Explanation
    • Exploring Event Data by Combination Scatter Plot and Interactive Line Graphs
    • Purpose
    • The Code
    • Wrangling the data
    • Sizing Everything Up
    • The Scatter Plot
    • Date and Time Graphs
    • Mouse Movement Information Display
    • Labelling
    • Difference Chart: Science vs Style.
    • Purpose
    • The Code
    • Description
    • Nesting the data
    • Wrangle the data
    • Cheating with the domain
    • data vs datum
    • Setting up the clipPaths
    • Clipping and adding the areas
    • Draw the lines and the axes
    • Adding a bit more to our difference chart.
    • Add a Y axis label
    • Add a title
    • Adding the legend
    • Link the areas
    • The final result
  • Crossfilter, dc.js and d3.js for Data Discovery
    • Introduction to Crossfilter
    • Map-reduce
    • What can crossfilter do?
    • Introduction to dc.js
    • Bar Chart
    • Pie Chart
    • Row Chart
    • Line Chart
    • Bubble Chart
    • Geo Choropleth Chart
    • Data Table
    • Bare bones structure for dc.js and crossfilter page
    • Add a Bar Chart.
    • Position the bar chart
    • Assign the bar chart type
    • Dimension and group the bar chart data
    • Configure the bar chart parameters
    • Just one more thing…
    • Just yet another thing…
    • Position the chart
    • Assign type
    • Dimension and Group
    • Configure chart parameters
    • Add a Line Chart.
    • Position the line chart
    • Assign the line chart type
    • Dimension and group the line chart data
    • Configure the line chart parameters
    • Adding tooltips to a line chart
    • Add a Row Chart.
    • Position the row chart
    • Assign the row chart type
    • Dimension and group the row chart data
    • Configure the row chart parameters
    • Add a Pie Chart.
    • Position the pie chart
    • Assign the pie chart type
    • Dimension and group the pie chart data
    • Configure the pie chart parameters
    • Resetting filters
    • Making the reset label a little bit better behaved.
    • Reset all the charts
  • Using Bootstrap with d3.js
    • What is Bootstrap?
    • Layout grid
    • Interface components
    • Incorporating Bootstrap into your html code.
    • Arranging more than one graph on a web page.
    • First make a page with two graphs
    • Arrange the graphs with the same anchor
    • Arrange the graphs with separate anchors
    • How does Bootstrap’s grid layout work
    • Arrange more than one d3.js graph with Bootstrap
    • A more complicated Bootstrap layout example
  • MySQL Tips and Tricks for d3.js
    • Using a MySQL database as a source of data.
    • PHP is our friend
    • phpMyAdmin
    • Create your database
    • Importing your data into MySQL
    • Querying the Database
    • Using php to extract json from MySQL
    • Getting the data into d3.js
    • Manipulating Date / Time Ranges
    • What’s a standard format for a Date / Time value
    • Creating a standard Date / Time from separate columns
    • General MySQL titbits
    • Group parts of queries (and text) together with CONCAT
    • Working round reserved words in queries
    • Rounding numbers
  • Working with GitHub, Gist and bl.ocks.org
    • General stuff about bl.ocks.org
    • Installing the plug-in for bl.ocks.org for easy block viewing
    • Loading a thumbnail into Gist for bl.ocks.org d3 graphs
    • Setting the scene:
    • Enough of the scene setting. Let’s git going :-).
    • Wrap up.
  • Appendices
    • Simple Line Graph
    • Graph with Many Features
    • Graph with Area Gradient
    • Bar Chart
    • Linking Objects
    • PHP with MySQL Access
    • Simple Sankey Graph
    • Simple Tree Diagram
    • Interactive Tree Diagram
    • Force Layout Diagram
    • Bullet Chart
    • Map with zoom / pan and cities
D3 Tips and Tricks v3.x/overview

D3 Tips and Tricks v3.x

course_overview

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

count_chapters
begin_reading
download
p_implied_book_part_name

D3 Tips and Tricks v3.x21 chapters

Begin ›
  1. Acknowledgements

  2. What is d3.js?

  3. Introduction

  4. What do you need to get started?

  5. Starting with a basic graph

  6. Things you can do with the basic graph

  7. Elements, Attributes and Styles

  8. Assorted Tips and Tricks

  9. Manipulating data

  10. Bar Charts

  11. Sankey Diagrams

  12. Tree Diagrams

  13. Force Layout Diagrams

  14. Bullet Charts

  15. Mapping with d3.js

  16. D3.js Examples Explained

  17. Crossfilter, dc.js and d3.js for Data Discovery

  18. Using Bootstrap with d3.js

  19. MySQL Tips and Tricks for d3.js

  20. Working with GitHub, Gist and bl.ocks.org

  21. Appendices