Skip to content

Instantly share code, notes, and snippets.

View timelyportfolio's full-sized avatar

timelyportfolio timelyportfolio

View GitHub Profile
@timelyportfolio
timelyportfolio / index.html
Last active December 14, 2015 21:38 — forked from benjchristensen/index.html
Fork of Ben Christensen multiline with zoomooz
<!--fork of Ben Christensen gist https://gist.github.com/benjchristensen/2657838*/!-->
<html>
<head>
<title>Interactive Line Graph</title>
<script src="http://d3js.org/d3.v3.js"></script>
<!--
using JQuery for element dimensions
This is a small aspect of this example so it can be removed fairly easily if needed.
-->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
group date value
1 2008-01 10
1 2008-04 8
1 2008-07 14
1 2008-10 9
1 2009-01 10
1 2009-04 8
1 2009-07 14
1 2009-10 9
2 2008-01 3
@timelyportfolio
timelyportfolio / index.html
Last active December 15, 2015 04:19 — forked from benjchristensen/index.html
fork of https://gist.github.com/benjchristensen/2657838 with zoomooz.js and intro.js functionality
<html>
<head>
<title>Interactive Line Graph</title>
<script src="http://d3js.org/d3.v3.js"></script>
<!--
using JQuery for element dimensions
This is a small aspect of this example so it can be removed fairly easily if needed.
-->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="sample_data.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>One Graph</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
<script type="text/javascript" src="simple-graph.js"></script>
<style type="text/css">
body { font: 13px sans-serif; }
rect { fill: #fff; }

d3js Multiline chart with brushing and mouseover

This is a Binned Line Chart version of Mike Bostock's zoomable area chart. You can find his source here. The graph shows number of flights per day in the United States.

  • Use the mouse-wheel to zoom in and out, and drag the slider to adjust the size of the bins.
  • View with the step-after interpolation method to see the discrete bins.

A detailed publication as part of Matt Woelk's Masters Thesis will be available in Fall, 2013.

@timelyportfolio
timelyportfolio / index.html
Last active December 16, 2015 04:59 — forked from mbostock/.block
forked from Mike Bostock to begin d3 replacement for PerformanceSummary
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path {
display: none;
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.6"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.csv.js?1.29.6"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js?1.29.6"></script>
<style type="text/css">
body {
font: 10px sans-serif;
/********************
* TOOLTIP CSS
*/
.nvtooltip {
position: absolute;
background-color: rgba(255,255,255,1);
padding: 10px;
border: 1px solid #ddd;