syntagmatic/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
  font: 10px sans-serif;
}

.foreground path {
  fill: none;
  stroke: steelblue;
  stroke-opacity: .7;
  stroke-width: 2;
}

.axis line, .axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis text {
  text-shadow: 0 1px 0 #fff;
}

</style>
<body>
<script src="http://d3js.org/d3.v2.js"></script>
<script>

var m = [30, 10, 10, 50],
    width = 960 - m[1] - m[3],
    height = 500 - m[0] - m[2];

var dimensions = [
  {
    name: "Name",
    scale: d3.scale.ordinal().rangePoints([0,height]),
    type: "string"
  },
  {
    name: "Type",
    scale: d3.scale.ordinal().rangePoints([0,height]),
    type: "string"
  },
  {
    name: "Spin",
    scale: d3.scale.linear().range([height,0]),
    type: "number"
  },
  {
    name: "Charge",
    scale: d3.scale.linear().range([height,0]),
    type: "number"
  },
  {
    name: "Mass (MeV/c^2)",
    scale: d3.scale.linear().range([height,0]),
    type: "number"
  }
];

var color = d3.scale.ordinal()
.range(["#7AB541","#C14E95","#C15932","#7577C0"]);

var x = d3.scale.ordinal().rangePoints([0, width], .5),
    y = {};

var line = d3.svg.line().defined(function(d) { return d[1] !== null; }).interpolate("cardinal").tension(0.9),
    axis = d3.svg.axis().orient("left").ticks(3),
    foreground;

var svg = d3.select("body").append("svg")
    .attr("width", width + m[1] + m[3])
    .attr("height", height + m[0] + m[2])
  .append("g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

d3.csv("particles.csv", function(data) {
  data.forEach(function(d) {
    d.Spin = parseFloat(d.Spin);
    d.Charge = parseFloat(d.Charge);
    d['Mass (MeV/c^2)'] = parseFloat(d['Mass (MeV/c^2)']);
  });

  // Extract the list of imensions and create a scale for each.
  x.domain(dimensions.map(function(d) { return d.name }));
  dimensions.forEach(function(d,i) {
      dimensions[i].type == "number"
        ? y[d.name] = dimensions[i].scale
          .domain(d3.extent(data, function(p) { return +p[d.name]; }))
        : y[d.name] = dimensions[i].scale
          .domain(data.map(function(p) { return p[d.name]; }))
  });

  foreground = svg.append("g")
      .attr("class", "foreground")
    .selectAll("path")
      .data(data)
    .enter().append("path")
      .attr("d", function(d) { return line(xy(d)); })
      .style("stroke", function(d) { return color(d.Type); });

  var g = svg.selectAll(".dimension")
      .data(x.domain())
    .enter().append("g")
      .attr("class", "dimension")
      .attr("transform", function(d) { return "translate(" + x(d) + ")"; });

  g.append("g")
      .attr("class", "axis")
      .each(function(d) { d3.select(this).call(axis.scale(y[d])); })
    .append("text")
      .attr("text-anchor", "middle")
      .attr("y", -9)
      .text(String);
});

function xy(d) {
  return dimensions.map(function(dim) {
    var p = dim.name;
    return [x(p), y[p](d[p])];
  })
};
</script>

## particles.csv

          
            Name
            Type
            Spin
            Charge
            Mass (MeV/c^2)

            
              Up
              Quark
              0.5
              0.6667
              2.4

            
              Charm
              Quark
              0.5
              0.6667
              1270

            
              Top
              Quark
              0.5
              0.6667
              171200

            
              Photon
              Gauge Boson
              0
              0
              0

            
              Higgs Boson
              Higgs Boson
              0
              0
              127000

            
              Down
              Quark
              0.5
              -0.3333
              4.8

            
              Strange
              Quark
              0.5
              -0.3333
              104

            
              Bottom
              Quark
              0.5
              -0.3333
              4200

            
              Gluon
              Gauge Boson
              1
              0
              0

            
              Electron Neutrino
              Lepton
              0.5
              0
              0.0022

            
              Muon Neutron
              Lepton
              0.5
              0
              0.00017

            
              Tau Neutrino
              Lepton
              0.5
              0
              15.5

            
              Z Boson
              Gauge Boson
              1
              0
              91200

            
              Electron
              Lepton
              0.5
              -1
              0.511

            
              Muon
              Lepton
              0.5
              -1
              105.7

            
              Tau
              Lepton
              0.5
              -1
              1777

            
              W Boson+
              Gauge Boson
              1
              1
              80400

            
              W Boson-
              Gauge Boson
              1
              -1
              80400

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	svg {
	font: 10px sans-serif;
	}

	.foreground path {
	fill: none;
	stroke: steelblue;
	stroke-opacity: .7;
	stroke-width: 2;
	}

	.axis line, .axis path {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.axis text {
	text-shadow: 0 1px 0 #fff;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v2.js"></script>
	<script>

	var m = [30, 10, 10, 50],
	width = 960 - m[1] - m[3],
	height = 500 - m[0] - m[2];

	var dimensions = [
	{
	name: "Name",
	scale: d3.scale.ordinal().rangePoints([0,height]),
	type: "string"
	},
	{
	name: "Type",
	scale: d3.scale.ordinal().rangePoints([0,height]),
	type: "string"
	},
	{
	name: "Spin",
	scale: d3.scale.linear().range([height,0]),
	type: "number"
	},
	{
	name: "Charge",
	scale: d3.scale.linear().range([height,0]),
	type: "number"
	},
	{
	name: "Mass (MeV/c^2)",
	scale: d3.scale.linear().range([height,0]),
	type: "number"
	}
	];

	var color = d3.scale.ordinal()
	.range(["#7AB541","#C14E95","#C15932","#7577C0"]);

	var x = d3.scale.ordinal().rangePoints([0, width], .5),
	y = {};

	var line = d3.svg.line().defined(function(d) { return d[1] !== null; }).interpolate("cardinal").tension(0.9),
	axis = d3.svg.axis().orient("left").ticks(3),
	foreground;

	var svg = d3.select("body").append("svg")
	.attr("width", width + m[1] + m[3])
	.attr("height", height + m[0] + m[2])
	.append("g")
	.attr("transform", "translate(" + m[3] + "," + m[0] + ")");

	d3.csv("particles.csv", function(data) {
	data.forEach(function(d) {
	d.Spin = parseFloat(d.Spin);
	d.Charge = parseFloat(d.Charge);
	d['Mass (MeV/c^2)'] = parseFloat(d['Mass (MeV/c^2)']);
	});

	// Extract the list of imensions and create a scale for each.
	x.domain(dimensions.map(function(d) { return d.name }));
	dimensions.forEach(function(d,i) {
	dimensions[i].type == "number"
	? y[d.name] = dimensions[i].scale
	.domain(d3.extent(data, function(p) { return +p[d.name]; }))
	: y[d.name] = dimensions[i].scale
	.domain(data.map(function(p) { return p[d.name]; }))
	});

	foreground = svg.append("g")
	.attr("class", "foreground")
	.selectAll("path")
	.data(data)
	.enter().append("path")
	.attr("d", function(d) { return line(xy(d)); })
	.style("stroke", function(d) { return color(d.Type); });

	var g = svg.selectAll(".dimension")
	.data(x.domain())
	.enter().append("g")
	.attr("class", "dimension")
	.attr("transform", function(d) { return "translate(" + x(d) + ")"; });

	g.append("g")
	.attr("class", "axis")
	.each(function(d) { d3.select(this).call(axis.scale(y[d])); })
	.append("text")
	.attr("text-anchor", "middle")
	.attr("y", -9)
	.text(String);
	});

	function xy(d) {
	return dimensions.map(function(dim) {
	var p = dim.name;
	return [x(p), y[p](d[p])];
	})
	};
	</script>
Name	Type	Spin	Charge	Mass (MeV/c^2)
Up	Quark	0.5	0.6667	2.4
Charm	Quark	0.5	0.6667	1270
Top	Quark	0.5	0.6667	171200
Photon	Gauge Boson	0	0	0
Higgs Boson	Higgs Boson	0	0	127000
Down	Quark	0.5	-0.3333	4.8
Strange	Quark	0.5	-0.3333	104
Bottom	Quark	0.5	-0.3333	4200
Gluon	Gauge Boson	1	0	0
Electron Neutrino	Lepton	0.5	0	0.0022
Muon Neutron	Lepton	0.5	0	0.00017
Tau Neutrino	Lepton	0.5	0	15.5
Z Boson	Gauge Boson	1	0	91200
Electron	Lepton	0.5	-1	0.511
Muon	Lepton	0.5	-1	105.7
Tau	Lepton	0.5	-1	1777
W Boson+	Gauge Boson	1	1	80400
W Boson-	Gauge Boson	1	-1	80400