Pablo Navarro pnavarrc

[ Launch Inlet ]Gist #3200444

This variation of a line chart demonstrates a sequence of chained transitions. Clicking on the radio buttons changes the displayed metric. First, the line transitions to the new values. Then, the axes rescale to fit the new data.

Automatic Label Placement

This example is an extension of Mike Bostock’s tutorial Lets Make a Map that implements automatic label placement using the force layout and multiple foci. The centroid of each feature will define a foci of the force. This foci will attract the label that correspond to that feature (and ignore the others). The labels will repel themselves to avoid overlapping.

References

Bee Anatomy

This gist is to show how to integrate a raster image and a svg overlay to create images that show the parts of an object. In this case, I show the main parts of the bee anatomy.

The svg image was created with Inkscape. First, the raster image is inserted in the svg file to draw the shapes. Then, each path is given an id to allow its identification in the web version. For instance, the forewings, the lines and the corresponding text are given ids to allow its identification and assignment of a class in the page.

WIth D3, we use mouseover and mouseout to show and hide the elements of the same class that the selected element.

Thanks to Joost Witteveen for sharing the photo of the bee with cc Attribution license.

We couldn’t find that file to show.

	<!DOCTYPE html>
	<html>
	<head>
	<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.4/mapbox.js'></script>
	<script src='http://d3js.org/d3.v2.js?2.9.3'></script>
	<link
	href='http://api.tiles.mapbox.com/mapbox.js/v0.6.4/mapbox.css'
	rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Drag Behavior Demo</title>
	</head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<body>

	<script type="text/javascript">

	# Using Python requests and the Google Maps Geocoding API.
	#
	# References:
	#
	# * http://docs.python-requests.org/en/latest/
	# * https://developers.google.com/maps/

	import requests

	GOOGLE_MAPS_API_URL = 'http://maps.googleapis.com/maps/api/geocode/json'

	hygfull.csv:
	curl -LO 'https://github.com/astronexus/HYG-Database/raw/master/hygfull.csv'

	hyg.json: hygfull.csv
	python parse-catalog.py

	URL = http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/50m/physical/ne_50m_land.zip

	ne_50m_land.zip:
	curl -LO $(URL)

	ne_50m_land.shp: ne_50m_land.zip
	unzip ne_50m_land.zip
	touch ne_50m_land.shp

	land.json: ne_50m_land.shp