Skip to content

Instantly share code, notes, and snippets.

@annabsmylie

annabsmylie/README.md

Last active October 27, 2015 03:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save annabsmylie/fdd5157ecbc5014d25fd to your computer and use it in GitHub Desktop.
Save annabsmylie/fdd5157ecbc5014d25fd to your computer and use it in GitHub Desktop.
Download ZIP
Selfies: confidence vs. smiling
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script 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;
stroke-width: 2;
shape-rendering: crispEdges;
}
.axis text {
font-family: helvetica;
font-size: 11px;
}
circle {
fill: #B2B2B2;
fill-opacity: .5;
}
circle:hover {
-moz-transition: all 0.1s;
-o-transition: all 0.1s
-webkit-transition: all 0.1s;
transition: all 0.1s;
fill: #FFCC00;
}
#tooltip {
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 12px;
line-height: 20px;
}
p {
font-family: sans-serif;
font-size: 10px;
/*padding: {top: 1000px, right: 0px, bottom: 0px, left: 1000px};*/
/*font-style: italic;*/
}
#title {
font-family:helvetica;
font-size: 12px;
/*text-transform: uppercase;*/
}
.x.label {
font-family: helvetica;
font-size: 10px;
}
.y.label {
font-family: helvetica;
font-size: 10px;
}
</style>
</head>
<body>
<p id="info">A visualization using <a href="http://selfiecity.net/">data published by selfiecity</a>.</p>
<p id="click">—Click to update value range—</p><p id="click2">—Click to zoom in on new value range—</p>
<div id="tooltip" class="hidden">
<p><strong>xy coordinates</strong></p>
<p><span id="value">100</span>%</p>
</div>
<script type="text/javascript">
var w = 850;
var h = 400;
var padding = 50;
//static dataset
var dataset = [
[.6, .93], [.6, .92], [.58, .95], [.59, .90], [.60, .91]
];
//format tick labels
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 xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5)
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5)
//create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//create 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]);})
//r: function(d) {return Math.sqrt(h - d[1]);}
.attr("r", function(d) {return rScale(d[1]);})
.append("title")
.text(function(d) {
return "xy coordinates: " + d[0] + ", " + d[1];
})
//Create SVG element tooltips
.on("mouseover", function(d) {
//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("cx")) + xScale.rangeBand() / 2;
var yPosition = parseFloat(d3.select(this).attr("cy")) + 14;
//Create the tooltip label
svg.append("text")
.attr("id", "tooltip")
.attr("x", xPosition)
.attr("y", yPosition)
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-weight", "bold")
.attr("font-size", "11px")
.attr("fill", "black")
.text(d);
})
.on("mouseout", function() {
//Remove the tooltip
d3.select("#tooltip").remove();
});
//create X axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
//label X axis
svg.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", w - 100)
.attr("y", h - 60)
.text("smile rating");
//create Y axis
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("y", 60)
.attr("dy", 10)
.attr("x", -50)
.attr("transform", "rotate(-90)")
.text("confidence rating");
//1. On click, update with new data
d3.select("#click")
.on("click", function() {
//New values for dataset
var numValues = dataset.length;
//Count original length of dataset
var maxRange = Math.random() * 1000;
//Max range of new values
dataset = [ [.45, .51], [.47, .55], [.44, .53], [.45, .53], [.48, .54]
];
//Update all circles
svg.selectAll("circle")
.data(dataset)
.transition()
.duration(1000)
.each("start", function () {
d3.select(this) // Selects 'this', the current element
//.transition() -- Will override first transition
//.duration(250)
.attr("fill", "#FFCC00") //Sets fill of 'this' to magenta
.attr("r", 9); //Sets radius of 'this' to 3
})
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
/*.each("end", function(){
d3.select(this)*/
.transition()
.duration(1000)
.attr("fill", "black")
.attr("r", 9);
});
//2. On click, update with new data
d3.select("#click2")
.on("click", function() {
//New values for dataset
var numValues = dataset.length;
//Count original length of dataset
var maxRange = Math.random() * 1000;
//Max range of new values
dataset = [ [.45, .51], [.47, .55], [.44, .53], [.45, .53], [.48, .54]
];
//Update scale domains
xScale.domain([0, d3.max(dataset, function(d) { return d[0]; })]);
yScale.domain([0, d3.max(dataset, function(d) { return d[1]; })]);
//Update all circles
svg.selectAll("circle")
.data(dataset)
.transition()
.duration(1000)
.each("start", function () {
d3.select(this) // Selects 'this', the current element
//.transition() -- Will override first transition
//.duration(250)
.attr("fill", "#FFCC00") //Sets fill of 'this' to magenta
.attr("r", 12); //Sets radius of 'this' to 3
})
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
/*.each("end", function(){
d3.select(this)*/
.transition()
.duration(1000)
.attr("fill", "black")
.attr("r", 12);
//Update x-axis
svg.select(".x.axis")
.transition()
.ease("bounce")
.duration(1000)
.call(xAxis);
//Update y-axis
svg.select(".y.axis")
.transition()
.ease("bounce")
.duration(1000)
.call(yAxis);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment