Skip to content

Instantly share code, notes, and snippets.

@mell0kat

mell0kat/.block

Created June 29, 2018 17:37
Show Gist options
  • Save mell0kat/70ea84084bc6b75d9c2452e3d83fe73b to your computer and use it in GitHub Desktop.
Save mell0kat/70ea84084bc6b75d9c2452e3d83fe73b to your computer and use it in GitHub Desktop.
Download ZIP
d3 Color
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
const data_points = [
{ x: 100, y: 300, type: 'apple'},
{ x: 200, y: 100, type: 'banana'},
{ x: 300, y: 200, type: 'grape'},
{ x: 400, y: 200, type: 'grape'},
{ x: 500, y: 400, type: 'banana'},
]
const colorScale = d3.scaleOrdinal()
.domain(['apple', 'banana', 'grape'])
.range(['red', 'yellow', 'purple'])
const svg = d3.select("body").append("svg")
.attr("width", 600)
.attr("height", 600)
.style("background-color", "skyblue")
svg.selectAll('circle')
.data(data_points)
.enter()
.append('circle')
.attr('r', 5)
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('fill', d => colorScale(d.type))
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment