Skip to content

Instantly share code, notes, and snippets.

@surabhishankar

surabhishankar/README.md

Last active February 10, 2016 17:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save surabhishankar/23e1cbfe765a59d08471 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save surabhishankar/23e1cbfe765a59d08471 to your computer and use it in GitHub Desktop.
Download ZIP
Visualization Implementation 3
Raw
README.md

Surbhi Shankar

01012632

Three thigs that I learnt through the tutorials:

  1. Using "div" tag to include two separate codes in a single .html file.
  2. Creating eye pleasing Animations and Transitions using D3. Learning how to do transitions with different shapes and also by changing colors was the best experience.
  3. Plotting a scatterplot by defining X and Y axis.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Demo: Axes</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style type="text/css">
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
body{margin:0px;}
svg {
border:solid 1px #666;
overflow:hidden;
}
circle {fill:#ccc;stroke:#000;pointer-events:none;}
#button {position:absolute;top:10px;left:400px;}
#title {position:absolute;top:12px;left:0px;width:500px;text-align:center;}
.btn { display:inline-block;*display:inline;/* IE7 inline-block hack */ *zoom:1;padding:4px 10px 4px;margin-bottom:0;font-size:13px;line-height:18px;color:#333333;text-align:center;text-shadow:0 1px 1px rgba(255,255,255,0.75);vertical-align:middle;background-color:#f5f5f5;background-image:-moz-linear-gradient(top,#ffffff,#e6e6e6);background-image:-ms-linear-gradient(top,#ffffff,#e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#e6e6e6));background-image:-webkit-linear-gradient(top,#ffffff,#e6e6e6);background-image:-o-linear-gradient(top,#ffffff,#e6e6e6);background-image:linear-gradient(top,#ffffff,#e6e6e6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#e6e6e6',GradientType=0);border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:dximagetransform.microsoft.gradient(enabled=false);border:1px solid #cccccc;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);cursor:pointer;*margin-left:.3em;} .btn:hover,.btn:active,.btn.active,.btn.disabled,.btn[disabled] { background-color:#e6e6e6;} .btn:active,.btn.active { background-color:#cccccc \9;} .btn:first-child { *margin-left:0;} .btn:hover { color:#333333;text-decoration:none;background-color:#e6e6e6;background-position:0 -15px;-webkit-transition:background-position 0.1s linear;-moz-transition:background-position 0.1s linear;-ms-transition:background-position 0.1s linear;-o-transition:background-position 0.1s linear;transition:background-position 0.1s linear;} .btn:focus { outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;} .btn.active,.btn:active { background-image:none;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);background-color:#e6e6e6;background-color:#d9d9d9 \9;outline:0;} .btn.disabled,.btn[disabled] { cursor:default;background-image:none;background-color:#e6e6e6;opacity:0.65;filter:alpha(opacity=65);-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .btn-mini { padding:2px 6px;font-size:11px;line-height:14px;}
}
svg {border:1px solid black;}
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<div id="chart" style="width:500px;height:250px"> <br/>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="200">
</svg>
<div id="title">Movement</div>
<button class="btn btn-mini" id="button">Transition</button>
</div>
</head>
<body>
<script type="text/javascript">
var w = 500;
var h = 300;
var padding = 30;
var dataset = [];
var numDataPoints = 50; //Number of dummy data points to create
var xRange = Math.random() * 1000; //Max range of new x values
var yRange = Math.random() * 1000; //Max range of new y values
for (var i = 0; i < numDataPoints; i++) {
var newNumber1 = Math.round(Math.random() * xRange); //Random integer
var newNumber2 = Math.round(Math.random() * yRange); //Random integer
dataset.push([newNumber1, newNumber2]);
}
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([h - padding, padding]);
var rScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([2, 5]);
//Defining X axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(6);
//Defining Y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(6);
//SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Creating circles
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", function(d) {
return rScale(d[1]);
});
//Create X axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
//Create Y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
</script>
<script>
data={
shapes:[
{
type:"path",
i:{
attr:{
"d":"m 0,-60 l 20,40 l 40,20 l -40,20 l -20,40 l -20,-40 l -40,-20 l 40,-20 z",
"transform":"translate(60,120)"
},
style:{stroke:"green",fill:"white"}
}, // initial status
transition:{
attr:{
"d":"m 0,-60 l 40,20 l 20,40 l -20,40 l -40,20 l -40,-20 l -20,-40 l 20,-40 z",
"transform":"translate(440,120) rotate(180)"
},
style:{stroke:"white",fill:"yellow"},
next:{
type:"circle",
attr:{cx:440,cy:120,r:250},
style:{fill:"green",opacity:0},
next:{
attr:{r:0},
style:{fill:"red",opacity:1},
next:{remove:true}
}
}
}
}
]
};
var svg=d3.select("svg");
svg.selectAll(".vline").data(d3.range(26)).enter()
.append("line")
.attr("x1",function(d){return d*20;})
.attr("x2",function(d){return d*20;})
.attr("y1",function(d){return 40;})
.attr("y2",function(d){return 250;})
.style("stroke","#eee");
svg.selectAll(".vline").data(d3.range(2,13)).enter()
.append("line")
.attr("y1",function(d){return d*20;})
.attr("y2",function(d){return d*20;})
.attr("x1",function(d){return 0;})
.attr("x2",function(d){return 500;})
.style("stroke","#eee");
var button=d3.select("#button");
if (data.button==="none") {button.remove();}
var mode=0;
var modes=[{state:"i",title:"StartTransition"},{state:"transition",title:"ResetPosition"}];
d3.select("#title").html(data.title);
data.shapes.forEach(function(d,i) {
var myshape=svg.append(d.type).attr("id","s"+i); // type of shape used
var state=d.i; // noting that these are the initial state.
set(myshape,state);
})
button.on("click",function() {
mode=1-mode;
button.html(modes[mode].title);
data.shapes.forEach(change)
});
function change(d,i){
var state=d[modes[mode].state];
var myshape=svg.select("#s"+i).transition().duration(state.duration||1000).delay(state.delay||0).ease(state.ease||"cubic-in-out");
set(myshape,state);
}
function set(selection,state,createTransition) {
if(state.remove) {
selection.remove();return;
}
d3.keys(state.attr).forEach(function(a) {
selection.attr(a, state.attr[a]); // attributes
});
if (state.text) {
selection.text(state.text);
};
d3.keys(state.style).forEach(function(s) {
selection.style(s, state.style[s]); // style properties
});
if(state.next) {
var next=state.next;
if (next.type) {
selection.each("end",function() {
set(svg.append(next.type),next,true); // creating a new shape
})
}
else {
if(createTransition) {
selection=selection.transition().duration(0);
}
selection.each("end",function() {
set(d3.select(this).transition().duration(next.duration||1000).delay(next.delay||0).ease(state.ease||"cubic-in-out"),next);
});
}
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment