Reusable slopegraph inspired/adapted from Ben Van Dyke's example into a reusable chart.
This slopegraph example shows the number of personal computers installed in a country per household. This includes desktop PCs and laptops, but excludes smartphones and terminals connected to mainframe computers. All figures are calculated using total number of Personal Computers and the Total Number of Households.
| var elements = [ | |
| 'Hydrogen', | |
| 'Helium', | |
| 'Lithium', | |
| 'Beryllium', | |
| 'Boron', | |
| 'Carbon', | |
| 'Nitrogen', | |
| 'Oxygen', | |
| 'Fluorine', |
| module.exports = function template(tmpl, data){ | |
| return tmpl.replace(/\{(\w*)\}/g,function(m,key){return data.hasOwnProperty(key)?data[key]:"";}); | |
| }; |
I can recommend some general d3 resources I've found helpful (some of which you've probably already found, if you've been looking).
For a real step-by-step, the series of tutorials by Scott Murray look quite good, though I've not done them myself. I have done a MOOC with Scott as an instructor and I can vouch for his teaching skills. I think they'd be very useful for someone very new to HTML/CSS/JS (I'm not sure if that describes you) who also wants to start with d3 at the same time.
If you want to dive right in, I'd start on Thinking with Joins and How Selections Work, and for a practical example of those concepts, check out the General Update Pattern examples (one, [two](https://www
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>D3 with HTML Elements</title> | |
| <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
| </head> | |
| <body> | |
| <h1>Exercises for Module 2</h1> |
| function qualifyURL(url) { | |
| var a = document.createElement('a'); | |
| a.href = url; | |
| return a.href; | |
| } |
| function formatTime(date) { | |
| var hrs = date.getHours(); | |
| return ((hrs + 11) % 12) + 1 + ':' + ("0"+date.getMinutes()).substr(-2,2) + ((hrs > 11) ? 'pm' : 'am'); | |
| } |
| unixtime,track name,artist name | |
| 1141622472,Star Dusting,The Mountain Goats | |
| 1141622648,Corpus Christi Carol,Jeff Buckley | |
| 1141622841,Best Imitation Of Myself (Nyc 6/13/02 Roseland Ballroom),Ben Folds | |
| 1141623006,Wicked Annabella,The Kinks | |
| 1141623305,Father Lucifer,Tori Amos | |
| 1141623991,Go Ahead,Rilo Kiley | |
| 1141624400,Unison,Björk | |
| 1141624714,Hyperspeed (G-Force Part 2),The Prodigy | |
| 1141624974,It's Summertime,The Flaming Lips |
| time | name | |
|---|---|---|
| 10 | Simon | |
| #!/bin/bash | |
| while [ 1=1 ]; do | |
| wget seattletimes.com -O st.html | |
| git commit -a -m "Registered update" | |
| sleep 600 | |
| done |