Skip to content

Instantly share code, notes, and snippets.

@wonga00

wonga00/index.html

Last active November 20, 2015 16:32
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 wonga00/dfbf50beabf0f88989e7 to your computer and use it in GitHub Desktop.
Save wonga00/dfbf50beabf0f88989e7 to your computer and use it in GitHub Desktop.
Download ZIP
Bar charts with patterns
Raw
index.html
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="chart"></div>
<style type="text/css">
* {
background-color: #FFF;
margin: 0;
padding: 0;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
#chart {
height: 500px;
width: 300px;
margin: 80px auto;
}
.bar {
stroke: black;
stroke-width: 2;
shape-rendering: crispEdges;
}
</style>
<script type="text/javascript">
var data = [
[0, 0, 5, 10, 5, 0, 0],
[3, 1, 3, 10, 5, 4, 3],
[2, 3, 1, 6, 5, 3, 1],
[2, 1, 4, 5, 4, 3, 2],
[3, 5, 4, 5, 2, 1, 1]
];
/* specify chart constants */
var ROW_HEIGHT = 100;
var ROW_WIDTH = 300;
var ROW_PADDING = 20;
var barWidth = ROW_WIDTH / data[0].length;
var w = ROW_WIDTH;
var h = ROW_HEIGHT * data.length + 100;
var svg = d3.select("#chart").append("svg")
.attr('width', w)
.attr('height', h)
.append('g');
var hScale = d3.scale.linear()
.domain([0, 10])
.range([0, ROW_HEIGHT - ROW_PADDING]);
var rows = svg.selectAll('.row').data(data);
var rowsEnter = rows.enter().append('g')
.attr('class', 'row')
.attr('transform', function(d, i) {
return 'translate(0, ' + i * ROW_HEIGHT + ')';
});
var fills = ['black', 'white', 'url(#hatch00)', 'url(#hatch03)', 'url(#hatch01)', 'url(#hatch02)', 'url(#hatch04)'];
var bars = rows.selectAll('.bar').data(function(d) {return d;});
var barsEnter = bars.enter().append('rect')
.attr('class', 'bar')
.attr('x', function(d, i) {return i * barWidth;})
.attr('y', function(d, i) {return ROW_HEIGHT - hScale(d);})
.attr('width', barWidth)
.attr('height', hScale)
.attr('fill', function(d, i) {return fills[i];});
</script>
<svg>
<defs xmlns="http://www.w3.org/2000/svg">
<pattern id="hatch00" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10">
<g style="fill:none; stroke:black; stroke-width:1">
<path d="M0,0 l10,10"/>
<path d="M10,0 l-10,10"/>
</g>
</pattern>
<pattern id="hatch01" patternUnits="userSpaceOnUse" x="0" y="0" width="15" height="15">
<g style="fill:none; stroke:black; stroke-width:1">
<path d="M0,0 l15,15"/>
<path d="M15,0 l-15,15"/>
</g>
</pattern>
<pattern id="hatch02" patternUnits="userSpaceOnUse" x="0" y="0" width="25" height="25">
<g style="fill:none; stroke:black; stroke-width:1">
<path d="M0,0 l25,25"/>
<path d="M25,0 l-25,25"/>
</g>
</pattern>
<pattern id="hatch03" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="50">
<g style="fill:none; stroke:black; stroke-width:1">
<path d="M0,0 l50,50"/>
<path d="M50,0 l-50,50"/>
</g>
</pattern>
<pattern id="hatch04" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="50">
<g style="fill:none; stroke:black; stroke-width:2">
<path d="M0,0 l50,50"/>
<path d="M50,0 l-50,50"/>
</g>
</pattern>
<symbol id="broadLeave" overflow="visible"
style="fill:none;stroke:green;stroke-width:2;">
<path d="M0 15 l0 -10"/>
<path d="M0 5 a6 6 0 1 1 -3.5 -10
a6 6 0 1 1 7 0 a6 6 0 1 1 -3.5 10z"/>
</symbol>
<symbol id="lightning" overflow="visible"
style="fill:blue;stroke:blue;stroke-width:2;">
<path d="M1.3828125,0.70703125 L11.1367188,43.2460938 L25.0273438,35.9726562 L42.8867188,74.1640625 L31.6757812,11.4296875 L19.7695312,23.2929688 L1.3828125,0.70703125 Z" />
</symbol>
<pattern id="pat01" patternUnits="userSpaceOnUse" width="30"
height="45">
<use xlink:href="#broadLeave"
transform="translate(15,22.5) scale(0.5)"/>
</pattern>
<pattern id="pat02" patternUnits="userSpaceOnUse" width="30"
height="45">
<use xlink:href="#lightning"
transform="translate(15,22.5) scale(0.5)"/>
</pattern>
</defs>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment