D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
tcwood
Full window
Github gist
SORT Growth
<html> <head> <title>SORT Growth</title> <!-- USE MONTSERRAT UNTIL GET PROXIMA-NOVA --> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat|Montserrat:bold"> <link rel="stylesheet" type="text/css" href="./styles.css"> <!-- NEED CORRECT DOMAIN FOR PROXIMA-NOVA TO WORK <script src="https://use.typekit.net/icu6tpb.js"></script> <script> try{Typekit.load({ async: false });} catch(e){ console.log('Typekit error:', e); } </script> --> </head> <body> <div class="header"> <div class="headline"> <h2>Num. of accounts = <span class="num-accounts">50,000</span></h2> <h2> Avg. account balance = $<span class="avg-balance">330</span></h2> <h2> Total AUM = $<span class="aum">16,485,000</span></h2> <h1> <span class="bold">SORT</span> revenue = $<span class="revenue bold highlight">3,434</span></h1> </div> <div> <label class="control"> <h2 class="year"> Year <output id="year_slider_output">1</output> </h2> <input type="range" min="1" max="7" value="1" step="1" oninput="changeYear(value)" > </label> </div> </div> <svg class="screen"></svg> <div class="key"> <div class="key-nodes"> <div class="circle-text-combo"> <svg width="20" height="20"> <circle fill="rgb(255, 77, 120)" r="9" cx="10" cy="10"></circle> </svg> <h1 class="key-sort bold">SORT</h1> </div> <div class="circle-text-combo"> <svg width="20" height="20"> <circle fill="rgb(23, 63, 88)" r="9" cx="10" cy="10"></circle> </svg> <h2 class="key-match">Match Partners</h2> </div> <div class="circle-text-combo"> <svg width="20" height="20"> <circle fill="rgb(56, 60, 70)" r="9" cx="10" cy="10"></circle> </svg> <h2 class="key-fi">Financial Institutions</h2> </div> <div class="circle-text-combo"> <svg width="20" height="20"> <circle fill="rgb(48, 157, 191)" r="9" cx="10" cy="10"></circle> </svg> <h2 class="key-b2c">B2C</h2> </div> </div> <div class="circle-text-combo"> <svg class="key-circle" width="20" height="20"> <circle fill="rgb(230, 255, 250)" stroke="rgb(23, 63, 88)" stroke-width="2" r="9" cx="10" cy="10"> </circle> </svg> <h4 class="key-customers">Each light dot represents 15,000 customers</h4> </div> </div> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="script.js"></script> </body> </html>
https://use.typekit.net/icu6tpb.js
https://d3js.org/d3.v4.min.js