School homework for Krishan, my 7 year old, looking at famous rock landmarks. We surfed the net and stored some examples in a Google Sheet and exported the data into JSON to display with some filters.
Last active
June 8, 2019 01:29
-
-
Save eesur/967e8781d783d6005305 to your computer and use it in GitHub Desktop.
d3 | famous rock landmarks
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
| function render(data, category) { | |
| var base = d3.select("section").selectAll("div.h-bar") | |
| .data(data) | |
| .enter() | |
| .append("div") | |
| .attr("class", "h-bar"); | |
| var imageWrap = base // append for images | |
| .append("div") | |
| .attr("class", "imageWrap"); | |
| var spanWrap = base // append spans for text | |
| .append("span"); | |
| d3.select("section").selectAll("div.h-bar") | |
| .data(data) | |
| .exit().remove(); | |
| var bar = d3.select("section").selectAll("div.h-bar") | |
| .data(data) | |
| .attr("class", "h-bar") | |
| .select("div span") | |
| .html(function (d) { | |
| return d.name + " <br /> age: " + d.age + " years" + " <br /> location: " + d.location + " <br /> fact 1: " + d.fact1 + " <br /> fact 2: " + d.fact2; | |
| }); | |
| var image = d3.select("section").selectAll("div.imageWrap") | |
| .data(data) | |
| .html(function (d) { | |
| return "<img src=\"" + d.image + "\" alt=\"\">" ; | |
| }); | |
| d3.select("section").selectAll("div.h-bar") | |
| .filter(function (d, i) { | |
| return d.category == category; | |
| }) | |
| .classed("selected", true) | |
| } | |
| render(data); | |
| function select(category) { | |
| render(data, category); | |
| } |
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> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>rocks | krishans homework</title> | |
| <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js" charset="utf-8"></script> | |
| <style type="text/css"> | |
| @import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,600); | |
| /*$h: 512px; | |
| $w: 950px;*/ | |
| .font-styles, body { | |
| font-family: "Source Code Pro", Consolas, monaco, monospace; | |
| font-size: 18px; | |
| line-height: 1.5; | |
| font-weight: 400; | |
| } | |
| body { | |
| position: relative; | |
| color: #130C0E; | |
| background-color: #eee; | |
| padding: 40px; | |
| } | |
| button { | |
| background: #7AC143; | |
| border: none; | |
| padding: 5px 10px; | |
| font-size: 18px; | |
| } | |
| button#blue { | |
| background: #00B0DD; | |
| } | |
| div.h-bar { | |
| background: #00B0DD; | |
| margin-bottom: 5px; | |
| padding: 10px; | |
| padding-left: 300px; | |
| position: relative; | |
| min-height: 180px; | |
| margin-right: 20px; | |
| } | |
| div.h-bar.selected { | |
| background: #7AC143; | |
| } | |
| section { | |
| padding-top: 20px; | |
| } | |
| .imageWrap img { | |
| width: 250px; | |
| height: 180px; | |
| position: absolute; | |
| left: 10px; | |
| top: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class='control-group'> | |
| <h2>Types of rock: </h2> | |
| <button onclick="select('sandstone')">Sandstone</button> | |
| <button onclick="select('granite')">Granite</button> | |
| <button onclick="select('chalk')">Chalk</button> | |
| <button id='blue' onclick='select()'>Clear</button> | |
| </div> | |
| <section></section> | |
| <script src="rocks_dataset.js"></script> | |
| <script src="eesur.js"></script> | |
| </body> | |
| </html> |
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
| var data = | |
| [ | |
| { | |
| "name": "Old Harry Rocks", | |
| "location": "England", | |
| "age": 60000000, | |
| "category": "chalk", | |
| "fact1": "UNESCO World Heritage site", | |
| "fact2": "located at end of the Jurassic Coast", | |
| "image": "https://dl.dropboxusercontent.com/s/oiucxmhvv1ird3w/8050343_f1024.jpg?dl=0" | |
| }, | |
| { | |
| "name": "Ayers Rocks (Uluru)", | |
| "location": "Australia", | |
| "age": 600000000, | |
| "category": "sandstone", | |
| "fact1": "height of more than 318 metres", | |
| "fact2": "its colour changes at sunset and sunrise", | |
| "image": "https://dl.dropboxusercontent.com/s/l0avqbzcxmutzh0/8057512_f520.jpg" | |
| }, | |
| { | |
| "name": "Immortal Bridge, Mt. Tai", | |
| "location": "China", | |
| "age": 1800000, | |
| "category": "granite", | |
| "fact1": "world's highest bridge", | |
| "image": "https://dl.dropboxusercontent.com/s/jfs5ss6nueo5vjt/800px-Immortal_Bridge_-_Mt_Tai.JPG" | |
| }, | |
| { | |
| "name": "Painted Cliffs", | |
| "location": "Tasmania", | |
| "age": 5000000, | |
| "category": "sandstone", | |
| "fact1": "100 meter stretch of beautiful patterns", | |
| "image": "https://dl.dropboxusercontent.com/s/0rz50du4fuhtehc/8050427_f1024.jpg" | |
| }, | |
| { | |
| "name": "Split Apple Rock", | |
| "location": "New Zealand", | |
| "age": 2000000, | |
| "category": "granite", | |
| "fact1": "split into two by freezing and expanding", | |
| "fact2": "legend that the Greek gods caused it in a fight", | |
| "image": "https://dl.dropboxusercontent.com/s/0bn4hf3c2b0m4wi/8054138_f1024.jpg" | |
| }, | |
| { | |
| "name": "Mount Fuji", | |
| "location": "Japan", | |
| "age": 600000, | |
| "category": "granite", | |
| "fact1": "Mount Fuji is the tallest mountain in Japan", | |
| "fact2": "Mount Fuji is a symbol of Japan", | |
| "image": "https://dl.dropboxusercontent.com/s/xin15mdk2dosusq/Mount-Fuji-Japan-Beautiful.jpg" | |
| } | |
| ] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment