Elementary Particles

<!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="https://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>

Modified http://d3js.org/d3.v2.js to a secure url

https://d3js.org/d3.v2.js