DavidSouther/canvas.js

## canvas.js
(function(){
  /*
    Get a new SVG canvas, with margins and scales. Pass an object as `options` to
    set values. Defaults:

    {
      size: # Size of SVG. Returned size will be smaller by the size of the margins.
        width: 960
        height: 500
      margin: # Margins for the graphic.
        top: 20
        right: 20
        bottom: 30
        left: 40
      scale: # d3.scales to scale against the canvas
        x: linear
        y: linear
      domain: # Domain of scales for the canvas.
        x: [0, 1]
        y: [0, 1]
    }

    @param root String selector for finding the SVG element.
    @param options Object matching the defaults to override.
    @return Object with defaults, overriden by the options, and an additional two properties:
      {
        svg: SVG_Element # SVG root
        defs: SVG_Defs_Element # <defs> to attach gradient and filter definitions to.
      }
  */
  this.Canvas = function(root, options){
    var margin, width, height, svg, scales, canvas;
    root == null && (root = 'body');
    options == null && (options = {});
    options.size || (options.size = {});
    options.margin || (options.margin = {});
    options.scale || (options.scale = {});
    margin = {
      top: options.margin.top || 20,
      right: options.margin.top || 20,
      bottom: options.margin.top || 30,
      left: options.margin.top || 40
    };
    margin.leftright = margin.left + margin.right;
    margin.topbottom = margin.top + margin.bottom;
    width = (options.size.width || 960) - margin.leftright;
    height = (options.size.height || 500) - margin.topbottom;
    svg = d3.select(root).attr({
      'width': width + margin.left + margin.right,
      'height': height + margin.top + margin.bottom
    });
    scales = {
      x: d3.scale[options.scale.x || 'linear']().range([0, width]).domain(options.domain.x || [0, 1]).nice(),
      y: d3.scale[options.scale.y || 'linear']().range([0, height]).domain(options.domain.y || [0, 1]).nice()
    };
    canvas = {
      size: {
        width: width,
        height: height
      },
      margin: margin,
      scale: scales,
      svg: svg,
      defs: svg.select('defs')
    };
    return canvas;
  };
}).call(this);

## hr.csv

          
            name
            mag
            temp

            
              40 Eridani A
              6.0
              4900

            
              40 Eridani B
              11.1
              10000

            
              40 Eridani C
              12.8
              2940

            
              61 Cygni A
              7.6
              4130

            
              61 Cygni B
              8.4
              3870

            
              70 Ophiuchi A
              5.8
              4950

            
              70 Ophiuchi B
              7.5
              3870

            
              Achemar
              -2.4
              20500

            
              Acrux
              -4.0
              28000

            
              Adhara
              -5.2
              23000

            
              AD Leonis
              11.0
              2940

            
              Aldebaran
              -0.8
              4130

            
              Alhena
              0.0
              9900

            
              Alioth
              0.4
              9900

            
              Alkaid
              -1.7
              20500

            
              Al Na'ir
              -1.1
              15550

            
              Alnilam
              -6.2
              26950

            
              Alnitak
              -5.9
              33600

            
              Alpha Centauri A
              4.3
              5840

            
              AlphaCentauri A
              4.3
              5840

            
              Alpha Centauri B
              5.8
              4730

            
              Alpha Centauri B
              5.8
              4900

            
              Alpha Crucis B
              -3.3
              20500

            
              Altair
              2.2
              8060

            
              Antares
              -5.2
              3340

            
              Arcturus
              -0.4
              4590

            
              Atria
              -0.1
              4590

            
              Avior
              -2.1
              4900

            
              Barnard's Star
              13.2
              2800

            
              BD +051668
              11.9
              2800

            
              BD -124523
              12.1
              2940

            
              Bellatrix
              -4.3
              23000

            
              Beta Centauri
              -5.1
              25500

            
              Beta Crucis
              -4.7
              28000

            
              Betelgeuse
              -5.7
              3200

            
              Canopus
              -3.1
              7400

            
              Capella
              -0.6
              5150

            
              Castor
              1.2
              9620

            
              Delta Canis Majoris
              -8.0
              6100

            
              Delta Vulpeculae
              0.6
              9900

            
              Deneb
              -7.2
              9340

            
              Dubhe
              0.2
              4900

            
              Elnath
              -1.6
              12400

            
              Epsilon Eridani
              6.1
              4590

            
              Epsilon Indi
              7.0
              4130

            
              EV Lacertae
              11.7
              2800

            
              Fomalhaut
              2.0
              9060

            
              G51-I5
              17.0
              2500

            
              Gacrux
              -0.5
              3750

            
              GQ Andromedae
              13.4
              2670

            
              GX Andromedae
              10.4
              3340

            
              Hadar
              -5.3
              25500

            
              HD 225213
              10.3
              3200

            
              HD 93735
              10.5
              3200

            
              Kapteyn's Star
              10.9
              3480

            
              Kaus Australis
              -0.3
              11000

            
              Kruger 60 A
              11.9
              2940

            
              Kruger 60 B
              13.3
              2670

            
              L726-8 ( A)
              15.5
              2670

            
              L 789-6
              14.5
              2670

            
              Lacaille 8760
              8.7
              3340

            
              Lacaille 9352
              9.6
              3340

            
              Menkalinan
              0.6
              9340

            
              Miaplacidus
              -0.6
              9300

            
              Mirfak
              -4.6
              7700

            
              Mirzam
              -4.8
              25500

            
              Peacock
              -2.3
              20500

            
              Polaris
              -4.6
              6100

            
              Pollux
              1.0
              4900

            
              Procyon A
              2.6
              6580

            
              Procyon A
              2.6
              6600

            
              Procyon B
              13.0
              9700

            
              Proxima Centauri
              15.5
              2670

            
              Regulus
              -0.8
              13260

            
              Rigel
              -7.2
              12140

            
              Ross 128
              13.5
              2800

            
              Ross 154
              13.1
              2800

            
              Ross 248
              14.8
              2670

            
              Ross 614 A
              13.1
              2800

            
              Shaula
              -3.4
              25500

            
              Sirius A
              1.4
              9620

            
              Sirius B
              11.2
              14800

            
              Spica
              -3.4
              25500

            
              Struve 2398 A
              11.2
              3070

            
              Struve 2398 B
              11.9
              2940

            
              Sun
              4.8
              5840

            
              Tau Ceti
              5.7
              5150

            
              Theta Scorpii
              -5.6
              7400

            
              TZ Arietis
              14.0
              2800

            
              UV Ceti (B)
              16.0
              2670

            
              van Maanen's Star
              14.2
              13000

            
              Vega
              0.5
              9900

            
              Wolf 359 (CN Leo)
              16.7
              2670

            
              Wolf 424 A
              15.0
              2670

            
              YZ Ceti
              14.1
              2670

## starmap.html
<!DOCTYPE html>
<html>
<head>
	<title>HR in D3</title>
	<script src="http://d3js.org/d3.v3.min.js" />
	<link rel="stylesheet" href="styles/nucleosynth.css">
	<script src="canvas.js" />
	<script src="starmap.js" />
</head>
<body>
	<svg id="chart">
		<defs>
			<filter id="oil" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
				<femorphology in="SourceGraphic" radius="2" result="result_oil_morph" />
				<feturbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="result_oil_turb" />
				<fedisplacementmap in="result_oil_morph" in2="result_oil_turb" scale=4 xChannelSelector="R" yChannelSelector="G" />
			</filter>
		</defs>
	</svg>
	<script type="text/javascript">
		var background;
		canvas = Canvas('#chart', {
			scale: {
				x: 'log'
			},
			domain: {
				x: [100000, 1000],
				y: [-8, 7]
			}
		});
		background = canvas.svg.append('svg:g')
			.attr('style', 'filter:url(#oil);');
		background.append('svg:image')
			.attr({
				'xlink:href': "assets/dfb.png",
				'width': canvas.size.width + canvas.margin.leftright,
				'height': canvas.size.height + canvas.margin.topbottom,
				'x': 0,
				'y': 0
			});
		Starmap(canvas)(background.append('svg:g'));
	</script>
</body>

## starmap.js
(function(){
  var spectrate, Starmap, prepare;

  // Small helper to look up a string
  spectrate = function(star){
    return "class" + spectral['class'](+star.temp);
  };

  // Given a canvas, add gradient definitions to the svg:defs element.
  prepare = function(canvas){
    var defs, grads;
    defs = canvas.defs;
    grads = defs.selectAll('radialGradient')
      // A list of spectral classes
      .data(spectral.spectro)
      .enter()
      .append('svg:radialGradient')
      .attr({
        'id': function(it){ return spectrate(it); },
        'cx': +0.5,
        'cy': +0.5,
        'r': +1
      });
    grads.append('stop')
      .attr({
        'stop-color': function(it){ return it.color.brighter(); },
        'offset', '0%'
      });
    grads.append('stop')
      .attr({
        'stop-color': function(it){ return it.color; },
        'offset': '100%'
      });
  };

  this.Starmap = function(canvas){
    var star;
    prepare(canvas);

    // Callable function to draw circles in a selection
    // EG a stencil
    star = function(selection){
      var circles;
      circles = selection.enter()
        .append('svg:circle')
        .attr({
          "r": 20,
          "class": "star"
        })
        .style({
          "opacity": 0.9
        });
      circles.attr({
        "cx": function(it){ return canvas.scale.x(+it.temp); },
        "cy": function(it){ return canvas.scale.y(+it.mag); },
        "fill": function(it){ return "url(#" + spectrate(it) + ")"; }
      });
      selection.exit().remove();
    };

    // The main stencil. Takes an svg:g layer from inside canvas.svg
    return function(layer){
      // Load the spectrum data
      d3.csv("hr.csv", function(error, stars){
        layer.attr({
            'id': "herzrus",
            'transform': "translate(" + canvas.margin.left + ", " + canvas.margin.right + ")"
          })
          .style('opacity', 0.9)
          .selectAll('.star')
          .data(stars)
          // Chained call to the reusable star stencil.
          .call(star);
      });
    };
  });
}).call(this);
	(function(){
	/*
	Get a new SVG canvas, with margins and scales. Pass an object as `options` to
	set values. Defaults:

	{
	size: # Size of SVG. Returned size will be smaller by the size of the margins.
	width: 960
	height: 500
	margin: # Margins for the graphic.
	top: 20
	right: 20
	bottom: 30
	left: 40
	scale: # d3.scales to scale against the canvas
	x: linear
	y: linear
	domain: # Domain of scales for the canvas.
	x: [0, 1]
	y: [0, 1]
	}

	@param root String selector for finding the SVG element.
	@param options Object matching the defaults to override.
	@return Object with defaults, overriden by the options, and an additional two properties:
	{
	svg: SVG_Element # SVG root
	defs: SVG_Defs_Element # <defs> to attach gradient and filter definitions to.
	}
	*/
	this.Canvas = function(root, options){
	var margin, width, height, svg, scales, canvas;
	root == null && (root = 'body');
	options == null && (options = {});
	options.size \|\| (options.size = {});
	options.margin \|\| (options.margin = {});
	options.scale \|\| (options.scale = {});
	margin = {
	top: options.margin.top \|\| 20,
	right: options.margin.top \|\| 20,
	bottom: options.margin.top \|\| 30,
	left: options.margin.top \|\| 40
	};
	margin.leftright = margin.left + margin.right;
	margin.topbottom = margin.top + margin.bottom;
	width = (options.size.width \|\| 960) - margin.leftright;
	height = (options.size.height \|\| 500) - margin.topbottom;
	svg = d3.select(root).attr({
	'width': width + margin.left + margin.right,
	'height': height + margin.top + margin.bottom
	});
	scales = {
	x: d3.scale[options.scale.x \|\| 'linear']().range([0, width]).domain(options.domain.x \|\| [0, 1]).nice(),
	y: d3.scale[options.scale.y \|\| 'linear']().range([0, height]).domain(options.domain.y \|\| [0, 1]).nice()
	};
	canvas = {
	size: {
	width: width,
	height: height
	},
	margin: margin,
	scale: scales,
	svg: svg,
	defs: svg.select('defs')
	};
	return canvas;
	};
	}).call(this);
name	mag	temp
40 Eridani A	6.0	4900
40 Eridani B	11.1	10000
40 Eridani C	12.8	2940
61 Cygni A	7.6	4130
61 Cygni B	8.4	3870
70 Ophiuchi A	5.8	4950
70 Ophiuchi B	7.5	3870
Achemar	-2.4	20500
Acrux	-4.0	28000
Adhara	-5.2	23000
AD Leonis	11.0	2940
Aldebaran	-0.8	4130
Alhena	0.0	9900
Alioth	0.4	9900
Alkaid	-1.7	20500
Al Na'ir	-1.1	15550
Alnilam	-6.2	26950
Alnitak	-5.9	33600
Alpha Centauri A	4.3	5840
AlphaCentauri A	4.3	5840
Alpha Centauri B	5.8	4730
Alpha Centauri B	5.8	4900
Alpha Crucis B	-3.3	20500
Altair	2.2	8060
Antares	-5.2	3340
Arcturus	-0.4	4590
Atria	-0.1	4590
Avior	-2.1	4900
Barnard's Star	13.2	2800
BD +051668	11.9	2800
BD -124523	12.1	2940
Bellatrix	-4.3	23000
Beta Centauri	-5.1	25500
Beta Crucis	-4.7	28000
Betelgeuse	-5.7	3200
Canopus	-3.1	7400
Capella	-0.6	5150
Castor	1.2	9620
Delta Canis Majoris	-8.0	6100
Delta Vulpeculae	0.6	9900
Deneb	-7.2	9340
Dubhe	0.2	4900
Elnath	-1.6	12400
Epsilon Eridani	6.1	4590
Epsilon Indi	7.0	4130
EV Lacertae	11.7	2800
Fomalhaut	2.0	9060
G51-I5	17.0	2500
Gacrux	-0.5	3750
GQ Andromedae	13.4	2670
GX Andromedae	10.4	3340
Hadar	-5.3	25500
HD 225213	10.3	3200
HD 93735	10.5	3200
Kapteyn's Star	10.9	3480
Kaus Australis	-0.3	11000
Kruger 60 A	11.9	2940
Kruger 60 B	13.3	2670
L726-8 ( A)	15.5	2670
L 789-6	14.5	2670
Lacaille 8760	8.7	3340
Lacaille 9352	9.6	3340
Menkalinan	0.6	9340
Miaplacidus	-0.6	9300
Mirfak	-4.6	7700
Mirzam	-4.8	25500
Peacock	-2.3	20500
Polaris	-4.6	6100
Pollux	1.0	4900
Procyon A	2.6	6580
Procyon A	2.6	6600
Procyon B	13.0	9700
Proxima Centauri	15.5	2670
Regulus	-0.8	13260
Rigel	-7.2	12140
Ross 128	13.5	2800
Ross 154	13.1	2800
Ross 248	14.8	2670
Ross 614 A	13.1	2800
Shaula	-3.4	25500
Sirius A	1.4	9620
Sirius B	11.2	14800
Spica	-3.4	25500
Struve 2398 A	11.2	3070
Struve 2398 B	11.9	2940
Sun	4.8	5840
Tau Ceti	5.7	5150
Theta Scorpii	-5.6	7400
TZ Arietis	14.0	2800
UV Ceti (B)	16.0	2670
van Maanen's Star	14.2	13000
Vega	0.5	9900
Wolf 359 (CN Leo)	16.7	2670
Wolf 424 A	15.0	2670
YZ Ceti	14.1	2670
	<!DOCTYPE html>
	<html>
	<head>
	<title>HR in D3</title>
	<script src="http://d3js.org/d3.v3.min.js" />
	<link rel="stylesheet" href="styles/nucleosynth.css">
	<script src="canvas.js" />
	<script src="starmap.js" />
	</head>
	<body>
	<svg id="chart">
	<defs>
	<filter id="oil" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
	<femorphology in="SourceGraphic" radius="2" result="result_oil_morph" />
	<feturbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="result_oil_turb" />
	<fedisplacementmap in="result_oil_morph" in2="result_oil_turb" scale=4 xChannelSelector="R" yChannelSelector="G" />
	</filter>
	</defs>
	</svg>
	<script type="text/javascript">
	var background;
	canvas = Canvas('#chart', {
	scale: {
	x: 'log'
	},
	domain: {
	x: [100000, 1000],
	y: [-8, 7]
	}
	});
	background = canvas.svg.append('svg:g')
	.attr('style', 'filter:url(#oil);');
	background.append('svg:image')
	.attr({
	'xlink:href': "assets/dfb.png",
	'width': canvas.size.width + canvas.margin.leftright,
	'height': canvas.size.height + canvas.margin.topbottom,
	'x': 0,
	'y': 0
	});
	Starmap(canvas)(background.append('svg:g'));
	</script>
	</body>
	(function(){
	var spectrate, Starmap, prepare;

	// Small helper to look up a string
	spectrate = function(star){
	return "class" + spectral['class'](+star.temp);
	};

	// Given a canvas, add gradient definitions to the svg:defs element.
	prepare = function(canvas){
	var defs, grads;
	defs = canvas.defs;
	grads = defs.selectAll('radialGradient')
	// A list of spectral classes
	.data(spectral.spectro)
	.enter()
	.append('svg:radialGradient')
	.attr({
	'id': function(it){ return spectrate(it); },
	'cx': +0.5,
	'cy': +0.5,
	'r': +1
	});
	grads.append('stop')
	.attr({
	'stop-color': function(it){ return it.color.brighter(); },
	'offset', '0%'
	});
	grads.append('stop')
	.attr({
	'stop-color': function(it){ return it.color; },
	'offset': '100%'
	});
	};

	this.Starmap = function(canvas){
	var star;
	prepare(canvas);

	// Callable function to draw circles in a selection
	// EG a stencil
	star = function(selection){
	var circles;
	circles = selection.enter()
	.append('svg:circle')
	.attr({
	"r": 20,
	"class": "star"
	})
	.style({
	"opacity": 0.9
	});
	circles.attr({
	"cx": function(it){ return canvas.scale.x(+it.temp); },
	"cy": function(it){ return canvas.scale.y(+it.mag); },
	"fill": function(it){ return "url(#" + spectrate(it) + ")"; }
	});
	selection.exit().remove();
	};

	// The main stencil. Takes an svg:g layer from inside canvas.svg
	return function(layer){
	// Load the spectrum data
	d3.csv("hr.csv", function(error, stars){
	layer.attr({
	'id': "herzrus",
	'transform': "translate(" + canvas.margin.left + ", " + canvas.margin.right + ")"
	})
	.style('opacity', 0.9)
	.selectAll('.star')
	.data(stars)
	// Chained call to the reusable star stencil.
	.call(star);
	});
	};
	});
	}).call(this);