Chris Viau biovisualize

## index.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                biovisualize
                / index.md
            
            
              Created
              July 14, 2015 03:00
            
              
                Old reusable chart pattern specs from mbostock
              
          
    Recommendations for reusable chart templates for D3. There is an implementation in progress here.
Recommendations


Use D3's zero- or single-argument getter/setter methods. For example, parent(selector) sets the chart's parent element, and parent() returns the chart's parent element. If the parent is specified as a selector string, it is implicitly converted to an element by selecting from the document at the time the parent is set.


Getter/setter methods should be bound to the chart instance and use private (local) variables to hide internal state, rather than assigning to the prototype. This is consistent with the rest of D3, affords more flexibility in implementation, and the performance impact is negligible.


The parent can be specified either as a selector string or as a raw element. (However, it should not be specified as a selection.)


## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://d3js.org/d3.v3.js"></script>
    <style>
        .line {
            fill: none;
            stroke: #000;
            stroke-width: 1.5px;

## line-variable.js
d3.svg.line.variable = function() {
    return d3_svg_lineVariable();
}

function d3_svg_lineVariable() {
    var x = function(d) { return d[0]; },
        y = function(d) { return d[1]; },
        w = 5,
        intpol = "linear",
        t = .7;

## line-variable.js
d3.svg.line.variable = function() {
    return d3_svg_lineVariable();
}

function d3_svg_lineVariable() {
    var x = function(d) { return d[0]; },
        y = function(d) { return d[1]; },
        w = 5,
        intpol = "linear",
        t = .7;

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
        <script type="text/javascript" src="https://rawgit.com/biovisualize/b9a321c5038d24206356/raw/d6c542f19772b28d19c5be056f6f084ed6d71974/line-variable.js"></script>
    </head>

    <body>
        <div id="linevar"></div>

## index.html
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
    <div class="viz"></div>
    <script type="text/javascript">

    var sampleSVG = d3.select(".viz")

## index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<title>Drag And Drop</title>
</head>
<body>

<div id="viz"></div>

## index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<title>Drag And Drop</title>
</head>
<body>

<div id="viz"></div>

## index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js"></script>
    <style type="text/css">
    svg path{
        stroke: none;

## index.html
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <style type="text/css">
    #table{
        position: absolute;
    }
    #viz{
        position: absolute;
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.js"></script>
	<style>
	.line {
	fill: none;
	stroke: #000;
	stroke-width: 1.5px;
	d3.svg.line.variable = function() {
	return d3_svg_lineVariable();
	}

	function d3_svg_lineVariable() {
	var x = function(d) { return d[0]; },
	y = function(d) { return d[1]; },
	w = 5,
	intpol = "linear",
	t = .7;
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<title></title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js"></script>
	<style type="text/css">
	svg path{
	stroke: none;