Old school D3 from simpler times

All examples By author By category About

micahstubbs

Full window Github gist

intro to rxjs

a minimal implementation of Twitter's "Who to follow" feature, but for github users. designed to demonstrate reactive programming patterns, where everything can to modeled as a data stream.

forked from tutorial-refactor from adrianmcli

which in turn is an iteration on the "twitter who to follow" example from @andrestaltz's nice Intro to Rx blog post

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
body {
    font-family: sans-serif;
    padding: 10px;
}
h2 {
    font-weight: bold;
    display: inline-block;
}
.refresh {
    font-size: 80%;
    margin-left: 10px;
}
.header {
    background: #ECECEC;
    padding: 5px;
}
.suggestions {
    border: 2px solid #ECECEC;
}
li {
    padding: 5px;
}
li img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
}
li .username, li .close {
    display: inline-block;
    position: relative;
    bottom: 15px;
    left: 5px;
}
  </style>
</head>

<body>
<div class="container">
    <div class="header">
         <h2>Who to follow</h2><a href="#" class="refresh">Refresh</a>
    </div>
    <ul class="suggestions">
        <li class="suggestion1">
            <img />
            <a href="#" target="_blank" class="username">this will not be displayed</a>
            <a href="#" class="close close1">x</a>
        </li>
        <li class="suggestion2">
            <img />
            <a href="#" target="_blank" class="username">neither this</a>
            <a href="#" class="close close2">x</a>
        </li>
        <li class="suggestion3">
            <img />
            <a href="#" target="_blank" class="username">nor this</a>
            <a href="#" class="close close3">x</a>
        </li>
    </ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.async.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.coincidence.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.binding.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.time.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs-dom/2.0.7/rx.dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="tutorial-refactor.js"></script>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
body {
    font-family: sans-serif;
    padding: 10px;
}
h2 {
    font-weight: bold;
    display: inline-block;
}
.refresh {
    font-size: 80%;
    margin-left: 10px;
}
.header {
    background: #ECECEC;
    padding: 5px;
}
.suggestions {
    border: 2px solid #ECECEC;
}
li {
    padding: 5px;
}
li img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
}
li .username, li .close {
    display: inline-block;
    position: relative;
    bottom: 15px;
    left: 5px;
}
  </style>
</head>
​
<body>
<div class="container">
    <div class="header">
         <h2>Who to follow</h2><a href="#" class="refresh">Refresh</a>
    </div>
    <ul class="suggestions">
        <li class="suggestion1">
            <img />
            <a href="#" target="_blank" class="username">this will not be displayed</a>
            <a href="#" class="close close1">x</a>
        </li>
        <li class="suggestion2">
            <img />
            <a href="#" target="_blank" class="username">neither this</a>
            <a href="#" class="close close2">x</a>
        </li>
        <li class="suggestion3">
            <img />
            <a href="#" target="_blank" class="username">nor this</a>
            <a href="#" class="close close3">x</a>
        </li>
    </ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.async.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.coincidence.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.binding.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.time.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs-dom/2.0.7/rx.dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="tutorial-refactor.js"></script>
</body>
​
    

Modified http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.async.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.coincidence.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.binding.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.time.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/rxjs-dom/2.0.7/rx.dom.js to a secure url

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.js

https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.async.js

https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.coincidence.js

https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.binding.js

https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.2.26/rx.time.js

https://cdnjs.cloudflare.com/ajax/libs/rxjs-dom/2.0.7/rx.dom.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js