VictorDu/index.html

## 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: #4cb489;
    }

    .brush .extent {
        fill-opacity: .3;
        stroke: #fff;
        shape-rendering: crispEdges;
    }

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

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

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
    var outerWidth = 1024;
    var outerHeight = 798;
    var margin = {top: 30, right: 10, bottom: 10, left: 10};

    var innerWidth  = outerWidth  - margin.left - margin.right;
    var innerHeight = outerHeight - margin.top  - margin.bottom;

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

    var line = d3.svg.line(),
            axis = d3.svg.axis().orient("left"),
            background,
            foreground;

    var svg = d3.select("body").append("svg")
            .attr("width", outerWidth)
            .attr("height", outerHeight);


    var g = svg.append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.csv("https://gist.githubusercontent.com/VictorDu/fbd642275a936c99c90c/raw/412276f252fa93b23cd5c6d2f68e8fbb66fe2112/cadata.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 != "number" && (y[d] = d3.scale.linear()
                            .domain(d3.extent(data, function(p) { return +p[d]; }))
                            .range([innerHeight, 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 green 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>
	<!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: #4cb489;
	}

	.brush .extent {
	fill-opacity: .3;
	stroke: #fff;
	shape-rendering: crispEdges;
	}

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

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

	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>
	var outerWidth = 1024;
	var outerHeight = 798;
	var margin = {top: 30, right: 10, bottom: 10, left: 10};

	var innerWidth = outerWidth - margin.left - margin.right;
	var innerHeight = outerHeight - margin.top - margin.bottom;

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

	var line = d3.svg.line(),
	axis = d3.svg.axis().orient("left"),
	background,
	foreground;

	var svg = d3.select("body").append("svg")
	.attr("width", outerWidth)
	.attr("height", outerHeight);


	var g = svg.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	d3.csv("https://gist.githubusercontent.com/VictorDu/fbd642275a936c99c90c/raw/412276f252fa93b23cd5c6d2f68e8fbb66fe2112/cadata.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 != "number" && (y[d] = d3.scale.linear()
	.domain(d3.extent(data, function(p) { return +p[d]; }))
	.range([innerHeight, 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 green 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>