DavidSouther · December 14, 2015 05:29
diff --git a/canvas.js b/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);
diff --git a/hr.csv b/hr.csv
diff --git a/starmap.html b/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>
diff --git a/starmap.js b/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);