Skip to content

Instantly share code, notes, and snippets.

@auremoser

auremoser/index.html

Last active October 4, 2016 16:44
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 auremoser/2302e34cf80b55123564f96c351a3146 to your computer and use it in GitHub Desktop.
Save auremoser/2302e34cf80b55123564f96c351a3146 to your computer and use it in GitHub Desktop.
Download ZIP
RAW Visualization Template
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>HTML Template | SVA</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- place your stylesheets here in the link rel tags if needed -->
<!-- <link rel="stylesheet" href="" /> -->
<link rel="stylesheet" type="text/css" href="stylesheets/reset.css" />
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#container {
position: relative;
overflow: hidden;
min-width: 500px;
max-width: 1000px;
height: 700px;
text-align: center;
line-height: normal;
z-index: 0;
font-family: Helvetica, sans-serif;
font-size: 12px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="container">
<h2>Film Reviewer</h2>
<p>Hollywood Films ranked by rating and box office draw, where dots are sized according to production budget and colored by genre.</p>
<svg width="847" height="500" xmlns="http://www.w3.org/2000/svg"><g><g class="x axis" transform="translate(0,460)" style="stroke-width: 1px; font-size: 10px; font-family: Arial, Helvetica;"><g class="tick" transform="translate(43.302001999247935,0)" style="opacity: 1;"><line y2="-440" x2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line><text y="3" x="0" dy=".71em" style="text-anchor: middle;">100,000,000</text></g><g class="tick" transform="translate(161.95286511392462,0)" style="opacity: 1;"><line y2="-440" x2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line><text y="3" x="0" dy=".71em" style="text-anchor: middle;">200,000,000</text></g><g class="tick" transform="translate(280.6037282286013,0)" style="opacity: 1;"><line y2="-440" x2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line><text y="3" x="0" dy=".71em" style="text-anchor: middle;">300,000,000</text></g><g class="tick" transform="translate(399.254591343278,0)" style="opacity: 1;"><line y2="-440" x2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line><text y="3" x="0" dy=".71em" style="text-anchor: middle;">400,000,000</text></g><g class="tick" transform="translate(517.9054544579546,0)" style="opacity: 1;"><line y2="-440" x2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line><text y="3" x="0" dy=".71em" style="text-anchor: middle;">500,000,000</text></g><g class="tick" transform="translate(636.5563175726314,0)" style="opacity: 1;"><line y2="-440" x2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line><text y="3" x="0" dy=".71em" style="text-anchor: middle;">600,000,000</text></g><g class="tick" transform="translate(755.2071806873082,0)" style="opacity: 1;"><line y2="-440" x2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line><text y="3" x="0" dy=".71em" style="text-anchor: middle;">700,000,000</text></g><path class="domain" d="M20,-440V0H827V-440" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></path></g><g class="y axis" transform="translate(20,0)" style="stroke-width: 1px; font-size: 10px; font-family: Arial, Helvetica;"><g class="tick" transform="translate(0,460)" style="opacity: 1;"><line x2="807" y2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line><text x="-3" y="0" dy=".32em" style="text-anchor: end;">4.5</text></g><g class="tick" transform="translate(0,411.1111111111111)" style="opacity: 1;"><line x2="807" y2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line><text x="-3" y="0" dy=".32em" style="text-anchor: end;">5.0</text></g><g class="tick" transform="translate(0,362.22222222222223)" style="opacity: 1;"><line x2="807" y2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line><text x="-3" y="0" dy=".32em" style="text-anchor: end;">5.5</text></g><g class="tick" transform="translate(0,313.33333333333337)" style="opacity: 1;"><line x2="807" y2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line><text x="-3" y="0" dy=".32em" style="text-anchor: end;">6.0</text></g><g class="tick" transform="translate(0,264.44444444444446)" style="opacity: 1;"><line x2="807" y2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line><text x="-3" y="0" dy=".32em" style="text-anchor: end;">6.5</text></g><g class="tick" transform="translate(0,215.55555555555554)" style="opacity: 1;"><line x2="807" y2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line><text x="-3" y="0" dy=".32em" style="text-anchor: end;">7.0</text></g><g class="tick" transform="translate(0,166.66666666666669)" style="opacity: 1;"><line x2="807" y2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line><text x="-3" y="0" dy=".32em" style="text-anchor: end;">7.5</text></g><g class="tick" transform="translate(0,117.77777777777783)" style="opacity: 1;"><line x2="807" y2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line><text x="-3" y="0" dy=".32em" style="text-anchor: end;">8.0</text></g><g class="tick" transform="translate(0,68.88888888888891)" style="opacity: 1;"><line x2="807" y2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line><text x="-3" y="0" dy=".32em" style="text-anchor: end;">8.5</text></g><g class="tick" transform="translate(0,20)" style="opacity: 1;"><line x2="807" y2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line><text x="-3" y="0" dy=".32em" style="text-anchor: end;">9.0</text></g><path class="domain" d="M807,20H0V460H807" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></path></g><g class="circle"><circle transform="translate(827,117.77777777777783)" r="20" style="fill: rgb(191, 105, 105); fill-opacity: 0.9;"></circle><text transform="translate(827,117.77777777777783)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">Avatar</text></g><g class="circle"><circle transform="translate(440.9135667086227,127.55555555555554)" r="3.192616278346088" style="fill: rgb(191, 191, 105); fill-opacity: 0.9;"></circle><text transform="translate(440.9135667086227,127.55555555555554)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">ET: The Extra-Terrestrial</text></g><g class="circle"><circle transform="translate(376.15252079441285,108.00000000000006)" r="9.419049605151171" style="fill: rgb(105, 191, 105); fill-opacity: 0.9;"></circle><text transform="translate(376.15252079441285,108.00000000000006)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">Finding Nemo</text></g><g class="circle"><circle transform="translate(207.7902136794568,137.33333333333337)" r="5.341454396574819" style="fill: rgb(105, 191, 191); fill-opacity: 0.9;"></circle><text transform="translate(207.7902136794568,137.33333333333337)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">Ghostbusters</text></g><g class="circle"><circle transform="translate(395.3417694533188,156.8888888888889)" r="13.726026778212804" style="fill: rgb(191, 105, 105); fill-opacity: 0.9;"></circle><text transform="translate(395.3417694533188,156.8888888888889)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">Iron Man 3</text></g><g class="circle"><circle transform="translate(394.1624581835286,117.77777777777783)" r="7.717852212477484" style="fill: rgb(191, 105, 105); fill-opacity: 0.9;"></circle><text transform="translate(394.1624581835286,117.77777777777783)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">Jurassic Park</text></g><g class="circle"><circle transform="translate(183.40497082777395,186.22222222222229)" r="13.963767530980528" style="fill: rgb(105, 191, 105); fill-opacity: 0.9;"></circle><text transform="translate(183.40497082777395,186.22222222222229)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">King Kong</text></g><g class="circle"><circle transform="translate(268.05453070313024,117.77777777777783)" r="10.41477186948671" style="fill: rgb(105, 191, 105); fill-opacity: 0.9;"></circle><text transform="translate(268.05453070313024,117.77777777777783)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">Monsters, Inc.</text></g><g class="circle"><circle transform="translate(201.90478440844853,254.6666666666667)" r="13.726026778212804" style="fill: rgb(105, 191, 105); fill-opacity: 0.9;"></circle><text transform="translate(201.90478440844853,254.6666666666667)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">Oz the Great and Powerful</text></g><g class="circle"><circle transform="translate(426.9190035234734,186.22222222222229)" r="14.557283358167103" style="fill: rgb(105, 191, 105); fill-opacity: 0.9;"></circle><text transform="translate(426.9190035234734,186.22222222222229)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">Pirates of the Caribbean: Dead Man's Chest</text></g><g class="circle"><circle transform="translate(125.60823936382236,244.88888888888886)" r="14.7179018987327" style="fill: rgb(191, 105, 105); fill-opacity: 0.9;"></circle><text transform="translate(125.60823936382236,244.88888888888886)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">Quantum of Solace</text></g><g class="circle"><circle transform="translate(219.09508638120263,49.33333333333343)" r="4.373426575259599" style="fill: rgb(105, 191, 105); fill-opacity: 0.9;"></circle><text transform="translate(219.09508638120263,49.33333333333343)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">Raiders of the Lost Ark</text></g><g class="circle"><circle transform="translate(487.70249400982595,264.44444444444446)" r="10.41477186948671" style="fill: rgb(105, 191, 105); fill-opacity: 0.9;"></circle><text transform="translate(487.70249400982595,264.44444444444446)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">Star Wars Ep. I: The Phantom Menace</text></g><g class="circle"><circle transform="translate(228.34926519586634,156.8888888888889)" r="5.764830665460977" style="fill: rgb(191, 191, 105); fill-opacity: 0.9;"></circle><text transform="translate(228.34926519586634,156.8888888888889)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">The Blind Side</text></g><g class="circle"><circle transform="translate(270.76870716515464,225.3333333333333)" r="13.022874528813208" style="fill: rgb(105, 191, 105); fill-opacity: 0.9;"></circle><text transform="translate(270.76870716515464,225.3333333333333)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">The Chronicles of Narnia: The Lion, the Witch and the Wardrobe</text></g><g class="circle"><circle transform="translate(557.4700095336336,20)" r="13.202174007486896" style="fill: rgb(191, 105, 105); fill-opacity: 0.9;"></circle><text transform="translate(557.4700095336336,20)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">The Dark Knight</text></g><g class="circle"><circle transform="translate(408.7593465427364,196)" r="8.692094706007078" style="fill: rgb(105, 105, 191); fill-opacity: 0.9;"></circle><text transform="translate(408.7593465427364,196)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">The Hunger Games</text></g><g class="circle"><circle transform="translate(426.2834240720097,78.66666666666663)" r="8.654144158950158" style="fill: rgb(105, 191, 105); fill-opacity: 0.9;"></circle><text transform="translate(426.2834240720097,78.66666666666663)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">The Lion King</text></g><g class="circle"><circle transform="translate(276.59764082769084,460)" r="6.880384087657577" style="fill: rgb(191, 191, 105); fill-opacity: 0.9;"></circle><text transform="translate(276.59764082769084,460)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">The Twilight Saga: New Moon</text></g><g class="circle"><circle transform="translate(72.9813644940121,244.88888888888886)" r="5.341454396574819" style="fill: rgb(191, 191, 105); fill-opacity: 0.9;"></circle><text transform="translate(72.9813644940121,244.88888888888886)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">The Vow</text></g><g class="circle"><circle transform="translate(202.62680101369122,264.44444444444446)" r="11.155928500039982" style="fill: rgb(191, 105, 105); fill-opacity: 0.9;"></circle><text transform="translate(202.62680101369122,264.44444444444446)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">The War of the Worlds</text></g><g class="circle"><circle transform="translate(706.1715103048812,156.8888888888889)" r="13.726026778212804" style="fill: rgb(105, 105, 191); fill-opacity: 0.9;"></circle><text transform="translate(706.1715103048812,156.8888888888889)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">Titanic</text></g><g class="circle"><circle transform="translate(272.303108432514,88.4444444444444)" r="12.84107174119283" style="fill: rgb(105, 191, 105); fill-opacity: 0.9;"></circle><text transform="translate(272.303108432514,88.4444444444444)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">Up</text></g><g class="circle"><circle transform="translate(202.72422286437742,235.11111111111114)" r="14.064426265501075" style="fill: rgb(191, 105, 105); fill-opacity: 0.9;"></circle><text transform="translate(202.72422286437742,235.11111111111114)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">X-Men: The Last Stand</text></g><g class="circle"><circle transform="translate(62.07434237439335,284)" r="7.83875613767541" style="fill: rgb(191, 191, 105); fill-opacity: 0.9;"></circle><text transform="translate(62.07434237439335,284)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">You've Got Mail</text></g><g class="circle"><circle transform="translate(20,411.1111111111111)" r="8.692094706007078" style="fill: rgb(191, 105, 191); fill-opacity: 0.9;"></circle><text transform="translate(20,411.1111111111111)" text-anchor="middle" dy="15" style="font-size: 10px; font-family: Arial, Helvetica;">Zookeeper</text></g><g class="point"><circle transform="translate(827,117.77777777777783)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(440.9135667086227,127.55555555555554)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(376.15252079441285,108.00000000000006)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(207.7902136794568,137.33333333333337)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(395.3417694533188,156.8888888888889)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(394.1624581835286,117.77777777777783)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(183.40497082777395,186.22222222222229)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(268.05453070313024,117.77777777777783)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(201.90478440844853,254.6666666666667)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(426.9190035234734,186.22222222222229)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(125.60823936382236,244.88888888888886)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(219.09508638120263,49.33333333333343)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(487.70249400982595,264.44444444444446)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(228.34926519586634,156.8888888888889)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(270.76870716515464,225.3333333333333)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(557.4700095336336,20)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(408.7593465427364,196)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(426.2834240720097,78.66666666666663)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(276.59764082769084,460)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(72.9813644940121,244.88888888888886)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(202.62680101369122,264.44444444444446)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(706.1715103048812,156.8888888888889)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(272.303108432514,88.4444444444444)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(202.72422286437742,235.11111111111114)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(62.07434237439335,284)" r="1" style="fill: rgb(0, 0, 0);"></circle></g><g class="point"><circle transform="translate(20,411.1111111111111)" r="1" style="fill: rgb(0, 0, 0);"></circle></g></g></svg>
</div>
<!-- place your javascript code betwee the script tags below -->
<script>
</script>
</body>
</html>
Raw
reset.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment