Last active
November 20, 2015 16:32
-
-
Save wonga00/dfbf50beabf0f88989e7 to your computer and use it in GitHub Desktop.
Bar charts with patterns
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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