In response to an /r/datavizrequests submission, where a user provided this dataset, and requested a relationship mapping. I created a few visualizaitons using a web visualization library called D3.js. I used Mike Bostock’s Chord example to render these Chord Charts.
6 Concepts
20 Concepts
Here is a link to the interactive version. Highlighting a concept will isolate its relationships.
How to place a tack or knife a map. Throw darts programmatically .
a google map
Here is the javascript,
you need your own google maps api key.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=(YOUR_OWN_KEY)&sensor=false">
</script>
<script type="text/javascript">
function initialize()
{
var myOptions = {center: new google.maps.LatLng(38.4686, -123.0028),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var lat = 38.4686;
var long = -123.0028;
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
map: map
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:60%; height:60%"></div>
</body>
</html> |
Now you can write your name on islands! : D
This simple example will demonstrate how to use javascript to write to, and read from, html5 local storage.
The file being parsed and saved is books.xml. There are two html pages here, LAUNCH.html and OFFLINE.html.
LAUNCH.html will parse the xml file and write it to the user’s browser:
OFFLINE.html will allow the user to search the content of their local storage
