Skip to content

Instantly share code, notes, and snippets.

@iansinnott

iansinnott/README.md

Created March 21, 2016 18:41
Show Gist options
  • Save iansinnott/6aab4fa8c633358feabe to your computer and use it in GitHub Desktop.
Save iansinnott/6aab4fa8c633358feabe to your computer and use it in GitHub Desktop.
Download ZIP
Babel ES6 Example
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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.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 type='text/babel'>
const MAX_NODES = 100;
const color = d3.scale.category20c();
const generateFakeData = (
count = faker.random.number({ min: 0, max: MAX_NODES }),
maxX = window.innerWidth,
maxY = window.innerHeight
) => {
const result = [];
for (let i = 0; i < count; i ++) {
result.push({
id: faker.random.uuid(),
x: faker.random.number(maxX),
y: faker.random.number(maxY),
});
}
return result;
};
// Feel free to change or delete any of the code you see!
var svg = d3.select("body").append("svg")
var data = generateFakeData(30);
svg.selectAll('circle')
.data(data)
.enter().append("circle")
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('r', 5)
.style({ fill: "#a72d1a"})
console.log(data);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment