This parallel coordinates visualization of cars from the ‘70s and ‘80s demonstrates one of D3 2.5.0’s new interactive features: the brush component. By clicking and dragging along any axis, you can specify a filter for that dimension. The brush component is also used in the updated scatterplot matrix example.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<body> | |
<head> | |
<style type="text/css"> | |
.bg-circle{ | |
fill: #ddd; | |
stroke: none; | |
} | |
.progress-bar{ | |
fill: #000; |
The fill transition does not work in Chrome when the target of the transition is within an <a>
tag with the xlink:href attribute set.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var AspectRatioBanker = function(data, xScale, yScale, options){ | |
// data field to bank | |
this._z = null; | |
this.maxWidth = 500; | |
this.maxHeight = 500; | |
this.bankYAxis = true; | |
this.banker = this.averageAbsoluteAngle; | |
this.xScale = xScale; | |
this.yScale = yScale; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
context '#get_weeks' do | |
context 'months in 2013' do | |
let(:months){ | |
{ :year => 2013, :month => 10, :month_interval => "2013y10m", :intervals => ["2013y41w","2013y42w","2013y43w","2013y44w"] } | |
} | |
let(:weeks){ helper.get_weeks(months) } | |
it 'should return assoc array of weeks intervals to month, year data' do | |
weeks.should == [ | |
{ "2013y41w" => { :year => 2013, :month => 10, :month_interval => "2013y10m" }}, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h3>Strava Color Picker</h3> | |
<p>This bookmarklet can help you change the color of data points on the page. Currently it is only configured for use on the Run training page.</p> | |
<p>To use, just draw this link to your bookmarks bar and click on it once you're in the training log.</p> | |
<p></p><a href="javascript:{colorPicker.show()};void(0);">Strava ColorPicker</a></p> | |
<p>It's fairly easy to add to other pages. If you have other places you would like to use this, let Alan know: alan@strava.com</p> |
This example demonstrates the use of post-selection to customize an axis, even across transitions. After the axis is rendered, its elements (such as text labels, here) are reselected and modified to produce the desired appearance. When transitioning the axis, the post-selection modifies entering, updating and exiting elements. Passing null values to transition.tween cancels default tweens scheduled by the axis in favor of the customized styles.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font: 10px sans-serif; | |
margin: 0; | |
} | |
path.line { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<body> | |
<link rel="stylesheet" type="text/css" href="normalize.css"> | |
<style type="text/css"> | |
.avgPaceLabel, | |
.avgPaceLabel2, | |
.runTimeLabel, | |
.runTimeLabel2{ | |
font-family:arial,sans-serif; |
NewerOlder