| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Random radius</title> | |
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.js"></script> | |
| </head> | |
| <body> | |
| <script> |
Pull in external data, using d3 to load and parse
It pulls in some data formatted in tsv (pinched from Mike's Scatterplot) and loads the data via d3. In this example listing the 'petalLength' column in a 'ul'.
This was a test after watching dashing D3 tutorial Loading TSV Data From Server
Exploring SVG paths—loads random 108 points. Based on Dashing D3.js screencast
Pull in dynamic data into a d3 visualisation via input box
Adapted from d3.js with Dynamic Data tutorial
Pulling in data in a simple list and svg shapes.
Data is of varying planetary years in earth days.
The planets revolve around the sun in different amounts of time, so a "year" on each planet is a different amount of time. The farther a planet is from the sun, the longer its year. source
Pulling in data to display svg shapes with labels
Data is of varying planetary years in earth days.
The planets revolve around the sun in different amounts of time, so a "year" on each planet is a different amount of time. The farther a planet is from the sun, the longer its year. source
Use input box to change visualisation
Adapted from d3.js with Dynamic Data II
Create and populate a html table form an array within an array (matrix)
Based on Nested Selections
Manipulating a single SVG shape triggered via user input.
Also a good way to illustrate how SVG coordinate space works. Note you need to put the radius in to view the circle (otherwise it's at 0).
The cx and cy attributes define the x and y coordinates of the center of the circle.
If cx and cy are omitted, the circle's center is set to (0,0)