Skip to content

Instantly share code, notes, and snippets.

@Jverma

Jverma/README.md

Created July 9, 2015 16:32
Show Gist options
  • Save Jverma/346aa5075ad2b976f3d6 to your computer and use it in GitHub Desktop.
Save Jverma/346aa5075ad2b976f3d6 to your computer and use it in GitHub Desktop.
Download ZIP
Parallel Coordinates visualization of Cosmological parameters
Raw
README.md

Parallel coordinates visualization of Cosmological parameters which characterizes the chosen cosmological model. There are 38 comsological models in this visual. These models were chosen to built a cosmological emulator, and we used this in our upcoming paper on computation of non-linear matter power spectra.

Raw
cosmologies.csv
Hubble constant Matter density Baryon density Normalisation of Power Spectrum Spectral Index Dark energy
2.50E-01 8.00E-01 7.20E-01 9.70E-01 4.32E-02 -1.00E+00
4.32E-01 8.16E-01 5.97E-01 9.47E-01 6.48E-02 -8.16E-01
4.10E-01 8.55E-01 5.97E-01 8.95E-01 6.37E-02 -7.58E-01
2.89E-01 8.48E-01 6.77E-01 9.98E-01 5.13E-02 -8.74E-01
2.66E-01 7.00E-01 7.20E-01 9.34E-01 4.38E-02 -1.09E+00
2.30E-01 8.23E-01 7.68E-01 9.73E-01 3.66E-02 -1.24E+00
3.05E-01 6.70E-01 7.05E-01 9.14E-01 4.61E-02 -1.22E+00
3.31E-01 7.47E-01 6.19E-01 9.21E-01 5.82E-02 -7.01E-01
2.78E-01 8.09E-01 7.22E-01 9.86E-01 4.28E-02 -1.20E+00
3.69E-01 6.69E-01 6.14E-01 9.79E-01 6.21E-02 -7.39E-01
3.13E-01 7.56E-01 6.70E-01 8.57E-01 4.86E-02 -9.90E-01
2.79E-01 7.28E-01 7.18E-01 8.82E-01 4.54E-02 -1.13E+00
2.23E-01 6.27E-01 7.41E-01 1.00E+00 4.10E-02 -9.71E-01
3.97E-01 6.51E-01 6.11E-01 9.60E-01 5.92E-02 -8.55E-01
3.28E-01 7.08E-01 6.70E-01 1.03E+00 5.19E-02 -1.01E+00
2.37E-01 7.69E-01 7.72E-01 1.02E+00 3.86E-02 -1.28E+00
1.97E-01 7.44E-01 7.94E-01 9.40E-01 3.46E-02 -1.15E+00
3.57E-01 6.86E-01 6.32E-01 9.27E-01 5.38E-02 -8.93E-01
2.58E-01 6.44E-01 7.14E-01 8.89E-01 4.24E-02 -1.03E+00
1.94E-01 6.16E-01 8.13E-01 8.63E-01 3.51E-02 -1.18E+00
3.10E-01 7.97E-01 6.45E-01 1.02E+00 5.29E-02 -7.97E-01
2.31E-01 6.56E-01 7.60E-01 1.04E+00 3.83E-02 -1.17E+00
3.31E-01 7.68E-01 6.74E-01 1.05E+00 4.95E-02 -1.11E+00
1.68E-01 6.66E-01 8.50E-01 9.02E-01 3.04E-02 -1.26E+00
1.85E-01 6.64E-01 8.38E-01 9.53E-01 3.22E-02 -1.30E+00
4.55E-01 7.40E-01 5.73E-01 1.01E+00 6.61E-02 -7.19E-01
2.80E-01 7.99E-01 6.93E-01 9.08E-01 4.83E-02 -9.52E-01
3.34E-01 7.11E-01 6.40E-01 8.50E-01 5.47E-02 -8.36E-01
3.99E-01 8.07E-01 6.19E-01 8.69E-01 5.79E-02 -9.32E-01
2.51E-01 7.09E-01 7.07E-01 1.04E+00 4.56E-02 -9.13E-01
2.81E-01 6.74E-01 6.63E-01 8.76E-01 5.23E-02 -7.77E-01
3.78E-01 7.04E-01 6.40E-01 9.92E-01 5.35E-02 -1.07E+00
1.92E-01 7.56E-01 7.90E-01 9.66E-01 3.67E-02 -1.05E+00
2.63E-01 8.65E-01 7.29E-01 1.04E+00 4.23E-02 -1.15E+00
3.53E-01 8.73E-01 6.51E-01 9.24E-01 5.36E-02 -1.00E+00
3.98E-01 8.82E-01 6.11E-01 9.60E-01 5.92E-02 -8.53E-01
2.95E-01 8.91E-01 6.42E-01 9.39E-01 5.65E-02 -7.06E-01
2.78E-01 8.99E-01 7.33E-01 1.02E+00 4.24E-02 -1.29E+00
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
}
.background path {
fill: none;
stroke: #ddd;
shape-rendering: crispEdges;
}
.foreground path {
fill: none;
stroke: steelblue;
}
.brush .extent {
fill-opacity: .3;
stroke: #fff;
shape-rendering: crispEdges;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
/*.foreground path:hover{
fill: brown;
}*/
.tooltip{
position: absolute;
width: 200px;
height: 28px;
pointer-events: none;
}
.axis text {
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}
</style>
<body>
<div id='chart'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var margin = {top: 30, right: 10, bottom: 10, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal().rangePoints([0, width], 1),
y = {};
var line = d3.svg.line(),
axis = d3.svg.axis().orient("left"),
background,
foreground;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("cosmologies.csv", function(error, data) {
// Extract the list of dimensions and create a scale for each.
x.domain(dimensions = d3.keys(data[0]).filter(function(d) {
return d != "name" && (y[d] = d3.scale.linear()
.domain(d3.extent(data, function(p) { return +p[d]; }))
.range([height, 0]));
}));
// Add grey background lines for context.
background = svg.append("g")
.attr("class", "background")
.selectAll("path")
.data(data)
.enter().append("path")
.attr("d", path);
// Add blue foreground lines for focus.
foreground = svg.append("g")
.attr("class", "foreground")
.selectAll("path")
.data(data)
.enter().append("path")
.attr("d", path);
// // Add a group element for each dimension.
var g = svg.selectAll(".dimension")
.data(dimensions)
.enter().append("g")
.attr("class", "dimension")
.attr("transform", function(d) { return "translate(" + x(d) + ")"; });
// // Add an axis and title.
g.append("g")
.attr("class", "axis")
.each(function(d) { d3.select(this).call(axis.scale(y[d])); })
.append("text")
.style("text-anchor", "middle")
.attr("y", -9)
.text(function(d) { return d; });
// Add and store a brush for each axis.
g.append("g")
.attr("class", "brush")
.each(function(d) { d3.select(this).call(y[d].brush = d3.svg.brush().y(y[d]).on("brush", brush)); })
.selectAll("rect")
.attr("x", -8)
.attr("width", 16);
});
// Returns the path for a given data point.
function path(d) {
return line(dimensions.map(function(p) { return [x(p), y[p](d[p])]; }));
}
// // Handles a brush event, toggling the display of foreground lines.
function brush() {
var actives = dimensions.filter(function(p) { return !y[p].brush.empty(); }),
extents = actives.map(function(p) { return y[p].brush.extent(); });
foreground.style("display", function(d) {
return actives.every(function(p, i) {
return extents[i][0] <= d[p] && d[p] <= extents[i][1];
}) ? null : "none";
});
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment