Built with blockbuilder.org
Last active
March 19, 2020 08:01
-
-
Save GitNoise/547e75f608a2b200c5cec61a69d15dd1 to your computer and use it in GitHub Desktop.
World numbers
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.5.1/d3-annotation.min.js"></script> | |
| <style> | |
| body { | |
| padding:0;position:fixed;top:0;right:0;bottom:0;left:0; | |
| background: #222; | |
| } | |
| .cell { | |
| box-sizing: border-box; | |
| height: 3px; | |
| width: 3px; | |
| border-right: 1px solid #222; | |
| border-top: 1px solid #222; | |
| } | |
| .continent { | |
| width: 100px; | |
| font-family: Verdana; | |
| color: white; | |
| font-weight: bold; | |
| text-align: right; | |
| text-transform: uppercase | |
| } | |
| .container { | |
| width: 500px; | |
| margin-left: 8px; | |
| display: flex; | |
| } | |
| .time { | |
| margin-left: 108px; | |
| margin-top: 8px; | |
| width: 500px; | |
| color: white; | |
| font-family: Arial; | |
| font-size: 0.8em; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .left { | |
| transform: translateX(-50%); | |
| } | |
| .right { | |
| transform: translateX(50%); | |
| } | |
| .wrapper { | |
| display: flex; | |
| align-items: flex-start; | |
| margin-top: 16px; | |
| } | |
| svg { | |
| position: absolute; | |
| } | |
| .annotation path { | |
| stroke: white; | |
| } | |
| .annotation text { | |
| fill: white; | |
| font-family: arial; | |
| font-size: 14px; | |
| stroke: black; | |
| stroke-width:0.4px; | |
| font-weight: bold; | |
| } | |
| .annotation .annotation-note-title { | |
| font-family: verdana; | |
| font-size: 16px; | |
| stroke: black; | |
| stroke-width:0.5px; | |
| font-weight: bold; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div style="font-family: verdana; font-size: 2em; text-decoration: uppercase; color: white; font-weight: bold;"> | |
| Antal fall i världen | |
| </div> | |
| <div style="font-family: verdana; font-size: 1em; color: white;font-style:italic"> | |
| Utveckling över tid | |
| </div> | |
| <div class="wrapper"> | |
| <div class="continent">Afrika</div> | |
| <div class='container Afrika'></div> | |
| </div> | |
| <div class="wrapper"> | |
| <div class="continent">Amerika</div> | |
| <div class='container Amerika'></div> | |
| </div> | |
| <div class="wrapper"> | |
| <div class="continent">Asien</div> | |
| <div class='container Asien'></div> | |
| </div> | |
| <div class="wrapper"> | |
| <div class="continent">Europa</div> | |
| <div class='container Europa'></div> | |
| </div> | |
| <div class="wrapper"> | |
| <div class="continent">Oceanien</div> | |
| <div class='container Oceanien'></div> | |
| </div> | |
| <div class="time"> | |
| <div class="left">22 januari</div> | |
| <div class="middle"><div class="line"></div></div> | |
| <div class="right">idag</div> | |
| </div> | |
| <svg width=170 height=100> | |
| </svg> | |
| <script> | |
| const colorScale = d3.scaleLinear().domain([0, 40, 80]) | |
| .range(['#222', 'pink','red',]) | |
| const columns = 167; | |
| const continents = [ | |
| {name: 'Afrika', amount: 54}, | |
| {name: 'Amerika', amount: 35}, | |
| {name: 'Asien', amount: 44}, | |
| {name: 'Europa', amount: 37}, | |
| {name: 'Oceanien', amount: 14}, | |
| ]; | |
| continents.forEach((continent, ci) => { | |
| const container = d3.select(`.${continent.name}`); | |
| for( let c = 0; c<columns; c++) { | |
| const col = container.append('div').classed('col', true); | |
| for (let r=0; r<continent.amount; r++) { | |
| const cell = col.append('div') | |
| .classed('cell', true) | |
| .attr('id', `ci${ci}c${c}r${r}`) | |
| const preVal = c === 0 | |
| ? 0 | |
| : +d3.select(`#ci${ci}c${c - 1}r${r}`).attr('data-val'); | |
| let newVal = preVal; | |
| if ( | |
| (preVal === 0 && Math.random() < (ci + 1) / 100) || | |
| (preVal > 0 && Math.random() < 0.5) | |
| ) { | |
| newVal = newVal + 1; | |
| } | |
| cell.attr('data-val', newVal) | |
| cell.style('background', colorScale(newVal)) | |
| } | |
| } | |
| }) | |
| const radius = 5; | |
| const bcr = | |
| d3.select('#ci2c30r5').node().getBoundingClientRect(); | |
| console.log(bcr.x) | |
| console.log(bcr.y) | |
| d3.select('svg') | |
| .style('top', `${bcr.y - radius/2}px`) | |
| .style('left', `${bcr.x - radius/2}px`) | |
| const annotations = [{ | |
| note: { | |
| label: "Det händer något spännande här", | |
| title: "Kina" | |
| }, | |
| x: 10, | |
| y: 10, | |
| dy: 25, | |
| dx: 30, | |
| subject: { | |
| radius: radius, | |
| radiusPadding: 4, | |
| } | |
| }] | |
| const makeAnnotations = d3.annotation() | |
| .type(d3.annotationCalloutCircle) | |
| //accessors & accessorsInverse not needed | |
| //if using x, y in annotations JSON | |
| .annotations(annotations) | |
| d3.select("svg") | |
| .append("g") | |
| .attr("class", "annotation") | |
| .call(makeAnnotations) | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment