Primitives Widget

Include Primitives in your website

Including a Primitive into your website is simple! Follow these steps to add Primitives to your HTML pages.

1. Add an SVG tag

Define one or more svg tags where you want the Primitive to be displayed:

<svg data-primitive="2,3,5" width="300" height="300"></svg>

The data-primitive attribute should contain a number, or a list of prime factors. Using prime factors is preferred, because it gives you control of the order in which the Primitive is constructed. For example, in there are six different Primitives that represent 30, depending upon the arrangement of its factors:







If you specify a number, then the Primitive will produce the primitive with factors in ascending order, so 30 will always be interpreted as 2,3,5.

Make sure to size the SVG container! The primitive will scale appropriately.

2. Include the Primtives Javascript Code

At the bottom of the HTML body (to ensure that it runs after the svgs have been constructed), include the Primitives javascript code:

<script src="primitives.min.js"></script>


3. Be aware of the limitations

For convenience, this code currently (early 2016) uses SVG to render its visualizations, so it will put a heavy burden on most browsers once numbers go above the tens of thousands.

That said, it is possible. I have tested that the application correctly renders 1,022,117, which is the product of the first two primes greater than 1000, 1009 * 1013. On a top-end Macbook Pro running Chrome it rendered, though very slowly and sluggishly. In any case, visualizations of very large numbers are not usually as meaningful or interesting as they are for lower numbers.