Skip to content

Instantly share code, notes, and snippets.

@mforando

mforando/.block

Created December 11, 2019 18:43
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 mforando/ea9187f1b469fa4bb19b0ca365c1ce5b to your computer and use it in GitHub Desktop.
Save mforando/ea9187f1b469fa4bb19b0ca365c1ce5b to your computer and use it in GitHub Desktop.
Download ZIP
SVG Example
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
body { margin:0;top:0;right:0;bottom:0;left:0; }
#flexcont{
display:flex;
}
#svgcont{
flex:1;
}
#htmlcontent{
flex:1;
}
#htmlcontent div{
display:block;
}
</style>
</head>
<div id="flexcont">
<div id="svgcont">
<svg width="500px" height="500px">
<circle id="face" r=230 cx=250 cy=250 fill="yellow" stroke=black stroke-width=10px></circle>
<circle id="lefteye" r=10 cx=180 cy=150 fill="black" stroke=black stroke-width=10px></circle>
<circle id="righteye" r=10 cx=320 cy=150 fill="black" stroke=black stroke-width=10px></circle>
<path id="mouth" d="M120,280 C100,400 400,400 380,280" fill="none" stroke="#000" stroke-width="8px"></path>
</svg>
</div>
<div id="htmlcontent">
<h4>SVG Content:</h4>
</div>
</div>
<body>
<script>
//http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg
console.log(d3.select('svg'),d3.select('svg').html().split('\n'))
var htmllines = d3.select('#svgcont').html().split('\n');
var div = d3.select("#htmlcontent")
//render an initial container for the svg.
var svgcont = div.append('div')
var htmltext = div.selectAll('div').data(htmllines)
htmltext.enter()
.append("div")
.style('padding-left',function(d,i){
if(i <= 1 || i >= htmllines.length -2){return 0}
else{return '20px'}
})
.text((d)=>{return d})
.style('display','block')
d3.select("#face").on('mouseover',function(){
d3.select("#htmlcontent").selectAll('div').style('opacity',function(d,i){
if(i==2){return 1}
else{return .4}
})
})
d3.select("#lefteye").on('mouseover',function(){
d3.select("#htmlcontent").selectAll('div').style('opacity',function(d,i){
if(i==3){return 1}
else{return .4}
})
})
d3.select("#righteye").on('mouseover',function(){
d3.select("#htmlcontent").selectAll('div').style('opacity',function(d,i){
if(i==4){return 1}
else{return .4}
})
})
d3.selectAll("#face, #righteye, #lefteye, #mouth")
.on('mouseout',function(){
d3.select("#htmlcontent").selectAll('div').style('opacity',function(d,i){
return 1
})
})
d3.select("#mouth").on('mouseover',function(){
d3.select("#htmlcontent").selectAll('div').style('opacity',function(d,i){
if(i==5){return 1}
else{return .4}
})
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment