Skip to content

Instantly share code, notes, and snippets.

@juliettepardue

juliettepardue/README.md

Last active February 7, 2016 00:06
Show Gist options
  • Save juliettepardue/48134048d87757639b9d to your computer and use it in GitHub Desktop.
Save juliettepardue/48134048d87757639b9d to your computer and use it in GitHub Desktop.
Download ZIP
VI3
Raw
README.md

#Juliette Pardue

##Learned from D3 Tutorial

  1. For scatterplots, how to use the radius attribute to encode size.
  2. Using scales to specify a valid range where data values can be mapped to. So all data values will fall into the specified range after the mapping or normalizing has been applied.
  3. How to format aesthetically pleasing axis as true values or percentages. However, I preferred the true values for this example since the percentages didn't make sense.
  4. How to create transitions by specifying the ending attributes of the object and the transition effects.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.axis path, .axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
svg {overflow:hidden;}
#button {display:inline-block;}
.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>
</head>
<body style="text-align:center;margin-top:5px;">
<div id="chart_a" style="width:450px;height:250px;display:inline-block;text-align:center;"></div>
</br>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
//Width and height
var w = 450;
var h = 250;
var padding = 30;
//Dynamic, random dataset
var dataset = []; //Initialize empty array
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++) { //Loop numDataPoints times
var newNumber1 = Math.round(Math.random() * xRange); //New random integer
var newNumber2 = Math.round(Math.random() * yRange); //New random integer
dataset.push([newNumber1, newNumber2]); //Add new number to array
}
//Create scale functions
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]);
//var formatAsPercentage = d3.format(".1%");
//Define X axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5)
/*.tickFormat(formatAsPercentage)*/;
//Define Y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5)
/*.tickFormat(formatAsPercentage)*/;
//Create SVG element
var svg_a = d3.select("#chart_a")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create circles
svg_a.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_a.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
//Create Y axis
svg_a.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
</script>
<div id="chart_b" style="width:500px;height:250px;display:inline-block;text-align:center;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="200"></svg>
<button class="btn btn-mini" id="button">Transition</button>
</div>
<script>
data={
title:"All combined!",
shapes:[{
type:"path",
init:{
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:"blue",fill:"white"}
},
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:"blue"},
next:{
type:"circle",
attr:{cx:440,cy:120,r:250},
style:{fill:"green",opacity:0},
next:{
attr:{r:0},
style:{fill:"yellow",opacity:1},
next:{remove:true}
}
}
}
}]
};
var svg_b=d3.select("#chart_b").select("svg");
svg_b.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_b.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:"init",title:"Transition"},{state:"transition",title:"Reset"}];
d3.select("#title").html(data.title);
data.shapes.forEach(function(d,i) {
// here we create shapes according to the parameters of the data file.
var myshape=svg_b.append(d.type).attr("id","s"+i); // taking into account the type of the shape,
var state=d.init; // 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_b.select("#s"+i).transition().duration(state.duration||1000).delay(state.delay||0).ease(state.ease||"cubic-in-out");
// so transition if going through a transition, reset if going through a reset
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]); // all of its attributes
});
if (state.text) {
selection.text(state.text);
};
d3.keys(state.style).forEach(function(s) {
selection.style(s, state.style[s]); // and all of its style properties
});
if(state.next) {
var next=state.next;
if (next.type) {
selection.each("end",function() {
set(svg_b.append(next.type),next,true); // we are 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