Skip to content

Instantly share code, notes, and snippets.

@nitaku
Last active March 14, 2019 14:57
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nitaku/8900555 to your computer and use it in GitHub Desktop.
Save nitaku/8900555 to your computer and use it in GitHub Desktop.
Coloring of intersecting regions

An example that uses SVG patterns to color intersecting regions by using a diagonal hatch (colors are HCL opposites with equal chroma and lightness, see this).

### get a D3 reference of the SVG ###
svg = d3.select('svg')
vis = svg.append('g')
.attr('transform', 'translate(290,50)')
### define two colors ###
A = '#ea9679'
B = '#00bbdd'
### create hatch patterns ###
hatches = [
{size:40,c1:A,c2:B,id:'one'}
]
defs = svg.append('defs')
new_patterns = defs.selectAll('.hatch')
.data(hatches)
.enter().append('pattern')
.attr('class', 'hatch')
.attr('id', (d)->d.id)
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', (d)->d.size)
.attr('height', (d)->d.size)
new_patterns.append('rect')
.attr('x',0)
.attr('y',0)
.attr('width', (d)->d.size)
.attr('height', (d)->d.size)
.attr('fill', (d)->d.c1)
new_patterns.append('path')
.attr('d', (d)->"""
M0 #{d.size} l#{d.size} #{-d.size}
M#{-d.size} #{d.size} L#{d.size} #{-d.size}
M#{2*d.size} 0 L0 #{2*d.size}
""")
.attr('stroke-width', (d)->d.size/3)
.attr('stroke', (d)->d.c2)
### create a fake intersection of two squares ###
vis.append('path')
.attr('d', 'M0 0 l300 0 l0 100 l-200 0 l0 200 l-100 0 z')
.attr('fill', A)
vis.append('path')
.attr('d', 'M300 100 l100 0 l0 300 l-300 0 l0 -100 l200 0 z')
.attr('fill', B)
vis.append('rect')
.attr('x', 100)
.attr('y', 100)
.attr('width', 200)
.attr('height', 200)
.attr('fill', 'url(#one)')
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Coloring of intersecting regions"/>
<title>Coloring of intersecting regions</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<svg width="960" height="500">
</svg>
<script src="index.js"></script>
</html>
/* get a D3 reference of the SVG
*/
(function() {
var A, B, defs, hatches, new_patterns, svg, vis;
svg = d3.select('svg');
vis = svg.append('g').attr('transform', 'translate(290,50)');
/* define two colors
*/
A = '#ea9679';
B = '#00bbdd';
/* create hatch patterns
*/
hatches = [
{
size: 40,
c1: A,
c2: B,
id: 'one'
}
];
defs = svg.append('defs');
new_patterns = defs.selectAll('.hatch').data(hatches).enter().append('pattern').attr('class', 'hatch').attr('id', function(d) {
return d.id;
}).attr('patternUnits', 'userSpaceOnUse').attr('width', function(d) {
return d.size;
}).attr('height', function(d) {
return d.size;
});
new_patterns.append('rect').attr('x', 0).attr('y', 0).attr('width', function(d) {
return d.size;
}).attr('height', function(d) {
return d.size;
}).attr('fill', function(d) {
return d.c1;
});
new_patterns.append('path').attr('d', function(d) {
return "M0 " + d.size + " l" + d.size + " " + (-d.size) + "\nM" + (-d.size) + " " + d.size + " L" + d.size + " " + (-d.size) + "\nM" + (2 * d.size) + " 0 L0 " + (2 * d.size);
}).attr('stroke-width', function(d) {
return d.size / 3;
}).attr('stroke', function(d) {
return d.c2;
});
/* create a fake intersection of two squares
*/
vis.append('path').attr('d', 'M0 0 l300 0 l0 100 l-200 0 l0 200 l-100 0 z').attr('fill', A);
vis.append('path').attr('d', 'M300 100 l100 0 l0 300 l-300 0 l0 -100 l200 0 z').attr('fill', B);
vis.append('rect').attr('x', 100).attr('y', 100).attr('width', 200).attr('height', 200).attr('fill', 'url(#one)');
}).call(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment