Skip to content

Instantly share code, notes, and snippets.

@alanmclean
alanmclean / index.html
Last active September 25, 2022 07:45
arc tween example
<html>
<body>
<head>
<style type="text/css">
.bg-circle{
fill: #ddd;
stroke: none;
}
.progress-bar{
fill: #000;

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.

@alanmclean
alanmclean / README.md
Last active December 28, 2015 08:58 — forked from mbostock/.block

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.

@alanmclean
alanmclean / gist:7273415
Created November 1, 2013 23:11
aspect ratio banking progress
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;
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" }},
@alanmclean
alanmclean / index.html
Last active December 26, 2015 23:09
bookmarklet for enabling the color picker
<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>
@alanmclean
alanmclean / down1.png
Last active December 23, 2015 09:09
Prototype
down1.png

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.

@alanmclean
alanmclean / index.html
Last active December 21, 2015 13:09 — forked from mbostock/.block
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
margin: 0;
}
path.line {
@alanmclean
alanmclean / index.html
Created June 24, 2013 19:10
run pace viz experiment #10
<html>
<body>
<link rel="stylesheet" type="text/css" href="normalize.css">
<style type="text/css">
.avgPaceLabel,
.avgPaceLabel2,
.runTimeLabel,
.runTimeLabel2{
font-family:arial,sans-serif;