A D3 V5 implementation of a shaded globe mimic the 3d effect. Drag to rotate and middle wheel to zoom. The flyer arcs are interpolated from 2 control points.
You can modify the dataset (Topojson format) to change landmarks.
Vincent Pham vincentpham1991
vincentpham1991
/ README.md
Created
August 17, 2018 00:25
— forked from lunarmoon26/README.md
D3 V5 - Faux-3d Shaded Globe With Zoom, Places and Arcs
vincentpham1991
/ index.html
Created
August 15, 2018 20:52
— forked from ivyywang/README.md
Drag to Rotate the Globe
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 http-equiv="Content-Type" content="text/html;charset=utf-8"/> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script> | |
| <style type="text/css"> | |
| .land{ |
vincentpham1991
/ README.md
Created
May 2, 2016 05:27
— forked from nnattawat/README.md
Integrate brushing and scrolling zoom interactions
A fork of brush to zoom interaction integrated with scroll to zoom. Try brushing the small graph to zoom-in and use mousewheel on the zoomed graph to futher zoom in or out. The example can be viewed on bl.ocks.org
vincentpham1991
/ ECG2_data.csv
Created
May 1, 2016 06:53
Global Zooming via Brush for multiple graphs
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
| date | a | |
|---|---|---|
| 1/1/2014 13:00:00 | 5.0000000e-002 | |
| 1/1/2014 13:00:01 | 6.6100000e-001 | |
| 1/1/2014 13:00:02 | 9.9700000e-001 | |
| 1/1/2014 13:00:03 | 1.0900000e+000 | |
| 1/1/2014 13:00:04 | 1.1300000e+000 | |
| 1/1/2014 13:00:05 | 1.1550000e+000 | |
| 1/1/2014 13:00:06 | 1.1770000e+000 | |
| 1/1/2014 13:00:07 | 1.1860000e+000 | |
| 1/1/2014 13:00:08 | 1.1930000e+000 |
vincentpham1991
/ README.md
Created
May 1, 2016 06:26
— forked from peterk87/README.md
JS+D3: Zoomable, pannable scatterplot with shift keypress enabled brush multiselect of data points
This JS+D3 gist creates a scatterplot with zooming and panning enabled as well as a brush for selecting or deselecting points using the iris dataset within data.tsv.
The "Get Selection" button gets the current selection of points and prints their ids to the JS console (i.e. console.log(selection);).
The "Clear Selection" button clears the current selection.
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: gpl-3.0 |
vincentpham1991
/ cities.csv
Created
April 15, 2016 03:16
— forked from d3noob/.block
World map with zoom / pan and cities
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
| code | city | country | lat | lon | |
|---|---|---|---|---|---|
| ZNZ | ZANZIBAR | TANZANIA | -6.13 | 39.31 | |
| TYO | TOKYO | JAPAN | 35.68 | 139.76 | |
| AKL | AUCKLAND | NEW ZEALAND | -36.85 | 174.78 | |
| BKK | BANGKOK | THAILAND | 13.75 | 100.48 | |
| DEL | DELHI | INDIA | 29.01 | 77.38 | |
| SIN | SINGAPORE | SINGAPOR | 1.36 | 103.75 | |
| BSB | BRASILIA | BRAZIL | -15.67 | -47.43 | |
| RIO | RIO DE JANEIRO | BRAZIL | -22.90 | -43.24 | |
| YTO | TORONTO | CANADA | 43.64 | -79.40 |
vincentpham1991
/ README.md
Created
April 14, 2016 21:38
Strata Interactive Data Visualization: Exercise 3
These are the materials for my workshop at Strata San Jose 2015 as well as resources and next steps. Videos of the workshop can be found here.
We will be using the following two tools to works through these exercises:
- bl.ocks.org: D3.js Gist renderer and online community
- Building Blocks: In-browser interactive D3.js bl.ock editor
I would love your feedback on the materials either on the Q&A forum (Google Group) or in the Github issues.
And please do not hesitate to reach out to me directly via email at jondinu@gmail.com or over twitter @clearspandex
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"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> | |
| <style> | |
| body { | |
| font-family: futura; | |
| width: 960px; |
These are the materials for my workshop on creating interactive data visualizations with D3! We will be using the following two tools to work through the exercises:
- bl.ocks.org: D3.js Gist renderer and online community
- Building Blocks: In-browser interactive D3.js bl.ock editor
And please do not hesitate to reach out to me directly via email at jondinu@gmail.com or over twitter @clearspandex
Throughout this workshop, you will learn how to make an interactive map of AirBnB listings in SF to better understand the companies impact on the city.
NewerOlder