Old school D3 from simpler times

All examples By author By category About

wonga00

Full window Github gist

Bar charts with patterns

<html>
<head>
<script src="https://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="https://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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js