Skip to content

Instantly share code, notes, and snippets.

@aditeyapandey

aditeyapandey/GDP.csv Secret

Last active January 16, 2016 16:32
Show Gist options
  • Save aditeyapandey/d416c90c99e19f7c9209 to your computer and use it in GitHub Desktop.
Save aditeyapandey/d416c90c99e19f7c9209 to your computer and use it in GitHub Desktop.
Download ZIP
ParallelCoordinate
Raw
GDP.csv
name Agriculture Agriculture_&_Allied Industry Mining Manufacturing Services
Andhra Pradesh 20.58 25.07 24.28 2.79 12.16 50.65
Andhra Pradesh 20.04 24.28 24.39 2.82 11.68 51.33
Andhra Pradesh 18.31 22.27 25.8 3.78 12.36 51.93
Andhra Pradesh 19.41 23.34 25.53 3.62 11.86 51.13
Andhra Pradesh 18.22 22 25.59 2.86 12.6 52.4
Andhra Pradesh 17.49 21.09 25.23 2.89 12.37 53.67
Andhra Pradesh 16.26 19.84 24.85 2.82 13.04 55.31
Andhra Pradesh 14.87 18.61 25.76 2.66 14.13 55.63
Andhra Pradesh 15.01 18.99 24.4 2.71 12.69 56.61
Andhra Pradesh 14.81 19.04 23.61 2.27 12.4 57.34
Arunachal Pradesh 16.41 35.1 31.9 2.26 2.07 32.98
Arunachal Pradesh 15 33.31 32.46 2.74 2.24 34.24
Arunachal Pradesh 17.02 34.76 29.96 2.52 2.42 35.29
Arunachal Pradesh 19.07 34.8 31.23 2.49 2.47 33.96
Arunachal Pradesh 15.16 29.79 35.26 2.35 2.29 34.94
Arunachal Pradesh 13.61 26.91 30.07 2.78 2.16 43.02
Arunachal Pradesh 16.43 29.43 32.45 2.65 2.35 38.12
Arunachal Pradesh 17.38 30.12 30.3 2.4 2.33 39.58
Arunachal Pradesh 15.9 28.3 33.37 1.93 2.21 38.32
Arunachal Pradesh 15.66 27.29 33.95 1.86 2.1 38.77
Assam 21.7 25.57 27.54 8.76 10.53 46.89
Assam 21.39 25.37 25.69 8.63 9.49 48.94
Assam 20.78 24.7 24.54 8.36 8.9 50.76
Assam 20.43 24.23 23.57 8.29 7.94 52.2
Assam 19.56 23.36 23.84 6.59 7.19 52.8
Assam 19.11 22.91 23.8 6.22 8.05 53.29
Assam 18.4 21.95 22.54 5.67 7.93 55.5
Assam 18.31 21.88 22.16 5.52 7.81 55.96
Assam 18.01 21.53 21.59 5.32 7.61 56.88
Assam 17.77 21.27 21.27 5.13 7.44 57.47
Bihar 26.58 31.54 13.76 0.05 5.63 54.7
Bihar 23.38 28.42 15.34 0.09 5.37 56.24
Bihar 26.27 30.45 15.34 0.07 4.92 54.2
Bihar 22.7 26.7 17.37 0.06 5.81 55.94
Bihar 24.19 27.71 17.57 0.12 6.08 54.72
Bihar 19.43 22.72 19.03 0.08 5.54 58.25
Bihar 20.25 23.05 21.24 0.07 5.91 55.71
Bihar 20.85 23.51 19.86 0.07 4.87 56.62
Bihar 20.57 23.09 18.11 0.06 4.48 58.8
Bihar 16.54 18.89 18.37 0.05 4.22 62.73
Raw
GDP1.csv
name Agriculture Agriculture_&_Allied Industry Mining Manufacturing Services Shippping
Andhra Pradesh 20.58 25.07 24.28 2.79 12.16 50.65 20.58
Andhra Pradesh 20.04 24.28 24.39 2.82 11.68 51.33 20.04
Andhra Pradesh 18.31 22.27 25.8 3.78 12.36 51.93 18.31
Andhra Pradesh 19.41 23.34 25.53 3.62 11.86 51.13 19.41
Andhra Pradesh 18.22 22 25.59 2.86 12.6 52.4 18.22
Andhra Pradesh 17.49 21.09 25.23 2.89 12.37 53.67 17.49
Andhra Pradesh 16.26 19.84 24.85 2.82 13.04 55.31 16.26
Andhra Pradesh 14.87 18.61 25.76 2.66 14.13 55.63 14.87
Andhra Pradesh 15.01 18.99 24.4 2.71 12.69 56.61 15.01
Andhra Pradesh 14.81 19.04 23.61 2.27 12.4 57.34 14.81
Arunachal Pradesh 16.41 35.1 31.9 2.26 2.07 32.98 16.41
Arunachal Pradesh 15 33.31 32.46 2.74 2.24 34.24 15
Arunachal Pradesh 17.02 34.76 29.96 2.52 2.42 35.29 17.02
Arunachal Pradesh 19.07 34.8 31.23 2.49 2.47 33.96 19.07
Arunachal Pradesh 15.16 29.79 35.26 2.35 2.29 34.94 15.16
Arunachal Pradesh 13.61 26.91 30.07 2.78 2.16 43.02 13.61
Arunachal Pradesh 16.43 29.43 32.45 2.65 2.35 38.12 16.43
Arunachal Pradesh 17.38 30.12 30.3 2.4 2.33 39.58 17.38
Arunachal Pradesh 15.9 28.3 33.37 1.93 2.21 38.32 15.9
Arunachal Pradesh 15.66 27.29 33.95 1.86 2.1 38.77 15.66
Assam 21.7 25.57 27.54 8.76 10.53 46.89 21.7
Assam 21.39 25.37 25.69 8.63 9.49 48.94 21.39
Assam 20.78 24.7 24.54 8.36 8.9 50.76 20.78
Assam 20.43 24.23 23.57 8.29 7.94 52.2 20.43
Assam 19.56 23.36 23.84 6.59 7.19 52.8 19.56
Assam 19.11 22.91 23.8 6.22 8.05 53.29 19.11
Assam 18.4 21.95 22.54 5.67 7.93 55.5 18.4
Assam 18.31 21.88 22.16 5.52 7.81 55.96 18.31
Assam 18.01 21.53 21.59 5.32 7.61 56.88 18.01
Assam 17.77 21.27 21.27 5.13 7.44 57.47 17.77
Bihar 26.58 31.54 13.76 0.05 5.63 54.7 26.58
Bihar 23.38 28.42 15.34 0.09 5.37 56.24 23.38
Bihar 26.27 30.45 15.34 0.07 4.92 54.2 26.27
Bihar 22.7 26.7 17.37 0.06 5.81 55.94 22.7
Bihar 24.19 27.71 17.57 0.12 6.08 54.72 24.19
Bihar 19.43 22.72 19.03 0.08 5.54 58.25 19.43
Bihar 20.25 23.05 21.24 0.07 5.91 55.71 20.25
Bihar 20.85 23.51 19.86 0.07 4.87 56.62 20.85
Bihar 20.57 23.09 18.11 0.06 4.48 58.8 20.57
Bihar 16.54 18.89 18.37 0.05 4.22 62.73 16.54
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
}
.background path {
fill: none;
stroke: #fff;
shape-rendering: crispEdges;
}
.foreground path {
fill: none;
stroke: #34008B;
opacity:0.1;
}
.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;
cursor: move;
}
</style>
<body>
<p>Click on this text to add a new data value to the chart!</p>
<script src="http://d3js.org/d3.v3.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 = {},
dragging = {};
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("GDP.csv", function(error, cars) {
//Getting the header names - Aditeya
var rowVals=d3.values(cars[0]);
var headerNames=[];
for(var i=0 ; i< rowVals.length;i++)
{
var myVar = rowVals[i];
headerNames.push( !isNaN(myVar))
// console.log(headerNames);
}
headerNames[1]=false;
// Extract the list of dimensions and create a scale for each.
x.domain(dimensions = d3.keys(cars[0]).filter(function( d,i) {
return ( headerNames[i] ) && (y[d] = d3.scale.linear()
.domain(d3.extent(cars, function(p) { return +p[d]; }))
.range([height, 0]));
}));
// Add blue foreground lines for focus.
foreground = svg.append("g")
.attr("class", "foreground")
.selectAll("path")
.data(cars)
.enter().append("path")
.attr("d", path)
.on("mouseover", function(){
d3.select(this).style("opacity","1")
})
.on("mouseout", function(){
d3.select(this).style("opacity","0.1")
});
// 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) + ")"; })
.call(d3.behavior.drag()
.origin(function(d) {
console.log(d);
return {x: x(d)}; })
.on("dragstart", function(d) {
dragging[d] = x(d);
background.attr("visibility", "hidden");
})
.on("drag", function(d) {
dragging[d] = Math.min(width, Math.max(0, d3.event.x));
foreground.attr("d", path);
dimensions.sort(function(a, b) { return position(a) - position(b); });
x.domain(dimensions);
g.attr("transform", function(d) { return "translate(" + position(d) + ")"; })
})
.on("dragend", function(d) {
delete dragging[d];
transition(d3.select(this)).attr("transform", "translate(" + x(d) + ")");
transition(foreground).attr("d", path);
background
.attr("d", path)
.transition()
.delay(500)
.duration(0)
.attr("visibility", null);
}));
// 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) {
if(d.length > 30){return d.substring(0,30)+"......";}
else return d;
})
.append("svg:title")
.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("brushstart", brushstart).on("brush", brush));
})
.selectAll("rect")
.attr("x", -8)
.attr("width", 16);
});
function position(d) {
var v = dragging[d];
return v == null ? x(d) : v;
}
function transition(g) {
return g.transition().duration(500);
}
// Returns the path for a given data point.
function path(d) {
return line(dimensions.map(function(p) { return [position(p), y[p](d[p])]; }));
}
function brushstart() {
d3.event.sourceEvent.stopPropagation();
}
// 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";
});
}
d3.select("p")
.on("click", function() {
d3.csv("GDP1.csv", function(error, cars) {
//Getting the header names - Aditeya
var rowVals=d3.values(cars[0]);
var headerNames=[];
for(var i=0 ; i< rowVals.length;i++)
{
var myVar = rowVals[i];
headerNames.push( !isNaN(myVar))
// console.log(headerNames);
}
headerNames[1]=false;
// Extract the list of dimensions and create a scale for each.
x.domain(dimensions = d3.keys(cars[0]).filter(function( d,i) {
return ( headerNames[i] ) && (y[d] = d3.scale.linear()
.domain(d3.extent(cars, function(p) { return +p[d]; }))
.range([height, 0]));
}));
foreground = d3.selectAll(".foreground")
.selectAll("path")
.data(cars)
foreground.enter().append("path")
.attr("d", path);
foreground.transition() //Initiate a transition on all elements in the update selection (all rects)
.duration(500)
.attr("d", path);
// Code to add new axis-Aditeya
var g = svg.selectAll(".dimension")
.data(dimensions)
g.on(".drag", null);
g.enter().append("g")
.attr("class", "dimension")
.attr("transform", function(d) { return "translate(" + x(d) + ")"; })
.call(d3.behavior.drag()
.origin(function(d) { return {x: x(d)}; })
.on("dragstart", function(d) {
dragging[d] = x(d);
background.attr("visibility", "hidden");
})
.on("drag", function(d) {
dragging[d] = Math.min(width, Math.max(0, d3.event.x));
foreground.attr("d", path);
dimensions.sort(function(a, b) { return position(a) - position(b); });
x.domain(dimensions);
g.attr("transform", function(d) { return "translate(" + position(d) + ")"; })
})
.on("dragend", function(d) {
delete dragging[d];
transition(d3.select(this)).attr("transform", "translate(" + x(d) + ")");
transition(foreground).attr("d", path);
background
.attr("d", path)
.transition()
.delay(500)
.duration(0)
.attr("visibility", null);
}));
g.transition() //Initiate a transition on all elements in the update selection (all rects)
.duration(500)
.attr("transform", function(d) { return "translate(" + x(d) + ")"; })
/* .call(d3.behavior.drag()
.origin(function(d) { return {x: x(d)}; })
.on("dragstart", function(d) {
dragging[d] = x(d);
background.attr("visibility", "hidden");
})
.on("drag", function(d) {
dragging[d] = Math.min(width, Math.max(0, d3.event.x));
foreground.attr("d", path);
dimensions.sort(function(a, b) { return position(a) - position(b); });
x.domain(dimensions);
g.attr("transform", function(d) { return "translate(" + position(d) + ")"; })
})
.on("dragend", function(d) {
delete dragging[d];
transition(d3.select(this)).attr("transform", "translate(" + x(d) + ")");
transition(foreground).attr("d", path);
background
.attr("d", path)
.transition()
.delay(500)
.duration(0)
.attr("visibility", null);
}));
*/
g.exit()
.transition()
.duration(500)
.remove();
// 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) {
if(d.length > 30){return d.substring(0,30)+"......";}
else return d;
})
.append("svg:title")
.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("brushstart", brushstart).on("brush", brush));
})
.selectAll("rect")
.attr("x", -8)
.attr("width", 16);
var g = svg.selectAll(".dimension")
.data(dimensions)
g.on(".drag", null);
g.call(d3.behavior.drag()
.origin(function(d) { return {x: x(d)}; })
.on("dragstart", function(d) {
dragging[d] = x(d);
background.attr("visibility", "hidden");
})
.on("drag", function(d) {
dragging[d] = Math.min(width, Math.max(0, d3.event.x));
foreground.attr("d", path);
dimensions.sort(function(a, b) { return position(a) - position(b); });
x.domain(dimensions);
g.attr("transform", function(d) { return "translate(" + position(d) + ")"; })
})
.on("dragend", function(d) {
delete dragging[d];
transition(d3.select(this)).attr("transform", "translate(" + x(d) + ")");
transition(foreground).attr("d", path);
background
.attr("d", path)
.transition()
.delay(500)
.duration(0)
.attr("visibility", null);
}));
});
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment