This example uses data from the Daily Global Weather Measurements data set, originally collected by the National Climactic Data Center and available as a public data set on Amazon Web Services (AWS). Only selected weather stations are shown. See this blog post for a description of the data wrangling to produce the smaller csv files used in this example.
This example uses D3 for an integrated multi-part visualization with interactivity and animation.
In [1]:
from IPython.core.display import display, HTML
from string import Template
import pandas as pd
import json
In [2]:
HTML('<script src="lib/d3/d3.min.js"></script>')
Out[2]:
In [3]:
worldmap_data = json.loads(open('data/worldmap.json','r').read())
In [4]:
sites_data_stations = pd.read_csv('data/stations.csv')
sites_data_stations.head()
Out[4]:
In [5]:
sites_data_temps = pd.read_csv('data/monthly_temps.csv')
sites_data_temps.head()
Out[5]:
In [6]:
sites_data_temps = sites_data_temps.sort_values(by='ID')
In [7]:
temps_by_ID = []
previous_ID = -1
collected_temps = {}
for i,row in sites_data_temps.iterrows():
if (row['ID'] != previous_ID) and (previous_ID != -1):
temps_by_ID.append(collected_temps)
collected_temps = {}
collected_temps[row['month']] = {'ave': row['ave'],
'max': row['max'],
'min': row['min']}
previous_ID = row['ID']
temps_by_ID.append(collected_temps)
site_data_temps_2 = pd.DataFrame({'ID': sites_data_temps['ID'].unique(),
'temps': temps_by_ID})
site_data_temps_2.head()
Out[7]:
In [8]:
sites_data = pd.merge(sites_data_stations, site_data_temps_2, on='ID')
sites_data.head()
Out[8]:
In [9]:
sites_data_dict = sites_data.to_dict(orient='records')
In [10]:
html_template = Template('''
<style> $css_text </style>
<div><svg width="700" height="500px" id="graph-svg"></svg></div>
<script> $js_text </script>
''')
In [11]:
css_text = open('css/temperature_histories.css','r').read()
In [12]:
js_text_template = Template(open('js/temperature_histories.js','r').read())
js_text = js_text_template.safe_substitute({'worldmapdata': json.dumps(worldmap_data),
'sitesdata': json.dumps(sites_data_dict) })
In [13]:
display(HTML(html_template.substitute({'css_text': css_text, 'js_text': js_text})))