Skip to content

Instantly share code, notes, and snippets.

@steltenpower

steltenpower/README.md

Last active June 2, 2016 02:15
Show Gist options
  • Save steltenpower/767f390c5633533210b1dcef959504d3 to your computer and use it in GitHub Desktop.
Save steltenpower/767f390c5633533210b1dcef959504d3 to your computer and use it in GitHub Desktop.
Download ZIP
edu avenue
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
</style>
</head>
<body>
<script>
var svg = d3.select("body").append("svg")
var defs=svg.append("defs")
defs.append("path").attr({id:"univ",d:"M832 0l960 384v128h-128q0 26-20.5 45t-48.5 19h-1526q-28 0-48.5-19t-20.5-45h-128v-128zm-704 640h256v768h128v-768h256v768h128v-768h256v768h128v-768h256v768h59q28 0 48.5 19t20.5 45v64h-1664v-64q0-26 20.5-45t48.5-19h59v-768zm1595 960q28 0 48.5 19t20.5 45v128h-1920v-128q0-26 20.5-45t48.5-19h1782z",transform:"scale(0.9)translate(0,130)scale(.52)translate(13,1)scale(.1)",fill:"firebrick"})
defs.append("line").attr({id:"tick",x1:95,y1:100,x2:95,y2:130,stroke:"darkgrey","stroke-width":5})
svg.append("ellipse").attr({cx:500,cy:200,rx:435,ry:50,fill:"lightgreen"})
var g=svg.append("g").attr("transform","translate(100,0)")
g.append("use").attr({"xlink:href":"#univ"})
//g.append("use").attr({"xlink:href":"#tick"})
//g.append("text").attr({x:100,y:90,"text-anchor":"middle","font-weight":"bold","font-size":"200%"}).text("12.5%")
var g=svg.append("g").attr("transform","translate(200,0)")
g.append("use").attr({"xlink:href":"#univ"})
//g.append("use").attr({"xlink:href":"#tick"})
//g.append("text").attr({x:100,y:90,"text-anchor":"middle","font-weight":"bold","font-size":"200%"}).text("25%")
var g=svg.append("g").attr("transform","translate(300,0)")
g.append("use").attr({"xlink:href":"#univ"})
//g.append("use").attr({"xlink:href":"#tick"})
//g.append("text").attr({x:100,y:90,"text-anchor":"middle","font-weight":"bold","font-size":"200%"}).text("37.5%")
var g=svg.append("g").attr("transform","translate(400,0)")
g.append("use").attr({"xlink:href":"#univ"})
//g.append("use").attr({"xlink:href":"#tick"})
//g.append("text").attr({x:100,y:90,"text-anchor":"middle","font-weight":"bold","font-size":"200%"}).text("50%")
var g=svg.append("g").attr("transform","translate(500,0)")
g.append("use").attr({"xlink:href":"#univ"})
//g.append("use").attr({"xlink:href":"#tick"})
//g.append("text").attr({x:100,y:90,"text-anchor":"middle","font-weight":"bold","font-size":"250%"}).text("62.5%")
var g=svg.append("g").attr("transform","translate(600,0)")
g.append("use").attr({"xlink:href":"#univ"})
g.append("use").attr({"xlink:href":"#tick"})
g.append("text").attr({x:100,y:90,"text-anchor":"middle","font-weight":"bold","font-size":"250%"}).text("75%")
//var g=svg.append("g").attr("transform","translate(700,0)")
//g.append("use").attr({"xlink:href":"#univ"})
//g.append("use").attr({"xlink:href":"#tick"})
//g.append("text").attr({x:100,y:90,"text-anchor":"middle","font-weight":"bold","font-size":"250%"}).text("87.5%")
//var g=svg.append("g").attr("transform","translate(800,0)")
//g.append("use").attr({"xlink:href":"#univ"})
//g.append("use").attr({"xlink:href":"#tick"})
//g.append("text").attr({x:100,y:90,"text-anchor":"middle","font-weight":"bold","font-size":"250%"}).text("100%")
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment