D3 Examples - ... in a Million

... in a Million

Rendering a SVG Chart for showing parts of a whole.

Supported URL query string parameters

'count'

'total' (rounds up to next number with integer root)

'boxsize'

'size' (output size of SVG)

'padding' (between boxes)

'outerPadding' (between outline and):

'outline' (width, in units of output size)

'pixelperfect' (SVG size equals viewbox, flag overrides 'size')

Examples:

Currently you shouldn't use unreasonable count numbers (lets say > 1000) since each box is rendered as svg node, if you want to render more feel free to improve this by rendering into canvas or fill a svg shape with pattern definition

SVG Crowbar recommended http://nytimes.github.io/svg-crowbar/

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>In a Million</title>
    <base target="_parent" />
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="script.js" charset="utf-8"></script>
    <style>
        svg text {fill: white; font-family: sans-serif; font-weight: normal;}
        #vis {float: left;}
        #text {float: left;   padding-left: 10px;}
        .boxes rect {stroke: none; fill: black}
    </style>
</head>
<body onload="drawBox()">
    <div id="vis"></div>
        <div id="text">
        <p><span id="count"></span> in <span id="total">a million</span></p>
        <small>
            <p><a href="https://nytimes.github.io/svg-crowbar/">get a crowbar</a></p>
        </small>
    </div>
</body>
</html>
    