Skip to content

Instantly share code, notes, and snippets.

@jonsadka

jonsadka/.block

Last active August 28, 2016 18:55
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jonsadka/baa854ad6a770a46b924 to your computer and use it in GitHub Desktop.
Save jonsadka/baa854ad6a770a46b924 to your computer and use it in GitHub Desktop.
Download ZIP
Layering svg Experiment
Raw
.block
license: mit
Raw
README.md

Exploration into a a possible svg layering issue in Chrome

Raw
data.json
{
"data": [
{
"end": 151,
"start": 0,
"z": 1
},
{
"end": 21,
"start": 0,
"z": 2
},
{
"end": 147,
"start": 21,
"z": 2
},
{
"end": 151,
"start": 147,
"z": 2
},
{
"end": 29,
"start": 21,
"z": 3
},
{
"end": 147,
"start": 29,
"z": 3
},
{
"end": 42,
"start": 29,
"z": 4
},
{
"end": 147,
"start": 145,
"z": 4
},
{
"end": 145,
"start": 42,
"z": 4
},
{
"end": 145,
"start": 50,
"z": 5
},
{
"end": 50,
"start": 42,
"z": 5
},
{
"end": 63,
"start": 50,
"z": 6
},
{
"end": 143,
"start": 63,
"z": 6
},
{
"end": 145,
"start": 143,
"z": 6
},
{
"end": 71,
"start": 63,
"z": 7
},
{
"end": 143,
"start": 71,
"z": 7
},
{
"end": 141,
"start": 84,
"z": 8
},
{
"end": 143,
"start": 141,
"z": 8
},
{
"end": 84,
"start": 71,
"z": 8
},
{
"end": 92,
"start": 84,
"z": 9
},
{
"end": 141,
"start": 92,
"z": 9
},
{
"end": 139,
"start": 105,
"z": 10
},
{
"end": 105,
"start": 92,
"z": 10
},
{
"end": 141,
"start": 139,
"z": 10
},
{
"end": 113,
"start": 105,
"z": 11
},
{
"end": 139,
"start": 113,
"z": 11
},
{
"end": 137,
"start": 126,
"z": 12
},
{
"end": 139,
"start": 137,
"z": 12
},
{
"end": 126,
"start": 113,
"z": 12
},
{
"end": 134,
"start": 126,
"z": 13
},
{
"end": 137,
"start": 134,
"z": 13
},
{
"end": 137,
"start": 134,
"z": 14
}
]
}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var svg = d3.select('body').append('svg')
.attr('width',width)
.attr('height',height);
d3.json("data.json", function(error, json) {
if (error) return console.error(error);
var maxNumber = json.data[0].end;
var leftPadding = (width - height) / 2;
var scale = d3.scale.linear()
.domain([0,maxNumber])
.range([0,height])
svg.selectAll('circle').data(json.data)
.enter().append('svg:circle')
.attr('cx',function(d,i){
return scale( (d.end-d.start)/2 + d.start ) + leftPadding ;
})
.attr('cy', height / 2)
.attr('r',function(d,i){
return scale( (d.end-d.start)/2 );
})
.style('opacity',0.4)
.style('stroke','purple')
.attr('fill','grey')
.on('mouseenter',function(){
d3.select(this).attr('fill','purple')
})
.on('mouseout',function(){
d3.select(this).attr('fill','grey')
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment