A real-time D3 visualization of geocoded data derived from tweets retrieved from the Twitter streaming API.
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css Initial commit. Oct 7, 2015
data Initial commit. Oct 7, 2015
js Initial commit. Oct 7, 2015
lib Initial commit. Oct 7, 2015
.gitignore Initial commit. Oct 7, 2015
README.md Add instruction to visit localhost. Oct 7, 2015
index.html Initial commit. Oct 7, 2015

README.md

d3-twitter-geo-stream

The D3 Twitter Geo Stream is a real-time D3 visualization of geocoded data derived from tweets retrieved from the Twitter streaming API.

The number of geocoded tweets authored in each country is visualized as bar chart, which animates the country count data as it is updated and resorted.

Each geocoded tweet is visualized as a point of longitude and latitude on the map. As each new tweet is authored, it's location is visualized as set of animated concentric circles that increase in radius and decrease in opacity over time. When the concentric circles have disappeared, the location is marked with a color-coded dot that matches the color of the country in the bar chart.

Watch the D3 Twitter Geo Stream video on YouTube.

D3 Twitter Geo Stream

Running

The D3 Twitter Geo Stream is an HTML page that should be served from an HTTP server. Two easy to use web servers are Python's built in HTTP server and the Node.js http-server module.

To run the Python web server, change to the directory containing the d3-twitter-geo-stream repository and issue the following command:

python -m SimpleHTTPServer

Or, to run http-server, change to the directory containing the d3-twitter-geo-stream repository and issue the following command:

http-server -p 8000

If you don't have the http-server module installed, install it with the following command:

npm install http-server -g

The -g command-line option installs the http-server globally to make it available from any directory.

After running the HTTP server, visit the following URL in your web browser:

http://localhost:8000/

To visualize real-time geocoded data, you must also be running an instance of the Twitter Geo Server, which is described in the next section.

The Geocoded Data Source

The D3 Twitter Geo Stream visualization connects to an instance of the Twitter Geo Server over a web socket. The port on which the Twitter Geo Server runs is configurable with a command-line parameter. This port is set in the D3 Twitter Geo Stream by the call to the streamGeoDataOnPort function in index.html. Here the Twitter Geo Server is running on port 5025:

<body onload="streamGeoDataOnPort(5025)">