Skip to content

Instantly share code, notes, and snippets.

View jalapic's full-sized avatar

James Curley jalapic

299 followers · 3 following
View GitHub Profile
@jalapic
jalapic / README.md
Last active September 20, 2015 23:25
bars: groups, events

Bars: groups, tooltips, events

Adapted from Scott Murray's examples. Used for my own learning:

  • use div for tooltip styling

  • use css class for event styling

  • mouseover / mouseout

@jalapic
jalapic / README.md
Created September 20, 2015 19:25
bar chart transitions

Bar Chart Transitions

Based on examples made by Scott Murray - alignedleft

  • css fill transition
  • assigning transitions by class of elements
  • filtering data by assigning classes using .classed
  • using .each with .select(this) to dynamically assign classes
@jalapic
jalapic / README.md
Last active September 20, 2015 16:12
Simple scatter transition

Simple Scatter Transition

This is tweaked code building upon the examples given by Scott Murray @alignedleft

@jalapic
jalapic / index.html
Created September 20, 2015 03:04
Scatterplot, transition + diagonal line
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<title>scatterplot|transition</title>
<style type="text/css">
@jalapic
jalapic / index.html
Last active September 20, 2015 01:12
Horizontal Bar with scale and axes
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<title>horizontal bar</title>
<style type="text/css">
@jalapic
jalapic / README.md
Last active September 9, 2015 02:16
Soccer shotplot

Soccer shotplots with d3.js

Contact me at twitter @jalapic

@jalapic
jalapic / index.html
Last active September 3, 2015 03:55
Stop and Frisk NYC 2014
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Adding Tooltips</title>
<h1>Stop and Frisk Totals by Race for NYC in 2014 </h1>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
@jalapic
jalapic / heatmap.min.js
Created August 31, 2015 20:56
example 1
/*
* heatmap.js v2.0.0 | JavaScript Heatmap Library
*
* Copyright 2008-2014 Patrick Wied <heatmapjs@patrick-wied.at> - All rights reserved.
* Dual licensed under MIT and Beerware license
*
* :: 2014-08-05 01:42
*/
(function(a){var b={defaultRadius:40,defaultRenderer:"canvas2d",defaultGradient:{.25:"rgb(0,0,255)",.55:"rgb(0,255,0)",.85:"yellow",1:"rgb(255,0,0)"},defaultMaxOpacity:1,defaultMinOpacity:0,defaultBlur:.85,defaultXField:"x",defaultYField:"y",defaultValueField:"value",plugins:{}};var c=function i(){var a=function d(a){this._coordinator={};this._data=[];this._radi=[];this._min=0;this._max=1;this._xField=a["xField"]||a.defaultXField;this._yField=a["yField"]||a.defaultYField;this._valueField=a["valueField"]||a.defaultValueField;if(a["radius"]){this._cfgRadius=a["radius"]}};var c=b.defaultRadius;a.prototype={_organiseData:function(a,b){var d=a[this._xField];var e=a[this._yField];var f=this._radi;var g=this._data;var h=this._max;var i=this._min;var j=a[this._valueField]||1;var k=a.radius||this._cf
@jalapic
jalapic / index.html
Created August 30, 2015 18:01
Arrows pt III ?
<!DOCTYPE html>
<html>
<head>
<title>Arrows</title>
<meta charset="utf-8" />
<script src="http://d3js.org/d3.v3.js"></script>
<style>
@jalapic
jalapic / index.html
Created August 30, 2015 02:37
Arrows cont. ?
<!DOCTYPE html>
<html>
<head>
<title>Arrows</title>
<meta charset="utf-8" />
<script src="http://d3js.org/d3.v3.js"></script>
</head>