Skip to content

Instantly share code, notes, and snippets.

@DarienLiang

DarienLiang/.block

Last active November 23, 2016 18:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DarienLiang/4f273a510d5bd87d3a250b54d638a0eb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DarienLiang/4f273a510d5bd87d3a250b54d638a0eb to your computer and use it in GitHub Desktop.
Download ZIP
Demo1
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html>
<title>Demos</title>
<meta charset="utf-8">
<style>
/* CSS part */
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
h1 {
color: #ffffff;
font-family: 'Raleway';
font-weight: normal;
font-size: 1.75em;
letter-spacing: .2em;
line-height: 1.1em;
margin:0px;
text-align: center;
text-transform: uppercase;
}
#container {
width:800px;
}
#header {
width:800px;
height: 50px;
padding: 5px;
background: #1abc9c;
}
#sidebar {
height:400px;
width:140px;
background: #1abc9c;
float:left;
font-family: 'Raleway';
font-size: 11px;
padding: 5px;
}
select, button {
margin: 5px;
font-family: 'Raleway'
font-size: 20px;
}
#content {
background-color:#ffffff;
height:400px;
width:650px;
float:left;
}
#footer {
width:800px;
height: 50px;
background: #1abc9c;
float:left;
}
circle {
stroke: #1abc9c;
stroke-width: 2;
fill: white;
}
.d3-tip {
font-family: 'Raleway';
line-height: 1;
padding: 1px;
background: transparent;
color: #000;
border-radius: 2px;
}
.axis path, .axis line {
fill: none;
stroke: grey;
shape-rendering: crispEdges;
}
.axis text {
font-family: 'Raleway';
font-size: 11px;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<div id = "container">
<div id ="header">
<h1>Demo Scatterplot</h1>
</div>
<div id ="sidebar">
X-aixs:
<select id="xAxisVar" onchange="reDraw()" >
<option></option>
<option value="physicalstrength" selected="selected">physical strength</option>
<option value="fearfactor" >fear factor</option>
<option value="killingpower">killing power</option>
<option value="horrorrating">horror rating</option>
</select>
<br>
Y-axis:
<select id="yAxisVar" onchange="reDraw()">
<option></option>
<option value="physicalstrength">physical strength</option>
<option value="fearfactor" selected="selected">fear factor</option>
<option value="killingpower">killing power</option>
<option value="horrorrating">horror rating</option>
</select>
</div>
<div id ="content">
<svg height="400" width="650">
</svg>
<script>
// define data
var horror = [{
"name": "ape man",
"physicalstrength": 20,
"fearfactor": 7,
"killingpower": 12,
"horrorrating": 4,
"cluster": 1
}, {
"name": "godzilla",
"physicalstrength": 3,
"fearfactor": 5,
"killingpower": 4,
"horrorrating": 8,
"cluster": 2
}, {
"name": "the ghoul",
"physicalstrength": 7,
"fearfactor": 12,
"killingpower": 2,
"horrorrating": 7,
"cluster": 1
}, {
"name": "the freak",
"physicalstrength": 9,
"fearfactor": 2,
"killingpower": 1,
"horrorrating": 17,
"cluster": 1
}, {
"name": "dracula",
"physicalstrength": 4,
"fearfactor": 17,
"killingpower": 5,
"horrorrating": 16,
"cluster": 2
}, {
"name": "the hangman",
"physicalstrength": 2,
"fearfactor": 4,
"killingpower": 13,
"horrorrating": 8,
"cluster": 2
}, {
"name": "incredible melting man",
"physicalstrength": 3,
"fearfactor": 8,
"killingpower": 15,
"horrorrating": 6,
"cluster": 1
}, {
"name": "the thing",
"physicalstrength": 19,
"fearfactor": 4,
"killingpower": 11,
"horrorrating": 7,
"cluster": 1
}];
// set constants
var w = 420,
h = 400,
padding = 30;
// create adaptable scales
var xScale = d3.scale.linear()
.domain([0, d3.max(horror, function(d) { return d3.max([d.physicalstrength, d.fearfactor, d.killingpower, d.horrorrating]); })])
.range([padding, w - padding]);
var yScale = d3.scale.linear()
.domain([0, d3.max(horror, function(d) { return d3.max([d.physicalstrength, d.fearfactor, d.killingpower, d.horrorrating]); })])
.range([h - padding, padding]);
// notice it is from large to small because its origin is in top left corner
// select the svg
var svg = d3.select("svg");
// define the tooltip
var tip = d3.tip()
.attr("class", "d3.tip")
.offset([-10, 0])
.html(function(d) { return d.name; });
// define elements in the svg
var diag_circles = svg.selectAll("circle")
.data(horror)
.enter()
.append("circle")
.attr("cx", function(d) { return xScale(d.physicalstrength); })
.attr("cy", function(d) { return yScale(d.fearfactor); })
.attr("r", 10)
.style("stroke", function(d) {
if (d.cluster === 1) { return "#1abc9c"; }
else { return "gray"; }
})
.call(tip)
.on("mouseover", tip.show)
.on("mouseout", tip.hide);
// set up the axes
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
// add the axes to svg
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0, " + (h - padding) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ", 0)")
.call(yAxis);
function reDraw() {
xVar = document.getElementById('xAxisVar').value;
yVar = document.getElementById('yAxisVar').value;
d3.selectAll("circle")
.transition()
.duration(1000)
.attr("cx", function (d) {
return eval("xScale(d." + xVar + ");");
})
.attr("cy", function (d) {
return eval("yScale(d." + yVar + ");");
})
.attr("opacity", 0.5);
}
</script>
</div>
<div id ="footer">
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment