Skip to content

Instantly share code, notes, and snippets.

@kutovova

kutovova/index.html

Last active January 4, 2016 13:49
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 kutovova/8630556 to your computer and use it in GitHub Desktop.
Save kutovova/8630556 to your computer and use it in GitHub Desktop.
Download ZIP
Dots + margin & color
Raw
index.html
<html>
<body>
<script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>
<script>
data = [
{ 'a': 1, 'b': 2 },
{ 'a': 42, 'b': 7},
{ 'a': 15, 'b': 3},
{ 'a': 32, 'b': 8},
{ 'a': 26, 'b': 9},
{ 'a': 18, 'b': 5}
]
var margin = {top: 20, right: 10, bottom: 20, left: 10};
var fullWidth = 500, fullHeight = 500;
var width = fullWidth - margin.left - margin.right,
height = fullHeight - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain ([0,5])
.range ([0,300]);
var y = d3.scale.linear()
.domain ([0,50])
.range ([300,0]);
var color = d3.scale.linear()
.domain ([0,10])
.range (['#500','#F00']);
d3.select('body')
.append('svg')
.attr('width', fullWidth)
.attr('height', fullHeight)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.selectAll('circle')
.data(data).enter()
.append('circle')
.attr('r', 5)
.attr('cx', 0)
.attr('cy', 0)
.on('click', function(d,i) {
d3.selectAll('circle').transition().duration(250)
.attr('cx', function(d,i) {return x(i)})
.attr('cy', function(d,i) {return y(d.a)})
})
.attr('fill', function(d,i) {return color(d.b)})
.on('mouseover',
function(d,i) {d3.select(this).attr('opacity', 0.5)}
)
.on('mouseout',
function(d,i) {d3.select(this).attr('opacity', 1)}
)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment