Flavio Espinoza flavioespinoza

## `Basic Usage.markdown

      
              6 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                flavioespinoza
                / `Basic Usage.markdown
            
            
              Created
              August 13, 2015 23:07
            
              
                `Basic Usage
              
          
    `Basic Usage

A Pen by Flavio Espinoza on CodePen.
License.

  
## index.html
<html>
	<head>
		<title>Interactive Line Graph</title>
		<script src="http://d3js.org/d3.v2.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>

## app.coffee
# Example Backbone.js app in CoffeeScript
# compile on each file save using the coffee bin
# coffee -b -c -w app.coffee


# BACKBONE.JS MODEL
class Blog extends Backbone.Model
  sync: -> "noop"
  url: ->

## README.md

      
              3 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                flavioespinoza
                / README.md
            
            
              Created
              November 9, 2012 05:39
                — forked from mbostock/.block
            
              
                Line Transition
              
          
    D3’s default path interpolation is the same as its string interpolation: it finds numbers embedded in strings, and interpolates those numbers. So, the default behavior when interpolating two paths is like this:
M x0, y0 L x1, y1 L x2, y2 L x3, y3 
   ↓   ↓    ↓   ↓    ↓   ↓    ↓   ↓
M x0, y1 L x1, y2 L x2, y3 L x3, y4 

For example, the first point ⟨x0,y0⟩ is interpolated to ⟨x0,y1⟩. Since x0 is the same, all you see are the y-values changing (see example)—you don't see the path slide to the left as intended.
What you want to happen here is something like this:

  
## d3.v2.patched.js
// patched version of d3.v2.js
// bug report that this patches is at https://github.com/mbostock/d3/issues/655

(function(){if (!Date.now) Date.now = function() {
  return +new Date;
};
try {
  document.createElement("div").style.setProperty("opacity", 0, "");
} catch (error) {
  var d3_style_prototype = CSSStyleDeclaration.prototype,

## .gitignore
# Editor backup files
*.bak
*~

## README.md

      
              4 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                flavioespinoza
                / README.md
            
            
              Created
              November 29, 2012 17:51
                — forked from mbostock/.block
            
              
                UT1 - UTC
              
          
    A recreation of Nelson Minar’s graph, experimenting with some subtle mousemove features to allow closer inspection. Also duplicates the x axis labels to improve readability via white stroke.

  
## app.js
/*jshint globalstrict:true */
/*global angular:true */
'use strict';

angular.module('demo', [
    'demo.controllers',
    'demo.directives',
    'elasticjs.service'
]);

## PascalsTriangles.js
var numTiers = 100,
    triangle,
    start,
    stop;

/**
*
* First version uses recursion
*
*/

## bitgo-node-server.js
const express = require('express')
const app = express()
const port = process.env.PORT || 9001
const http = require('http')
const index = require('./routes/index')
const server = http.createServer(app)
const socketIo = require('socket.io')
const io = socketIo(server)
const BitGoJS = require('bitgo')
const log = require('ololog').configure({locate: false})
	<html>
	<head>
	<title>Interactive Line Graph</title>
	<script src="http://d3js.org/d3.v2.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>
	# Example Backbone.js app in CoffeeScript
	# compile on each file save using the coffee bin
	# coffee -b -c -w app.coffee



	# BACKBONE.JS MODEL
	class Blog extends Backbone.Model
	sync: -> "noop"
	url: ->
	// patched version of d3.v2.js
	// bug report that this patches is at https://github.com/mbostock/d3/issues/655

	(function(){if (!Date.now) Date.now = function() {
	return +new Date;
	};
	try {
	document.createElement("div").style.setProperty("opacity", 0, "");
	} catch (error) {
	var d3_style_prototype = CSSStyleDeclaration.prototype,
	/jshint globalstrict:true /
	/global angular:true /
	'use strict';

	angular.module('demo', [
	'demo.controllers',
	'demo.directives',
	'elasticjs.service'
	]);
	var numTiers = 100,
	triangle,
	start,
	stop;

	/**
	*
	* First version uses recursion
	*
	*/
	const express = require('express')
	const app = express()
	const port = process.env.PORT \|\| 9001
	const http = require('http')
	const index = require('./routes/index')
	const server = http.createServer(app)
	const socketIo = require('socket.io')
	const io = socketIo(server)
	const BitGoJS = require('bitgo')
	const log = require('ololog').configure({locate: false})