Herminio Vazquez canimus

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:

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/raphael.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/g.raphael-min.js" type="text/javascript" charset="utf-8"></script>
	<title>Test: SVG</title>
	<style type="text/css" media="screen">
	div,h5,h6,h1,h2,h3,h4 {

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>D3 Examples</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<script type="text/javascript" src="js/d3.js"></script>
	<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
	<script>
	var blow_counter=1;

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>D3 SLA Graph</title>
	<style type="text/css">
	body {
	font: 10px 'Menlo';
	margin-left: 0;
	}

	upstream unicorn {
	server unix:/tmp/unicorn.portal.sock fail_timeout=0;
	}

	server {
	listen 80 default deferred;
	server_name secure.example.com;
	root /home/user/www/secure.example.com/current/public;

	location ^~ /assets/ {

	location xxxx {
	proxy_pass http://localhost:9000;
	proxy_buffering off;
	proxy_cache off;
	proxy_redirect off;
	proxy_set_header Connection '';
	proxy_http_version 1.1;
	chunked_transfer_encoding off;
	proxy_set_header Host $host;
	proxy_set_header X-Real-IP $remote_addr;

	<!DOCTYPE html>
	<html>
	<head>
	<title>Arc Test</title>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,800' rel='stylesheet' type='text/css'>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style>
	h1 {
	font-family: 'Open Sans';
	font-weight: 600;

	window.onload = ->
	# Development
	window.PAYMILL_PUBLIC_KEY = 'PUBLIC_TEST_KEY'
	# Production


	PaymillErrorHandler = (error_message) ->
	# Add elements to container if don't exist
	s = $('.container').children('#notification').size()

	<section>
	<h1>Subscription <span class="explain-head">Orchestor</span></h1>
	<div class="clearfix">


	<div class="half">
	<img src="/png/glyphicons_267_credit_card.png" style="padding-top: 5px; display: inline-block; opacity: .5; vertical-align: baseline; margin-right: 10px"/>
	<h2 style="top: -4px">Payment</h2>
	<p style="margin-left: 40px;">
	With your subscription you are entitled to a bigger repository for your tests

	module Paymillable

	def subscribe paymillToken
	client = Paymill::Client.create email: self.identity.email, description: self.name
	payment = Paymill::Payment.create token: paymillToken, client: client.id
	subs = Paymill::Subscription.create offer: PricePlan.last.paymill_id, client: client.id, payment: payment.id
	self.upgrade(PricePlan.last)
	self.update(paymill_id:client.id)
	end # subscribe