Skip to content

Instantly share code, notes, and snippets.

@masakick

masakick/index.html

Last active August 29, 2015 14:26
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 masakick/ff81ae0b4034bd53d758 to your computer and use it in GitHub Desktop.
Save masakick/ff81ae0b4034bd53d758 to your computer and use it in GitHub Desktop.
Download ZIP
TOKYO2020 Interactive
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 800,
height = 360;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var a = 120;
var r = Math.sqrt(1.5*1.5+0.5*0.5)*a;
var c1r = r;
var c2r = r;
var defs = svg.append('defs');
var cliprect = defs
.append('rect')
.attr('id', 'cliprect')
.attr('x', 0)
.attr('y', 0)
.attr('width', 3*a)
.attr('height', 3*a)
defs.append('clipPath')
.attr('id', 'clip')
.append('use')
.attr('xlink:href', '#cliprect');
function drawLogo(_a){
var logo = svg.append("g").attr("transform", "translate(" + (0) + "," + (0) + ")");
logo.append("rect").attr("class", "lefttoprect").attr("x",0).attr("y",0).attr("width",1.5*_a).attr("height",1.5*_a).attr("fill","#FFD700")
.on("mouseover", function(){ transformright();})
.on("mouseout",function(){ transformdefault();});
logo.append("rect").attr("class", "rightbottomrect").attr("x",1.5*_a).attr("y",1.5*_a).attr("width",1.5*_a).attr("height",1.5*_a).attr("fill","#808080")
.on("mouseover", function(){ transformleft();})
.on("mouseout",function(){ transformdefault();});
var center = logo.append("g").attr("transform", "translate(" + (1.5*_a) + "," + (1.5*_a) + ")");
var arc1 = d3.svg.arc().innerRadius(0).outerRadius(r).startAngle(1.5*Math.PI).endAngle(2*Math.PI);
center.append("path").attr("d",arc1).attr("class", "centercircle1").attr("fill","#FFFFFF");
var arc2 = d3.svg.arc().innerRadius(0).outerRadius(r).startAngle(0.5*Math.PI).endAngle(Math.PI);
center.append("path").attr("d",arc2).attr("class", "centercircle2").attr("fill","#FFFFFF");
logo.append("rect").attr("class", "centerrect").attr("x",_a).attr("y",0).attr("width",_a).attr("height",_a*3).attr("fill","#000000")
.on("mouseover", function(){ transformleftright();})
.on("mouseout",function(){ transformdefault();});
logo.append("circle").attr("class", "righttopcircle").attr("cx",2.5*_a).attr("cy",0.5*_a).attr("r",0.5*_a).attr("fill","#FF0000")
.on("mouseover", function(){ transformleft();})
.on("mouseout",function(){ transformdefault();})
}
function drawLogoPara(_a){
var logo = svg.append("g").attr("transform", "translate(" + (3.5*_a) + "," + (0) + ")")
logo.append("rect").attr("x",0).attr("y",0).attr("width",3*_a).attr("height",3*_a).attr("fill","#000000")
logo.append("rect").attr("class", "lefttoprect").attr("x",0).attr("y",0).attr("width",1.5*_a).attr("height",1.5*_a).attr("fill","#FFD700")
.on("mouseover", function(){ transformright();})
.on("mouseout",function(){ transformdefault();});
logo.append("rect").attr("class", "rightbottomrect").attr("x",1.5*_a).attr("y",1.5*_a).attr("width",1.5*_a).attr("height",1.5*_a).attr("fill","#808080")
.on("mouseover", function(){ transformleft();})
.on("mouseout",function(){ transformdefault();});
var center = logo.append("g").attr("transform", "translate(" + (1.5*_a) + "," + (1.5*_a) + ")");
var arc1 = d3.svg.arc().innerRadius(0).outerRadius(r).startAngle(1.5*Math.PI).endAngle(2*Math.PI);
center.append("path").attr("d",arc1).attr("class", "centercircle1").attr("fill","#000000");
var arc2 = d3.svg.arc().innerRadius(0).outerRadius(r).startAngle(0.5*Math.PI).endAngle(Math.PI);
center.append("path").attr("d",arc2).attr("class", "centercircle2").attr("fill","#000000");
logo.append("rect").attr("class", "centerrect").attr("x",_a).attr("y",0).attr("width",_a).attr("height",_a*3).attr("fill","#FFFFFF")
.on("mouseover", function(){ transformleftright();})
.on("mouseout",function(){ transformdefault();});
logo.append("circle").attr("class", "righttopcircle").attr("cx",2.5*_a).attr("cy",0.5*_a).attr("r",0.5*_a).attr("fill","#FF0000")
.on("mouseover", function(){ transformleft();})
.on("mouseout",function(){ transformdefault();})
logo.attr('clip-path', 'url(#clip)');
}
function transformleft(){
svg.selectAll(".centercircle1").transition().duration(500).ease("circle-out")
.attrTween("d", function(d){
var interpolate = d3.interpolate(
{outerRadius : c1r},{outerRadius : Math.sqrt(1.5*1.5+0.75*0.75)*a}
);
return function(t){
var arc = d3.svg.arc().innerRadius(0).startAngle(1.5*Math.PI).endAngle(2*Math.PI);
c1r = interpolate(t).outerRadius;
return arc(interpolate(t));
}
})
svg.selectAll(".centercircle2").transition().duration(500).ease("circle-out")
.attrTween("d", function(d){
var interpolate = d3.interpolate(
{outerRadius : c2r},{outerRadius : 1.5*a}
);
return function(t){
var arc = d3.svg.arc().innerRadius(0).startAngle(0.5*Math.PI).endAngle(Math.PI);
c2r = interpolate(t).outerRadius;
return arc(interpolate(t));
}
})
svg.selectAll(".centerrect").transition().duration(500).ease("circle-out").attr("x",0.75*a).attr("width",0.75*a)
svg.selectAll(".righttopcircle").transition().duration(500).ease("circle-out").attr("cx",2.25*a).attr("cy",0.75*a).attr("r",0.75*a)
}
function transformright(){
svg.selectAll(".centercircle1").transition().duration(500).ease("circle-out")
.attrTween("d", function(d){
var interpolate = d3.interpolate(
{outerRadius : c1r},{outerRadius : 1.5*a}
);
return function(t){
var arc = d3.svg.arc().innerRadius(0).startAngle(1.5*Math.PI).endAngle(2*Math.PI);
c1r = interpolate(t).outerRadius;
return arc(interpolate(t));
}
})
svg.selectAll(".centercircle2").transition().duration(500).ease("circle-out")
.attrTween("d", function(d){
var interpolate = d3.interpolate(
{outerRadius : c2r},{outerRadius : Math.sqrt(1.5*1.5+0.75*0.75)*a}
);
return function(t){
var arc = d3.svg.arc().innerRadius(0).startAngle(0.5*Math.PI).endAngle(Math.PI);
c2r = interpolate(t).outerRadius;
return arc(interpolate(t));
}
})
svg.selectAll(".centerrect").transition().duration(500).ease("circle-out").attr("x",1.5*a).attr("width",0.75*a)
svg.selectAll(".righttopcircle").transition().duration(500).ease("circle-out").attr("cx",2.625*a).attr("cy",0.375*a).attr("r",0.375*a)
}
function transformleftright(){
svg.selectAll(".centercircle1").transition().duration(500).ease("circle-out")
.attrTween("d", function(d){
var interpolate = d3.interpolate(
{outerRadius : c1r},{outerRadius : Math.sqrt(1.5*1.5+0.75*0.75)*a}
);
return function(t){
var arc = d3.svg.arc().innerRadius(0).startAngle(1.5*Math.PI).endAngle(2*Math.PI);
c1r = interpolate(t).outerRadius;
return arc(interpolate(t));
}
})
svg.selectAll(".centercircle2").transition().duration(500).ease("circle-out")
.attrTween("d", function(d){
var interpolate = d3.interpolate(
{outerRadius : c2r},{outerRadius : Math.sqrt(1.5*1.5+0.75*0.75)*a}
);
return function(t){
var arc = d3.svg.arc().innerRadius(0).startAngle(0.5*Math.PI).endAngle(Math.PI);
c2r = interpolate(t).outerRadius;
return arc(interpolate(t));
}
})
svg.selectAll(".centerrect").transition().duration(500).ease("circle-out").attr("x",0.75*a).attr("width",1.5*a)
svg.selectAll(".righttopcircle").transition().duration(500).ease("circle-out").attr("cx",2.625*a).attr("cy",0.375*a).attr("r",0.375*a)
}
function transformdefault(){
svg.selectAll(".centercircle1").transition().duration(500).ease("circle-out")
.attrTween("d", function(d){
var interpolate = d3.interpolate(
{outerRadius : c1r},{outerRadius : r}
);
return function(t){
var arc = d3.svg.arc().innerRadius(0).startAngle(1.5*Math.PI).endAngle(2*Math.PI);
c1r = interpolate(t).outerRadius;
return arc(interpolate(t));
}
})
svg.selectAll(".centercircle2").transition().duration(500).ease("circle-out")
.attrTween("d", function(d){
var interpolate = d3.interpolate(
{outerRadius : c2r},{outerRadius : r}
);
return function(t){
var arc = d3.svg.arc().innerRadius(0).startAngle(0.5*Math.PI).endAngle(Math.PI);
c2r = interpolate(t).outerRadius;
return arc(interpolate(t));
}
})
svg.selectAll(".centerrect").transition().duration(500).ease("circle-out").attr("x",a).attr("width",a)
svg.selectAll(".righttopcircle").transition().duration(500).ease("circle-out").attr("cx",2.5*a).attr("cy",0.5*a).attr("r",0.5*a)
}
drawLogo(a);
drawLogoPara(a);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment