Skip to content

Instantly share code, notes, and snippets.

@MrToph
Created January 26, 2017 14:58
Show Gist options
  • Save MrToph/8d034c48d40f7871826de9bdaec923d3 to your computer and use it in GitHub Desktop.
Save MrToph/8d034c48d40f7871826de9bdaec923d3 to your computer and use it in GitHub Desktop.
d3.csv('data.csv', (err, data) => {
if (err) {
console.log(err)
return
}
ReactDOM.render(
<App width={960} height={640} data={data} />,
document.getElementById('root'),
)
})
function App({width, height, data}) {
return (
<svg width={width} height={height}>
<Bubbles data={data} />
</svg>
)
}
function Bubbles({data}) {
const bubbles = data.map( ({id,x,y,r}) => <Bubble key={id} x={x} y={y} r={r} />)
return (
<g className="bubbles">
{
bubbles
}
</g>
)
}
function Bubble({x,y,r}) {
return (
<circle cx={x} cy={y} r={r} />
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment