D3 Examples - Makeover Monday

Makeover Monday - Valentines

Entry for Makeover Monday week 7, How Much Do Americans Spend on Valentine’s Day? Uses https://bl.ocks.org/mbostock/6081914 suggested approach for chaining repeated transitions. Uses the easeElasticOut to achieve the heart beating effect, which updates the viewBox coordinates inversely based on the heart's desired area. See my blog post for more information: https://www.tomshanley.co.nz/blog/2017/3/1/be-still-my-beating-heart-svg-viewbox-transitions-to-animate-custom-shapes

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Valentines #MakeoverMonday</title>
​
    <!-- CSS -->
    <link href='//fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
​
    <style>
      html, body, svg {
        font-family: 'Sofia', cursive;
        text-align: center;
      }
    </style>
​
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div>
      <h1>Valentines #MakeoverMonday</h1>
      <h2 class="year-heading">
        The average spend in 2008
      </h2>
      <p>
        The hearts' size corresponds to the average spend per year. The colour increases in depth per year.
      </p>
    </div>
    <div class="hearts"></div>
​
    <p>
      Data source:
      <a href="https://nrf.com/sites/default/files/Valentine%27s%20Day%201-18-16%20press.pdf" target="_blank">National Retail Foundation</a>
    </p>
​
    <script src="d3.min.js"></script>
    <script src="valentines.js"></script>
​
  </body>
</html>
​
    