Skip to content

Instantly share code, notes, and snippets.

@mell0kat

mell0kat/.block

Created June 29, 2018 19:27
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 mell0kat/d0aafb3041dda09af3a23986a8be0331 to your computer and use it in GitHub Desktop.
Save mell0kat/d0aafb3041dda09af3a23986a8be0331 to your computer and use it in GitHub Desktop.
Download ZIP
d3 Opacity
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', mass: 80, percentEaten: 70 },
{ x: 200, y: 100, type: 'banana', mass: 105, percentEaten: 50 },
{ x: 300, y: 200, type: 'grape', mass: 7, percentEaten: 30 },
{ x: 400, y: 200, type: 'grape', mass: 5, percentEaten: 20 },
{ x: 500, y: 400, type: 'banana', mass: 120, percentEaten: 85 },
]
const colorScale = d3.scaleOrdinal()
.domain(['apple', 'banana', 'grape'])
.range(['red', 'yellow', 'purple'])
const massScale = d3.scaleLinear()
.domain([5, 120])
.range([5, 15])
const eatenScale = d3.scaleLinear()
.domain([0, 100])
.range([1, 0])
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', d => massScale(d.mass))
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('fill', d => colorScale(d.type))
.attr('fill-opacity', d => eatenScale(d.percentEaten))
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment