Skip to content

Instantly share code, notes, and snippets.

@GordyD

GordyD/README.md

Last active September 9, 2015 06:34
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 GordyD/ffd4df53fba944785e3c to your computer and use it in GitHub Desktop.
Save GordyD/ffd4df53fba944785e3c to your computer and use it in GitHub Desktop.
Download ZIP
d3.bayview walkthru
Raw
README.md

hello markdown

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
}
rect, circle {
fill: red;
stroke: blue;
stroke-width: 20px;
stroke-dasharray: 24 10 0 0;
stroke-dashoffset: 116;
stroke-opacity: 0.3
}
</style>
</head>
<body>
<script>
var vis = d3.select('#vis').append('svg');
</script>
<div id='vis'></div>
<svg width="960" height="500" style='background-color:orange'>
<rect x="200" y="0" width="437" height="214" transform="translate(20) rotate(45)">
</rect>
<circle cx="20" cy="40" r="20">
</circle>
<circle cx="100" cy="40" r="20">
</circle>
<circle cx="180" cy="40" r="20">
</circle>
<circle cx="260" cy="40" r="20">
</circle>
<circle cx="340" cy="40" r="20">
</circle>
<circle cx="420" cy="40" r="20">
</circle>
<circle cx="500" cy="40" r="20">
</circle>
<circle cx="580" cy="40" r="20">
</circle>
<circle cx="600" cy="40" r="20">
</circle>
<circle cx="580" cy="40" r="20">
</circle>
<circle cx="580" cy="40" r="20">
</circle>
<circle cx="580" cy="40" r="20">
</circle>
</svg>
<script>
console.log("you are now rocking with d3", d3);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment