D3 Examples - svg mask

xxxxxxxxxx
 
<!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>
​
<svg viewBox="0 0 200 100">
    <defs>
        <clipPath id="clip">
            <style>
            circle {
                fill: black;
            }
            </style>
      <circle cx="47" cy="64" r="27"/>
      <path d="M150 0 L75 200 L225 200 Z"/>
      <text x="0" y="40" stroke="green" fill="none" stroke-width="0.16%">G</text>  
      </clipPath>
    </defs>
 
<image height="100%" preserveAspectRatio="xMinYMin slice" width"100%" href="https://i.redd.it/ldc74ii7t7o11.jpg" clip-path="url(#clip)" />
<circle cx="47" cy="72" r="5" clip-path="url(#clip)"/>
</svg>
  
<script>
// generate random data
const data = d3.range(2065).map((d, i) => ({
  x: Math.random(),
  y: Math.random(),
  id: i,
  label: `Point ${i}`,
}));  
​
// padding around the chart where axes will go
const padding = {
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
};
  
// outer svg dimensions
const width = 107;
const height = 234;
​
// inner chart dimensions, where the dots are plotted
const plotAreaWidth = width - padding.left - padding.right;
const plotAreaHeight = height - padding.top - padding.bottom;
   
  
const pointRadius = 1;  
​
// initialize scales
const xScale = d3.scaleLinear().domain([0, 1]).range([0, plotAreaWidth]);
const yScale = d3.scaleLinear().domain([0, 1]).range([plotAreaHeight, 0]);
const colorScale = d3.scaleLinear().domain([0, 1]).range(['#06a', '#0bb']);
    
const container = d3.select('svg');  
const svg = container.append('svg')
  .attr('width', width)
  .attr('height', height);  
​
// the main <g> where all the chart content goes inside
const g = svg.append('g')
  .attr('transform', `translate(${padding.left} ${padding.top})`);
​
  
// add in circles
const circles = g.append('g').attr('class', 'circles');
const binding = circles.selectAll('.data-point').data(data, d => d.id);
binding.enter().append('circle')
  .classed('data-point', true)
  .attr('r', pointRadius)
  .attr('cx', d => xScale(d.x))
  .attr('cy', d => yScale(d.y))
  .attr('fill', d => colorScale(d.y))
  .attr('clip-path',"url(#clip)");
​
 </script>
</body>
​
    