wrobstory

A Leaflet.js map created with Folium and the default D3 threshold scale. See the Gist for the python code to generate the dataframe. The map was generated with the following Python code:

map = folium.Map(location=[48, -102], zoom_start=3)
map.geo_json(geo_path=state_geo, data=state_data,
             columns=['State', 'Unemployment'],
             key_on='feature.id',
             fill_color='YlGn', fill_opacity=0.7, line_opacity=0.2,
             legend_name='Unemployment Rate (%)')
map.create_map(path='us_states.html')

wrobstory

A Leaflet.js map created with Folium and the default D3 threshold scale. See the Gist for the python code to generate the dataframe. The map was generated with the following Python code:

map.geo_json(geo_path=state_geo, data=state_data,
             columns=['State', 'Unemployment'],
             threshold_scale=[5, 6, 7, 8, 9, 10],
             key_on='feature.id',
             fill_color='BuPu', fill_opacity=0.7, line_opacity=0.5,
             legend_name='Unemployment Rate (%)',
 reset=True)

wrobstory

A Leaflet.js map created with Folium and the default D3 threshold scale, with data bound between the Pandas DataFrame and the TopoJSON. See the Gist for the python code to generate the dataframe. The map was generated with the following Python code:

map_1 = folium.Map(location=[48, -102], zoom_start=3)
map_1.geo_json(geo_path=county_geo, data_out='data1.json', data=df,
               columns=['GEO_ID', 'Employed_2011'],
               key_on='feature.id',
               fill_color='YlOrRd', fill_opacity=0.7, line_opacity=0.3,
               topojson='objects.us_counties_20m')
map_1.create_map(path='map_1.html')

wrobstory

A Leaflet.js map created with Folium and a custom D3 threshold scale, with data bound between the Pandas DataFrame and the TopoJSON. See the Gist for the python code to generate the dataframe. The map was generated with the following Python code:

map_2 = folium.Map(location=[40, -99], zoom_start=4)
map_2.geo_json(geo_path=county_geo, data_out='data2.json', data=df,
               columns=['GEO_ID', 'Unemployment_rate_2011'],
               key_on='feature.id',
               threshold_scale=[0, 5, 7, 9, 11, 13],
               fill_color='YlGnBu', line_opacity=0.3,
 legend_name='Unemployment Rate 2011 (%)',

wrobstory

A Leaflet.js map created with Folium and a custom D3 threshold scale, with data bound between the Pandas DataFrame and the TopoJSON. See the Gist for the python code to generate the dataframe. The map was generated with the following Python code:

map_3 = folium.Map(location=[40, -99], zoom_start=4)
map_3.geo_json(geo_path=county_geo, data_out='data3.json', data=df,
               columns=['GEO_ID', 'Median_Household_Income_2011'],
               key_on='feature.id',
               fill_color='PuRd', line_opacity=0.3,
               legend_name='Median Household Income 2011 ($)',
 topojson='objects.us_counties_20m')

wrobstory

Choropleth charts built with the d3.chart framework. choropleth_chart.js is the chart type definition, which allows for rapid iteration of different quantize-scale domain/range, colors, and projections. The colors are based on color brewer, and you can pass any of the sequential scale abbreviations ('BuGn', 'PuBuGn', etc) to the range parameter to iterate on colors.

wrobstory

Demonstration of binding Vincent graphs to individual GeoJSON data.

wrobstory

This visualization was created by calling the McFlyin API with the Stack Overflow data from the examples folder, then calling Bearcart on it. See the Python file in the Gist for the code.

wrobstory

Example for Cooperative Brushing and Tooltips in D3.

The completed chart, with both tooltips and brushing working cooperatively. You can start a brush-zoom on either the background or a data point.

wrobstory

Example for Cooperative Brushing and Tooltips in D3.

Scatterplot only - no tooltips or brush.