D3 Examples - Love Interest v2

Makeover Monday - Week 2

Original visualization

This week YouGov gave us a visualization to work with on the subject of British love interests.

What works well

It is easy to see how personality ranks

It isn't as easy, but you can also see how unimportant money is to Brits

What could be improved

It would be nice to see how other characteristics compare to one another

What I did

I thought it would be nice to show a sort of heat map for the different percentages within each country. Thankfully, Elijah Meeks walks through how to do exactly that in chapter 7 of his D3 in Action book. After revising his code a bit I was able to create something that allows the user see how the love interest compare across all countries.

If you like what was, I'd love to hear from you. Say hi on Twitter @robcrock or shoot me an email at robert@vizsimply.com

Acknowledgments

This project would be what it is without the efforts of Andy Kriebel and Eva Murray. Thank you for all the work you do for this community.

Elijah, thank you for create great content in your books for others to build off.

Built With

D3v4 - JavaScript visualization kernel

Materialize CSS - Based on Google's design philosophy

Materialize JS- Materialize dependancy

jQuery - Materialize dependancy

License

This project is licensed under the MIT License - see the LICENSE.md file for details

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <meta name="viewport" content="width=625px, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Adjacency Matric</title>
</head>
<body>
  <div class="container">
​
    <div class="row">
      <div class="col s8">
        <h1>Love Interests</h1>
        <div>Which characteristics do women find most enchanting?</div>
        <div>1 = most   6 = least</div>
      </div>
      <div class="col s4">
        <svg class="key" height="140px" width="180px"></svg>
      </div>
    </div>
​
    <div class="row">
      <div class="col s3">
        <div>German</div>
        <svg class="german" height="90px" width="90px"></svg>
      </div>
      <div class="col s3">
        <div>British</div>
        <svg class="british" height="90px" width="90px"></svg>
      </div>
      <div class="col s3">
        <div>Malaysian</div>
        <svg class="malaysian" height="90px" width="90px">
        </svg>
      </div>
      <div class="col s3">
        <div>Hong Kong</div>
        <svg class="hong_kong" height="90px" width="90px"></svg>
      </div>
      <div class="col s3">
        <div>Filipino</div>
        <svg class="filipino" height="90" width="90"></svg>
      </div>
    </div>
​
    <div class="row">
      <div class="col s3">
        <div>American</div>
        <svg class="american" height="90" width="90"></svg>
      </div>
      <div class="col s3">
        <div>Indonesian</div>
        <svg class="indonesian" height="90" width="90"></svg>
      </div>
      <div class="col s3">
        <div>Singaporean</div>
        <svg class="singaporean" height="90" width="90"></svg>
      </div>
      <div class="col s3">
        <div>Thai</div>
        <svg class="thai" height="90" width="90"></svg>
      </div>
      <div class="col s3">
        <div>French</div>
        <svg class="french" height="90" width="90"></svg>
      </div>
    </div>
​
    <div class="row">
      <div class="col s3">
        <div>Indian</div>
        <svg class="indian" height="90" width="90"></svg>
      </div>
      <div class="col s3">
        <div>Australian</div>
        <svg class="australian" height="90" width="90"></svg>
      </div>
      <div class="col s3">
        <div>Danish</div>
        <svg class="danish" height="90" width="90"></svg>
      </div>
      <div class="col s3">
        <div>Swedish</div>
        <svg class="swedish" height="90" width="90"></svg>
      </div>
      <div class="col s3">
        <div>Finnish</div>
        <svg class="finnish" height="90" width="90"></svg>
      </div>
    </div>
    <div class="row">
      <div class="col s3">
        <div>Vietnamese</div>
        <svg class="vietnamese" height="90" width="90"></svg>
      </div>
      <div class="col s3">
        <div>Egyptian</div>
        <svg class="egyptian" height="90" width="90"></svg>
      </div>
      <div class="col s3">
        <div>UAE</div>
        <svg class="uae" height="90" width="90"></svg>
      </div>
      <div class="col s3">
        <div>Arabian</div>
        <svg class="arabian" height="90" width="90"></svg>
      </div>
      <div class="col s3">
        <div>Norwegian</div>
        <svg class="norwegian" height="90" width="90"></svg>
      </div>
    </div>
​
    <div class="row">
      <div class="col s6">SOURCE | YouGov</div>
      <div class='col s6 right-align'>DESIGN | @robcrock</div>
    </div>
  </div>
  <script src="script.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>
    