<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>
<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>
<!DOCTYPE html>
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#container {
position: relative;
overflow: hidden;
min-width: 500px;
max-width: 1000px;
height: 1400px;
text-align: center;
line-height: normal;
z-index: 0;
font-family: Helvetica, sans-serif;
font-size: 12px;
margin: 0 auto;
}
</style>
<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="847" xmlns="http://www.w3.org/2000/svg" version="1.1"><g transform="translate(10,10)"><g><circle class="node node--root" transform="translate(413.5,413.5)" r="413.5" style="fill-opacity: 0; stroke: rgb(221, 221, 221); stroke-opacity: 1;"></circle><circle class="node node--leaf" transform="translate(375.2641040157002,680.658730161709)" r="107.44897811475695" style="fill: rgb(191, 105, 105); fill-opacity: 1; stroke: rgb(221, 221, 221); stroke-opacity: 0;"></circle><circle class="node node--leaf" transform="translate(584.1466097326057,680.658730161709)" r="96.49203083384623" style="fill: rgb(105, 191, 105); fill-opacity: 1; stroke: rgb(221, 221, 221); stroke-opacity: 0;"></circle><circle class="node node--leaf" transform="translate(499.73647902086645,313.8522552768708)" r="274.95996355333676" style="fill: rgb(105, 105, 191); fill-opacity: 1; stroke: rgb(221, 221, 221); stroke-opacity: 0;"></circle><circle class="node node--leaf" transform="translate(175.87364969606057,554.4809350568428)" r="123.57009227026373" style="fill: rgb(105, 105, 191); fill-opacity: 1; stroke: rgb(221, 221, 221); stroke-opacity: 0;"></circle></g><g><text text-anchor="middle" transform="translate(413.5,413.5)" style="font-size: 11px; font-family: Arial, Helvetica;"></text><text text-anchor="middle" transform="translate(375.2641040157002,680.658730161709)" style="font-size: 11px; font-family: Arial, Helvetica;">t</text><text text-anchor="middle" transform="translate(584.1466097326057,680.658730161709)" style="font-size: 11px; font-family: Arial, Helvetica;">s</text><text text-anchor="middle" transform="translate(499.73647902086645,313.8522552768708)" style="font-size: 11px; font-family: Arial, Helvetica;">z</text><text text-anchor="middle" transform="translate(175.87364969606057,554.4809350568428)" style="font-size: 11px; font-family: Arial, Helvetica;">e</text></g></g></svg>
</div>
<!-- place your javascript code betwee the script tags below -->
<script>
</script>
/* 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; }