This is the map of Nielen Designated Marketing Areas using D3.js. Hover over for data related to each area.
See map here
See code here
| { | |
| "scripts": [ | |
| "react", | |
| "react-dom" | |
| ], | |
| "styles": [] | |
| } |
| <digital-art dpr="auto" aria-hidden="true"> | |
| <script type="buffer" name="position" data-size="2"> | |
| [-1, -1, -1, 1, 1, -1, 1, -1, 1, 1, -1, 1] | |
| </script> | |
| <script type="vert"> | |
| precision highp float; | |
| uniform float time; | |
| uniform vec2 resolution; | |
| varying vec4 vPos; | |
| attribute vec4 position; |
| <div class="container"> | |
| <div id="score"></div> | |
| <canvas id="game" width="375" height="375"></canvas> | |
| <div id="introduction">Hold down the mouse to stretch out a stick</div> | |
| <div id="perfect">DOUBLE SCORE</div> | |
| <button id="restart">RESTART</button> | |
| </div> | |
| <a id="youtube" href="https://youtu.be/eue3UdFvwPo" target="_blank"> | |
| <span>See how this game was made</span> |
In order to learn Clojure, and start participating in the Athens Research community, I signed up for the ClojureFam program. I'm part of Team Phanes and will be using this journal to document my learning journey over the coming weeks 🙌
Valuable references:
| .summerdream | |
| .sea | |
| .surface | |
| //- .inner | |
| //- .fishes | |
| //- .fish | |
| //- .body | |
| .ship | |
| .rotate | |
| .move |
A Pen by Amit Sheen on CodePen.
| { | |
| "title": "Status Bar", | |
| "description": "Describes how we augment the status bar", | |
| "steps": [ | |
| { | |
| "file": "src/extension.ts", | |
| "line": 36, | |
| "description": "### Activation\nThe status bar provider is registered upon extension activiation", | |
| "selection": { | |
| "start": { |
| <body bgcolor=#223><center> | |
| <div style=font-size:45px><b>ℤ𝕫𝔽𝕏 - Zuper Zmall Zound Zynth</b></div> | |
| <div style=font-size:20px><i>A tiny tool for creating and playing sound effects with JavaScript</i></div> | |
| <div style=max-width:799px> | |
| <div style=font-size:20px> | |
| <input id=volume type=range min=0 max=1 step=.01 oninput='zzfxV=volume.value;volumeText.innerHTML=volume.value*100|0'></input> | |
| Volume <span id=volumeText>30</span> % | |
| </div> | |
| <button onClick=zzfx(...[,,1675,,.06,.24,1,1.82,,,837,.06])>💰</button> | |
| <button onClick=zzfx(...[,,925,.04,.3,.6,1,.3,,6.27,-184,.09,.17])>🥊</button> |
Calling it flower chain would actually be appropriate. Experiment with SVG syntax and anime.js to chain a series of animation.
I'm still uncertain as to how anime.js converts the coordinates to pixel values, but it seems to work.
A Pen by Gabriele Corti on CodePen.
