D3 Examples - Dances with Factors

Description

Dances with Factors is inspired by the creation of Stephen Von Worley, which in turn is based on the original idea by Brent Yorgey. Use the control widgets to explore prime factorization of various numbers! You might be interested to check out some cool numbers e.g. 243, 611, 700, 1024 :)

This visualization helps us track the prime factors that compose a given number. We can easily identify primes when we arrive to a simple circle (i.e. a prime cannot be composed of smaller divisors). We can also identify common patterns of smaller prime divisors e.g. 2, 3, 5

An excellent implementation of prime factorization through SVG recursion is provided by Jason Davies. Instead of a recursive approach, I decided to handle the problem through generating all relevant attributes of points i.e. x, y, and r. This allows me to provide a data-driven solution to the problem and allow D3 to handle the transitions on new and old points.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
  <meta charset="utf-8">
  <title>Dances with Factors</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" />
  <link rel="stylesheet" href="style.css" />
</head>
​
<body class="container">
  <!-- header-->
  <header class="page-header">
    <h1>Dances with Factors</h1>
    <p class="text-small">a D3 picture produced by chrisrzhou</p>
  </header>
​
​
  <!-- main content -->
  <div class="main container">
    <blockquote>
      The fundamental theorem of arithmetic states that every integer greater than 1 is either prime itself or a product of prime numbers.
    </blockquote>
​
    <!-- controls -->
    <div class="btn-group controls">
      <input type="number" class="btn btn-default btn-sm" title="Input a number" id="inputNumber" />
      <a class="btn btn-default btn-sm" title="Search" id="search"><i class="fa fa-search"></i></a>
      <a class="btn btn-default btn-sm" title="Backward" id="backward"><i class="fa fa-chevron-left"></i></a>
      <a class="btn btn-default btn-sm" title="Stop" id="stop"><i class="fa fa-stop"></i></a>
      <a class="btn btn-default btn-sm" title="Forward" id="forward"><i class="fa fa-chevron-right"></i></a>
    </div>
​
    <!-- visualization -->
    <div id="vis"></div>
​
    <hr/>
​
    <!-- description -->
    <h2>Details</h2>
    <p>
      <i>Dances with Factors</i> is inspired by the creation of <a href="https://www.datapointed.net/visualizations/math/factorization/animated-diagrams/" target="_blank">Stephen Von Worley</a>, which in turn is based on the original idea by <a href="https://mathlesstraveled.com/2012/10/05/factorization-diagrams/"
      target="_blank">Brent Yorgey</a>.  Use the control widgets to explore prime factorization of various numbers! You might be interested to check out some cool numbers e.g. <code>243</code>, <code>611</code>, <code>700</code>, <code>1024</code> :)
    </p>
​
    <p>
      This visualization helps us track the prime factors that compose a given number. We can easily identify primes when we arrive to a simple circle (i.e. a prime cannot be composed of smaller divisors). We can also identify common patterns of smaller prime
      divisors e.g. <code>2</code>, <code>3</code>, <code>5</code>
    </p>
    <hr/>
​
    <!-- implementation -->
    <h2>Implementation</h2>
    <p>
      An excellent implementation of prime factorization through SVG recursion is provided by <a href="https://www.jasondavies.com/factorisation-diagrams/" target="_blank">Jason Davies</a>. Instead of a recursive approach, I decided to handle the problem
      through generating all relevant attributes of points i.e. <code>x</code>, <code>y</code>, and <code>r</code>. This allows me to provide a data-driven solution to the problem and allow D3 to handle the transitions on new and old points.
    </p>
​
    <p>More details on code implementation and a guide can be found in the Github project page or on <a href="https://chrisrzhou.datanaut.io/">datanaut.io</a>
    </p>
  </div>
​
  <!-- footer -->
  <footer>
    <p>
      <a href="https://gist.github.com/chrisrzhou/3fec15b05684fa0cf42e" target="_blank">Dances with Factors</a> by
      <a href="https://chrisrzhou.datanaut.io/projects" target="_blank">chrisrzhou</a>, 2015-02-18
      <br />
      <a href="https://github.com/chrisrzhou" target="_blank"><i class="fa fa-github"></i></a> |
      <a href="https://bl.ocks.org/chrisrzhou" target="_blank"><i class="fa fa-cubes"></i></a> |
      <a href="https://www.linkedin.com/in/chrisrzhou" target="_blank"><i class="fa fa-linkedin"></i></a>
    </p>
  </footer>
​
  <!-- scripts -->
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="factor.js"></script>
  <script src="draw.js"></script>
  <script>
    // Hack to make this example display correctly in an iframe on bl.ocks.org
    d3.select(self.frameElement).style("height", "1000px");
  </script>
</body>
​
</html>
    

Dances with Factors

Dances with Factors

Description

Files

Other Notes