This scatterplot is constructed from a TSV file storing the dimensions of sepals and petals of various iris flowers. The chart employs conventional margins and a number of D3 features:
Created by Christopher Manning
Line simplification of the CTA train routes. Different line interpolations and simplification levels create interesting designs.
I created this because I like line simplification, d3.js, the CTA train map, and abstract geometric shapes.
| // FROM http://stackoverflow.com/questions/728360/most-elegant-way-to-clone-a-javascript-object | |
| // When I had to implement general deep copying I ended up compromising by | |
| // assuming that I would only need to copy a plain Object, Array, Date, String, | |
| // Number, or Boolean. The last 3 types are immutable, so I could perform a | |
| // shallow copy and not worry about it changing. I further assumed that any | |
| // elements contained in Object or Array would also be one of the 6 simple | |
| // types in that list. This can be accomplished with code like the following: | |
| function clone(obj) { |
| // vanilla JS window width and height | |
| var w=window, | |
| d=document, | |
| e=d.documentElement, | |
| g=d.getElementsByTagName('body')[0], | |
| x=w.innerWidth||e.clientWidth||g.clientWidth, | |
| y=w.innerHeight||e.clientHeight||g.clientHeight; |
| <html> | |
| <head> | |
| <title>CS 4460 homework 5</title> | |
| <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| width: 800px; | |
| margin: 0 auto; | |
| } |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <style> | |
| svg { | |
| font: 10px sans-serif; | |
| } |
| function groupBy( array , f ) { | |
| var groups = {}; | |
| array.forEach( function( o ) | |
| { | |
| var group = JSON.stringify( f(o) ); | |
| groups[group] = groups[group] || []; | |
| groups[group].push( o ); | |
| }); | |
| return Object.keys(groups).map( function( group ) | |
| { |
10K points in an interactive line chart using the excellent Kay Chang's (AKA Syntagmatic) progressive rendering.
It also uses some nice tricks like throttling the brush move (from underscore) and bisecting the data points to find the hovered dots. The reactive hover and tooltip clearly shows that the UI is not blocked by the rendering. You can even hover the points before they are rendered!
| <!DOCTYPE html> | |
| <title>Render Queue</title> | |
| <style type="text/css"> | |
| html, body { background: #f7f7f7; height: 100%; margin: 0; padding: 0; color: #b6b6b6; font-family: Ubuntu, Helvetica, sans-serif; font-size: 15px; line-height: 1.35em;} | |
| a { color: #6be; text-decoration: none; } | |
| #canvas { position: fixed; } | |
| #center { position: absolute; top: 0; left: 0; margin: 40px; width: 520px; padding: 20px; background: #444; background: rgba(0,0,0,0.9); border-radius: 8px;} | |
| h1 { margin-top:0; padding: 3px 0; font-size: 1.4em; } | |
| h1, h3 { color: #f9f9f9; border-bottom: 1px solid #333; } | |
| h3 { font-size: 1em; } |
