<section id="pattern-selector">
<h1>Adding SVG Fill Patterns (plus a pattern selector)</h1>
<p>mostly because I wanted a faster way to preview various patterns (which we generated through <a href="https://github.com/iros/patternfills">this repo</a>)</p>
<button id="trigger">Load data</button>
<div class="block">
<h2>The SVG Output</h2>
<p>Hover on the lower part of the bars for the total count, hover on the darker top part of the bars for the percentage of the count that is represented by that part of the bar</p>
<div id="svgOutput"></div>
<select name="patternSelector" id="patternSelector">
<option value="circles-1">circles-1</option>
<option value="circles-2">circles-2</option>
<option value="circles-3">circles-3</option>
<option value="circles-4">circles-4</option>
<option value="circles-5">circles-5</option>
<option value="circles-6">circles-6</option>
<option value="circles-7">circles-7</option>
<option value="circles-8">circles-8</option>
<option value="circles-9">circles-9</option>
<option value="diagonal-stripe-1">diagonal-stripe-1</option>
<option value="diagonal-stripe-2">diagonal-stripe-2</option>
<option value="diagonal-stripe-3">diagonal-stripe-3</option>
<option value="diagonal-stripe-4">diagonal-stripe-4</option>
<option value="diagonal-stripe-5">diagonal-stripe-5</option>
<option value="diagonal-stripe-6">diagonal-stripe-6</option>
<option value="dots-1">dots-1</option>
<option value="dots-2">dots-2</option>
<option value="dots-3">dots-3</option>
<option value="dots-4">dots-4</option>
<option value="dots-5">dots-5</option>
<option value="dots-6">dots-6</option>
<option value="dots-7">dots-7</option>
<option value="dots-8">dots-8</option>
<option value="dots-9">dots-9</option>
<option value="horizontal-stripe-1">horizontal-stripe-1</option>
<option value="horizontal-stripe-2">horizontal-stripe-2</option>
<option value="horizontal-stripe-3">horizontal-stripe-3</option>
<option value="horizontal-stripe-4">horizontal-stripe-4</option>
<option value="horizontal-stripe-5">horizontal-stripe-5</option>
<option value="horizontal-stripe-6">horizontal-stripe-6</option>
<option value="horizontal-stripe-7">horizontal-stripe-7</option>
<option value="horizontal-stripe-8">horizontal-stripe-8</option>
<option value="horizontal-stripe-9">horizontal-stripe-9</option>
<option value="vertical-stripe-1">vertical-stripe-1</option>
<option value="vertical-stripe-2">vertical-stripe-2</option>
<option value="vertical-stripe-3">vertical-stripe-3</option>
<option value="vertical-stripe-4">vertical-stripe-4</option>
<option value="vertical-stripe-5">vertical-stripe-5</option>
<option value="vertical-stripe-6">vertical-stripe-6</option>
<option value="vertical-stripe-7">vertical-stripe-7</option>
<option value="vertical-stripe-8">vertical-stripe-8</option>
<option value="vertical-stripe-9">vertical-stripe-9</option>
<option value="crosshatch">crosshatch</option>
<option value="houndstooth">houndstooth</option>
<option value="lightstripe">lightstripe</option>
<option value="smalldot">smalldot</option>
<option value="subtle-patch">subtle-patch</option>
<option value="verticalstripe">verticalstripe</option>
<option value="whitecarbon">whitecarbon</option>
</select>
</div>
<div class="svgPatterns">
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-1" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSIjMzQ4QTc4IiAvPgogIDxjaXJjbGUgY3g9IjEiIGN5PSIxIiByPSIxIiBmaWxsPSIjZmZmZmZmIi8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-2" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzEuNScgY3k9JzEuNScgcj0nMS41JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-3" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzInIGN5PScyJyByPScyJyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-4" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzIuNScgY3k9JzIuNScgcj0nMi41JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-5" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzMnIGN5PSczJyByPSczJyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-6" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzMuNScgY3k9JzMuNScgcj0nMy41JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-7" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzQnIGN5PSc0JyByPSc0JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-8" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzQuNScgY3k9JzQuNScgcj0nNC41JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-9" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzUnIGN5PSc1JyByPSc1JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-1" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4Jy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nI2ZmZmZmZicgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-2" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4Jy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nI2ZmZmZmZicgc3Ryb2tlLXdpZHRoPScyJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-3" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4Jy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nI2ZmZmZmZicgc3Ryb2tlLXdpZHRoPSczJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-4" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nIzM0OEE3OCcgc3Ryb2tlLXdpZHRoPSczJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-5" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nIzM0OEE3OCcgc3Ryb2tlLXdpZHRoPScyJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-6" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nIzM0OEE3OCcgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-1" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxJyBoZWlnaHQ9JzEnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-2" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScyJyBoZWlnaHQ9JzInIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-3" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSczJyBoZWlnaHQ9JzMnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-4" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-5" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-6" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc2JyBoZWlnaHQ9JzYnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-7" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc3JyBoZWlnaHQ9JzcnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-8" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-9" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc5JyBoZWlnaHQ9JzknIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-1" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PScxJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-2" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PScyJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-3" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSczJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-4" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc0JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-5" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc1JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-6" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc2JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-7" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc3JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-8" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc4JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-9" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc5JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-1" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-2" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScyJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-3" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSczJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-4" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc0JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-5" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc1JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-6" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc2JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-7" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc3JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-8" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc4JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-9" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc5JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="8" width="8" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="crosshatch" patternUnits="userSpaceOnUse" width="8" height="8">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnPgogIDxyZWN0IHdpZHRoPSc4JyBoZWlnaHQ9JzgnIGZpbGw9JyNmZmYnLz4KICA8cGF0aCBkPSdNMCAwTDggOFpNOCAwTDAgOFonIHN0cm9rZS13aWR0aD0nMC41JyBzdHJva2U9JyNhYWEnLz4KPC9zdmc+Cg==" x="0" y="0" width="8" height="8">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="houndstooth" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTAnIGhlaWdodD0nMTAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+CiAgPHBhdGggZD0nTTAgMEw0IDQnIHN0cm9rZT0nI2FhYScgZmlsbD0nI2FhYScgc3Ryb2tlLXdpZHRoPScxJy8+CiAgPHBhdGggZD0nTTIuNSAwTDUgMi41TDUgNUw5IDlMNSA1TDEwIDVMMTAgMCcgc3Ryb2tlPScjYWFhJyBmaWxsPScjYWFhJyBzdHJva2Utd2lkdGg9JzEnLz4KICA8cGF0aCBkPSdNNSAxMEw1IDcuNUw3LjUgMTAnIHN0cm9rZT0nI2FhYScgZmlsbD0nI2FhYScgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="5" width="5" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="lightstripe" patternUnits="userSpaceOnUse" width="5" height="5">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgogIDxyZWN0IHdpZHRoPSc1JyBoZWlnaHQ9JzUnIGZpbGw9J3doaXRlJy8+CiAgPHBhdGggZD0nTTAgNUw1IDBaTTYgNEw0IDZaTS0xIDFMMSAtMVonIHN0cm9rZT0nIzg4OCcgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPg==" x="0" y="0" width="5" height="5">
</image>
</pattern>
</defs>
</svg>
<svg height="5" width="5" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="smalldot" patternUnits="userSpaceOnUse" width="5" height="5">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgo8cmVjdCB3aWR0aD0nNScgaGVpZ2h0PSc1JyBmaWxsPScjZmZmJy8+CjxyZWN0IHdpZHRoPScxJyBoZWlnaHQ9JzEnIGZpbGw9JyNjY2MnLz4KPC9zdmc+" x="0" y="0" width="5" height="5">
</image>
</pattern>
</defs>
</svg>
<svg height="5" width="5" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="subtle-patch" patternUnits="userSpaceOnUse" width="5" height="5">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgogIDxyZWN0IHdpZHRoPSc1JyBoZWlnaHQ9JzUnIGZpbGw9JyMzNDhBNzgnIC8+CiAgPHJlY3QgeD0nMicgeT0nMicgd2lkdGg9JzEnIGhlaWdodD0nMScgZmlsbD0nI2ZmZmZmZicgLz4KPC9zdmc+" x="0" y="0" width="5" height="5">
</image>
</pattern>
</defs>
</svg>
<svg height="49" width="6" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="verticalstripe" patternUnits="userSpaceOnUse" width="6" height="49">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2JyBoZWlnaHQ9JzQ5Jz4KICA8cmVjdCB3aWR0aD0nMycgaGVpZ2h0PSc1MCcgZmlsbD0nI2ZmZicvPgogIDxyZWN0IHg9JzMnIHdpZHRoPScxJyBoZWlnaHQ9JzUwJyBmaWxsPScjY2NjJy8+Cjwvc3ZnPgo=" x="0" y="0" width="6" height="49">
</image>
</pattern>
</defs>
</svg>
<svg height="6" width="6" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="whitecarbon" patternUnits="userSpaceOnUse" width="6" height="6">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nNicgaGVpZ2h0PSc2Jz4KICA8cmVjdCB3aWR0aD0nNicgaGVpZ2h0PSc2JyBmaWxsPScjZWVlZWVlJy8+CiAgPGcgaWQ9J2MnPgogICAgPHJlY3Qgd2lkdGg9JzMnIGhlaWdodD0nMycgZmlsbD0nI2U2ZTZlNicvPgogICAgPHJlY3QgeT0nMScgd2lkdGg9JzMnIGhlaWdodD0nMicgZmlsbD0nI2Q4ZDhkOCcvPgogIDwvZz4KICA8dXNlIHhsaW5rOmhyZWY9JyNjJyB4PSczJyB5PSczJy8+Cjwvc3ZnPg==" x="0" y="0" width="6" height="6">
</image>
</pattern>
</defs>
</svg>
</div>
</section>
<div class="templates">
<template id="result_box">
<div class="results_box">
<div class="result">
<span class="property"></span>: <span class="count"></span>
</div>
</div>
</template>
</div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="../../js/components/pattern-selector.js"></script>
<section id="pattern-selector">
<h1>Adding SVG Fill Patterns (plus a pattern selector)</h1>
<p>mostly because I wanted a faster way to preview various patterns (which we generated through <a href="https://github.com/iros/patternfills">this repo</a>)</p>
<button id="trigger">Load data</button>
<div class="block">
<h2>The SVG Output</h2>
<p>Hover on the lower part of the bars for the total count, hover on the darker top part of the bars for the percentage of the count that is represented by that part of the bar</p>
<div id="svgOutput"></div>
<select name="patternSelector" id="patternSelector">
<option value="circles-1">circles-1</option>
<option value="circles-2">circles-2</option>
<option value="circles-3">circles-3</option>
<option value="circles-4">circles-4</option>
<option value="circles-5">circles-5</option>
<option value="circles-6">circles-6</option>
<option value="circles-7">circles-7</option>
<option value="circles-8">circles-8</option>
<option value="circles-9">circles-9</option>
<option value="diagonal-stripe-1">diagonal-stripe-1</option>
<option value="diagonal-stripe-2">diagonal-stripe-2</option>
<option value="diagonal-stripe-3">diagonal-stripe-3</option>
<option value="diagonal-stripe-4">diagonal-stripe-4</option>
<option value="diagonal-stripe-5">diagonal-stripe-5</option>
<option value="diagonal-stripe-6">diagonal-stripe-6</option>
<option value="dots-1">dots-1</option>
<option value="dots-2">dots-2</option>
<option value="dots-3">dots-3</option>
<option value="dots-4">dots-4</option>
<option value="dots-5">dots-5</option>
<option value="dots-6">dots-6</option>
<option value="dots-7">dots-7</option>
<option value="dots-8">dots-8</option>
<option value="dots-9">dots-9</option>
<option value="horizontal-stripe-1">horizontal-stripe-1</option>
<option value="horizontal-stripe-2">horizontal-stripe-2</option>
<option value="horizontal-stripe-3">horizontal-stripe-3</option>
<option value="horizontal-stripe-4">horizontal-stripe-4</option>
<option value="horizontal-stripe-5">horizontal-stripe-5</option>
<option value="horizontal-stripe-6">horizontal-stripe-6</option>
<option value="horizontal-stripe-7">horizontal-stripe-7</option>
<option value="horizontal-stripe-8">horizontal-stripe-8</option>
<option value="horizontal-stripe-9">horizontal-stripe-9</option>
<option value="vertical-stripe-1">vertical-stripe-1</option>
<option value="vertical-stripe-2">vertical-stripe-2</option>
<option value="vertical-stripe-3">vertical-stripe-3</option>
<option value="vertical-stripe-4">vertical-stripe-4</option>
<option value="vertical-stripe-5">vertical-stripe-5</option>
<option value="vertical-stripe-6">vertical-stripe-6</option>
<option value="vertical-stripe-7">vertical-stripe-7</option>
<option value="vertical-stripe-8">vertical-stripe-8</option>
<option value="vertical-stripe-9">vertical-stripe-9</option>
<option value="crosshatch">crosshatch</option>
<option value="houndstooth">houndstooth</option>
<option value="lightstripe">lightstripe</option>
<option value="smalldot">smalldot</option>
<option value="subtle-patch">subtle-patch</option>
<option value="verticalstripe">verticalstripe</option>
<option value="whitecarbon">whitecarbon</option>
</select>
</div>
{{!--
<div class="block">
<h2>The text output</h2>
<div id="outputBox"></div>
</div>
--}}
<div class="svgPatterns">
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-1" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSIjMzQ4QTc4IiAvPgogIDxjaXJjbGUgY3g9IjEiIGN5PSIxIiByPSIxIiBmaWxsPSIjZmZmZmZmIi8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-2" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzEuNScgY3k9JzEuNScgcj0nMS41JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-3" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzInIGN5PScyJyByPScyJyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-4" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzIuNScgY3k9JzIuNScgcj0nMi41JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-5" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzMnIGN5PSczJyByPSczJyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-6" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzMuNScgY3k9JzMuNScgcj0nMy41JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-7" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzQnIGN5PSc0JyByPSc0JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-8" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzQuNScgY3k9JzQuNScgcj0nNC41JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-9" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzUnIGN5PSc1JyByPSc1JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-1" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4Jy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nI2ZmZmZmZicgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-2" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4Jy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nI2ZmZmZmZicgc3Ryb2tlLXdpZHRoPScyJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-3" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4Jy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nI2ZmZmZmZicgc3Ryb2tlLXdpZHRoPSczJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-4" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nIzM0OEE3OCcgc3Ryb2tlLXdpZHRoPSczJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-5" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nIzM0OEE3OCcgc3Ryb2tlLXdpZHRoPScyJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-6" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nIzM0OEE3OCcgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-1" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxJyBoZWlnaHQ9JzEnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-2" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScyJyBoZWlnaHQ9JzInIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-3" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSczJyBoZWlnaHQ9JzMnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-4" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-5" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-6" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc2JyBoZWlnaHQ9JzYnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-7" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc3JyBoZWlnaHQ9JzcnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-8" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-9" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc5JyBoZWlnaHQ9JzknIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-1" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PScxJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-2" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PScyJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-3" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSczJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-4" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc0JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-5" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc1JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-6" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc2JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-7" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc3JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-8" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc4JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-9" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc5JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-1" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-2" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScyJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-3" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSczJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-4" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc0JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-5" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc1JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-6" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc2JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-7" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc3JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-8" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc4JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-9" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc5JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="8" width="8" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="crosshatch" patternUnits="userSpaceOnUse" width="8" height="8">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnPgogIDxyZWN0IHdpZHRoPSc4JyBoZWlnaHQ9JzgnIGZpbGw9JyNmZmYnLz4KICA8cGF0aCBkPSdNMCAwTDggOFpNOCAwTDAgOFonIHN0cm9rZS13aWR0aD0nMC41JyBzdHJva2U9JyNhYWEnLz4KPC9zdmc+Cg==" x="0" y="0" width="8" height="8">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="houndstooth" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTAnIGhlaWdodD0nMTAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+CiAgPHBhdGggZD0nTTAgMEw0IDQnIHN0cm9rZT0nI2FhYScgZmlsbD0nI2FhYScgc3Ryb2tlLXdpZHRoPScxJy8+CiAgPHBhdGggZD0nTTIuNSAwTDUgMi41TDUgNUw5IDlMNSA1TDEwIDVMMTAgMCcgc3Ryb2tlPScjYWFhJyBmaWxsPScjYWFhJyBzdHJva2Utd2lkdGg9JzEnLz4KICA8cGF0aCBkPSdNNSAxMEw1IDcuNUw3LjUgMTAnIHN0cm9rZT0nI2FhYScgZmlsbD0nI2FhYScgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="5" width="5" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="lightstripe" patternUnits="userSpaceOnUse" width="5" height="5">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgogIDxyZWN0IHdpZHRoPSc1JyBoZWlnaHQ9JzUnIGZpbGw9J3doaXRlJy8+CiAgPHBhdGggZD0nTTAgNUw1IDBaTTYgNEw0IDZaTS0xIDFMMSAtMVonIHN0cm9rZT0nIzg4OCcgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPg==" x="0" y="0" width="5" height="5">
</image>
</pattern>
</defs>
</svg>
<svg height="5" width="5" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="smalldot" patternUnits="userSpaceOnUse" width="5" height="5">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgo8cmVjdCB3aWR0aD0nNScgaGVpZ2h0PSc1JyBmaWxsPScjZmZmJy8+CjxyZWN0IHdpZHRoPScxJyBoZWlnaHQ9JzEnIGZpbGw9JyNjY2MnLz4KPC9zdmc+" x="0" y="0" width="5" height="5">
</image>
</pattern>
</defs>
</svg>
<svg height="5" width="5" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="subtle-patch" patternUnits="userSpaceOnUse" width="5" height="5">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgogIDxyZWN0IHdpZHRoPSc1JyBoZWlnaHQ9JzUnIGZpbGw9JyMzNDhBNzgnIC8+CiAgPHJlY3QgeD0nMicgeT0nMicgd2lkdGg9JzEnIGhlaWdodD0nMScgZmlsbD0nI2ZmZmZmZicgLz4KPC9zdmc+" x="0" y="0" width="5" height="5">
</image>
</pattern>
</defs>
</svg>
<svg height="49" width="6" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="verticalstripe" patternUnits="userSpaceOnUse" width="6" height="49">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2JyBoZWlnaHQ9JzQ5Jz4KICA8cmVjdCB3aWR0aD0nMycgaGVpZ2h0PSc1MCcgZmlsbD0nI2ZmZicvPgogIDxyZWN0IHg9JzMnIHdpZHRoPScxJyBoZWlnaHQ9JzUwJyBmaWxsPScjY2NjJy8+Cjwvc3ZnPgo=" x="0" y="0" width="6" height="49">
</image>
</pattern>
</defs>
</svg>
<svg height="6" width="6" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="whitecarbon" patternUnits="userSpaceOnUse" width="6" height="6">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nNicgaGVpZ2h0PSc2Jz4KICA8cmVjdCB3aWR0aD0nNicgaGVpZ2h0PSc2JyBmaWxsPScjZWVlZWVlJy8+CiAgPGcgaWQ9J2MnPgogICAgPHJlY3Qgd2lkdGg9JzMnIGhlaWdodD0nMycgZmlsbD0nI2U2ZTZlNicvPgogICAgPHJlY3QgeT0nMScgd2lkdGg9JzMnIGhlaWdodD0nMicgZmlsbD0nI2Q4ZDhkOCcvPgogIDwvZz4KICA8dXNlIHhsaW5rOmhyZWY9JyNjJyB4PSczJyB5PSczJy8+Cjwvc3ZnPg==" x="0" y="0" width="6" height="6">
</image>
</pattern>
</defs>
</svg>
</div>
</section>
<div class="templates">
<template id="result_box">
<div class="results_box">
<div class="result">
<span class="property"></span>: <span class="count"></span>
</div>
</div>
</template>
</div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="{{ path '/js/components/pattern-selector.js' }}"></script>
/* No context defined. */
(function () {
document.addEventListener('DOMContentLoaded', function () {
console.log("pattern-selector active");
const button = document.querySelector('#trigger');
// const outputBox = document.querySelector('#outputBox');
const svgOutput = document.querySelector('#svgOutput');
const patternSelector = document.querySelector('#patternSelector');
patternSelector.addEventListener('change', function() {
const newPattern = patternSelector.value;
d3.select('svg')
.selectAll('rect.bar')
.style('fill', 'url(#' + newPattern +')');
})
button.addEventListener('click', function() {
const spinnerA = document.createElement('div');
spinnerA.classList.add('spinner');
// outputBox.appendChild(spinnerA);
const spinnerB = document.createElement('div');
spinnerB.classList.add('spinner');
svgOutput.appendChild(spinnerB);
fetch('https://my.api.mockaroo.com/chart_data_2.json?count=10&key=0b401b10')
.then(response => response.json())
.then(data => {
// outputBox.removeChild(spinnerA);
svgOutput.removeChild(spinnerB);
data.sort(function (x, y) {
return d3.ascending(x.date, y.date);
})
// d3 version of results
const w = 1000;
const h = 500;
const padding = 40;
const svg = d3.select("#svgOutput")
.append("svg")
.attr("id", "barChart");
svg.attr("viewBox", [0, 0, w, h])
.attr("preserveAspectRatio", "xMidYMid meet");
// const yScale = d3.scaleLinear()
// .domain([0, d3.max(data, (d) => d.count)])
// .range([h - padding, padding]);
const yScale = d3.scaleLinear()
.domain([0, 900])
.range([h - padding, padding]);
const xScale = d3.scaleLinear()
.domain([0, data.length])
.range([padding, w - (0.25 * padding)]);
console.log(xScale(0));
console.log(xScale(5));
console.log(xScale(10));
svg.selectAll("rect.bar")
.data(data)
.join('rect')
.attr('class', 'bar')
.attr('x', (d, i) => {
return i * ((w - (1.25 * padding)) / data.length) + 1 + padding;
})
.attr("y", (d) => {
return yScale(d.count);
})
.attr("width", () => {
return ((w - (1.25 * padding)) / data.length) - 4;
})
.attr("height", (d) => {
return yScale(0) - yScale(d.count);
})
.attr("data-count", (d) => (d.count))
.append('title')
.text((d) => d.date);
svg.selectAll("rect.percentage-bar")
.data(data)
.join('rect')
.attr('class', 'percentage-bar')
.attr('x', (d, i) => {
return i * ((w - (1.25 * padding)) / data.length) + padding;
})
.attr("y", (d) => {
return yScale(d.count);
})
.attr("width", () => {
return ((w - (1.25 * padding)) / data.length) - 2;
})
.attr("height", (d) => {
return (yScale(0) - yScale(d.count)) * d.percentage;
})
.append('title')
.text((d) => d.percentage);
svg.selectAll("text.count")
.data(data)
.join("text")
.attr('class', 'count')
.text((d) => (d.count))
.attr('x', (d, i) => {
return i * ((w - (1.25 * padding)) / data.length) - 4 + padding + 10;
})
.attr("y", (d) => {
return yScale(d.count) - 10;
})
.style('font-size', '1rem')
.style('font-weight', 'bold')
.style('font-family', 'Courier New')
.style('fill', 'navy');
svg.selectAll("text.date")
.data(data)
.join("text")
.attr('class', 'date')
.text((d) => (d.date))
.attr('x', (d, i) => {
return i * ((w - (1.25 * padding)) / data.length) - 4 + padding + 10;
})
.attr("y", (d) => {
return h - 20;
})
.style('font-size', '0.75rem')
.style('font-weight', 'bold')
.style('font-family', 'Courier New')
.style('fill', 'navy');
// xAxis
const xAxis = d3.axisBottom(xScale);
svg.append("g")
.attr("transform", "translate(0, " + (h - padding) + ")")
.call(xAxis)
.call(g => {
console.dir(g);
g.selectAll(".tick text")
.attr("opacity", "0");
});
// yAxis - adding last so it appears above the bars
const yAxis = d3.axisRight(yScale)
.tickSize(w - (padding * 1.25));
svg.append("g")
.attr("transform", "translate(" + padding + ", 0)")
.call(yAxis)
.call(g => g.selectAll(".tick:not(:first-of-type) line")
.attr("stroke-opacity", 0.5)
.attr("stroke-dasharray", "4,8"))
.call(g => g.selectAll(".tick line"))
.attr("stroke", "navy")
.call(g => g.selectAll(".tick text")
.attr("x", -24)
.attr("dy", -4));
// text version of results
// data.forEach(function(item) {
// let template = document.querySelector('#result_box');
// let resultBox = document.importNode(template.content, true);
//
// resultBox.querySelector('.date').innerHTML = item.date;
// resultBox.querySelector('.count').innerHTML = item.count;
//
// outputBox.appendChild(resultBox);
// })
})
})
});
})();
#pattern-selector {
@keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(180deg);
}
}
#outputBox {
margin: 2rem 0;
padding: 2rem;
border: 2px solid aliceblue;
}
.spinner {
width: 4px;
height: 40px;
background-color: darkcyan;
animation: 0.75s ease-in-out both alternate infinite spin;
}
.results_box {
margin: 0 0 1rem 0;
.property {
font-weight: bold;
}
}
#svgOutput {
margin: 2rem 0;
}
svg#barChart {
display: block;
width: calc(100% - 2px - 2rem);
margin: auto;
height: auto;
border: 1px solid navy;
background-color: azure;
.bar {
fill: #348A78;
fill-opacity: 0.8;
fill: url(#diagonal-stripe-3);
stroke: darkslategray;
stroke-width: 1px;
}
.percentage-bar {
fill: #348A78;
fill-opacity: 0.75;
}
}
.block {
margin: 2rem 0;
padding: 2rem 0;
border-top: 1px solid cadetblue;
}
}
No notes defined.