EzDevInfo.com

vincent

A Python to Vega translator

How to show pandas data on web page with d3 style graphs?

I have quite a few analysis routines in python with pandas. I would like to get started with putting these online perhaps with d3js. I'm a complete newbie. A few searches revealed packages such as vincent. There seems to be python web development with django. Should I be converting my scientific scripts into django somehow? Do I need to combine these together somehow with vincent and django? Does anyone know about any tutorials for this topic? I'm having a difficult time figuring out how to get started and what packages to use.


Source: (StackOverflow)

examples of interactive plots through python

Just wondering if there are examples(may be Ipython notebooks) of rendering interactive plots in python that are bit more involved than simple bar/line plots.

I did look at d3py and vincent. In the case of latter I was not able to find any example of interactive graphics but only static images using D3/JS. For d3py I am looking for an interesting graphic/s beyond simpler demo bar line plots.

Any Ipython notebook demonstrating the same would be very helpful. It will be good to know if there are other packages that I should be keeping on my radar. Did have a quick look at Bokeh but not sure if I shud wait a bit before it is more stable and has some documentation.

PS: looking for something that can be slickly integrated into a webpage


Source: (StackOverflow)

Advertisements

Python Vincent world map visualization: How to color each country individually?

Does anybody know how to assign individual colors to countries using vincent's map visualization?

In particular, after loading the world map as follows:

world_topo="static/custom/world-countries.topo.json"
geo_data = [{'name': 'countries',
         'url': world_topo,
         'feature': 'world-countries'}]
vis = vincent.Map(geo_data=geo_data, scale=200)

I could change the color of the map as follows:

vis.marks[0].properties.update.fill.value = '#084010'

However, I couldn't figure out how to color each country differently, for example assign white (#FFFFFF) to Antarctica.


Source: (StackOverflow)

Creating a multiline graph using Vincent

I am attempting to create a multiline graph using Vincent.

I have a csv file with the following layout:

,wk1,wk2,wk3,wk4,wk5,wk6,wk7,wk8,wk9
Tom J,97,65,82,65,101,84,79,71,83
Lisa R,95,87,95,65,61,78,93,95,56
Rich F,51,111,50,119,84,77,73,84,60
Anne E,63,68,89,70,95,80,56,75,82
Dan M,83,95,36,115,79,79,65,55,69
Mack W,67,89,72,79,47,64,113,94,33

Here is my code:

import pandas as pd
import vincent

df = pd.read_csv('weekscores.csv', index_col=0)

lines = vincent.Line(df)
lines.axis_titles(x='WEEKS', y='SCORE')
lines.legend(title='Player')
lines.to_json('line.html',html_out=True,html_path='line_template.html')

This runs and a graph is generated but no lines are displayed in the graph:

enter image description here

Inspecting the data using .grammar() I see something like this for each week's score:

{'val': 97, 'col': 'wk1', 'idx': 'Tom J'}

Any assistance in getting this to render is appreciated.


Source: (StackOverflow)

Vincent plots are not showing up, not receiving errors

For some reason I am getting the below when I try and plot something with Vincent:

<IPython.core.display.HTML at 0x10db19650>
<IPython.core.display.Javascript at 0x10db19d50>

Here's the code:

import pandas as pd
import vincent

data = pd.read_csv('kd.csv')
pd.set_option('display.max_columns', None)

df = pd.DataFrame(data=[data['Age'], data['FG'], data['FGA'], data['3P'], data['3PA']])
df = df.T

df[['FG', 'FGA', '3P', '3PA']] = df[['FG', 'FGA', '3P', '3PA']].astype(float)

line = vincent.Line(df)

line.display()

This happens in IPython and Ipython Notebook. Any idea why?


Source: (StackOverflow)

Adding a 'domainMax' property to an existing Vega visualisation using Vincent

I'm creating a StackedBar viz using Vincent in Python. Data is from a pandas dataframe, with each column representing a percentage and each row sums to 100%

Vincent / Vega is trying to be helpful and adding a buffer to the Y axis so that it maxes out at 110 (%) when I want to be 100.

The property I need to add is 'domainMax' in the grammar for the Y scale, but I can't work out how to use Vincent's PropertySet or similar commands to add this in after importing the Pandas dataframe.

Here's an example of the data with domainMax added in manually, can anyone advise on how to do this in Python

"scales": [
    {
      "domain": {
        "data": "table",
        "field": "data.idx"
      },
      "name": "x",
      "range": "width",
      "type": "ordinal"
    },
    {
      "domain": {
        "data": "stats",
        "field": "sum"
      },
      "name": "y",
      "nice": true,
      "range": "height",
      "type": "linear",
      "domainMax": 100  
    }

[...]


Source: (StackOverflow)

Prevent line smoothing in vicent area chart

I'm plotting a pandas dataframe using python vincent. For each subsequent period, a new group is added, which vincent handles nicely but matplotlib does not. The automatic smoothing in vincent, however, is causing the curves to extend out where data should not exist. Here is the vincent chart:

vincent.StackedArea(granite)

enter image description here

With a bit of manipulation in pandas, I can get the desired graph in matplotlib. How can I get this output in vincent?

granite2 = granite.cumsum(axis=1)
index = granite2.index.values
slant = granite2.fillna(method="ffill", axis=1, limit=1)
plt.fill_between(index, 0, granite2[index[0]].values)
for i in range(0,len(index)-1):
    plt.fill_between(index[i:], granite2[index[i]].values, slant[index[i+1]].values)

enter image description here


Source: (StackOverflow)

Is there a way to make Seaborn or Vincent interactive?

I've been trying to find a way to make Seaborn and Vincent interactive so that I can, for example, zoom in/out in a specific area of the plot in real time. Is this possible to do? Alternatively, are there other recommended libraries (that are not cloud-based services) that work well for visualizing time series data?


Source: (StackOverflow)

Adding chart title with Vincent/Vega

I am trying to create Vega charts in python using Vincent. Is there a way to add a title to the charts? For some reason I cannot find any chart examples created with Vincent and/or Vega that have a chart title on top.

Here is example code from the Vincent website:

import vincent
vincent.core.initialize_notebook()

# dicts of iterables
cat_1 = ['y1', 'y2', 'y3', 'y4']
index_1 = range(0, 21, 1)
multi_iter1 = {'index': index_1}
for cat in cat_1:
    multi_iter1[cat] = [random.randint(10, 100) for x in index_1]

bar = vincent.Bar(multi_iter1['y1'])
bar.axis_titles(x='Index', y='Value')
bar.width=700
bar.height=500
bar.display()

I have tried to do things like bar.title="Chart Title" without success.


Source: (StackOverflow)

Unable to plot worldmap with Vincent in iPython notebook

This question is probably related to Unable plot with vincent in IPython , although I think it's not exactly the same problem.

I can plot a bar chart using Vincent 0.4.4 in an IPython 0.13.1 notebook as in the following example (found in the docs):

import vincent
vincent.core.initialize_notebook()

bar = vincent.Bar(multi_iter1['y1'])
bar.axis_titles(x='Index', y='Value')
bar.display()

However, I'm unable to do the same thing with the worldmap representation in the data mapping example:

import vincent
geo_data = [{'name': 'countries',
             'url': world_topo,
             'feature': 'world-countries'}]

vis = vincent.Map(geo_data=geo_data, scale=200)
vis.to_json('vega.json')

I've replaced the value 'world_topo' with the path to the Topojson file (world-countries.topo.json) downloaded from here.

No errors are shown and nothing happens. I'm not using HTTPS, by the way. This is the simplest map chart example, so I guess it should work smoothly...

Any ideas?


Source: (StackOverflow)

Exporting Images from Vincent in ipython

I've been using vincent in python to make choropleth maps, now i'd like to make them into images to use for a presentation. Does anyone know how to do this? Below is the code I'm using:

county_borders = r'us_counties.topo.json'
geo_data = [{'name': 'counties',
         'url': county_borders,
         'feature': 'us_counties.geo'}]
choro_pop = vincent.Map(data=counties_only, geo_data=geo_data, scale=1500, projection='albersUsa',
      data_bind='CENSUS2010POP', data_key='FIPS',
      map_key={'counties': 'properties.FIPS'})
choro_pop.marks[0].properties.enter.stroke_opacity = ValueRef(value=0.5)
choro_pop.rebind(column = 'ESTIMATESBASE2010', brew = 'OrRd')
choro_pop.to_json('Counties_Population_choropleth.json', html_out=True, html_path='Counties_Population_choropleth.html')
choro_pop.display()

This gives me a map in the ipython notebook (yay!) and outputs both an html file and a .json file. The html file is just a "scaffold" it doesn't actually contain any data that I can tell, and it doesn't display anything when opened in a browser (I've tried chrome).

The .json file I know is dictionary-like, but I'm not sure how to use it to draw a nice image.

thanks!

edit1: This is what's in the html file

<html>
  <head>
    <title>Vega Scaffold</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script src="http://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8">    </script>
    <script src="http://trifacta.github.com/vega/vega.js"></script>
  </head>
  <body>
    <div id="vis"></div>
  </body>
<script type="text/javascript">
// parse a spec and create a visualization view
function parse(spec) {
  vg.parse.spec(spec, function(chart) { chart({el:"#vis"}).update(); });
}
parse("Counties_Population_change_choropleth.json");
</script>
</html>

Source: (StackOverflow)

Unable to plot using Vincent,

Slightly related to: Unable plot with vincent in IPython, yet none of the suggested solutions work for me. I'm using an IPython Notebook, also the latest version.

I'm using python 3.4 and just installed the latest version of Vincent. When I try to plot the example in the documentation:

import json
import vincent
vincent.initialize_notebook()

world_topo = r'world-countries.topo.json'
geo_data = [{'name': 'countries',
         'url': world_topo,
         'feature': 'world-countries'}]

vis = vincent.Map(geo_data=geo_data, scale=200)
vis.display()

I don't get anything plotted.


Source: (StackOverflow)

python vincent needing url address

I'm using vincent a data visualization package. One of the inputs it takes is path to data.

(from the documentation)

     `geo_data` needs to be passed as a list of dicts with the following
 |      format:
 |      {
 |          name: data name
 |          url: path_to_data,
 |          feature: TopoJSON object set (ex: 'countries')
 |      }
 |   

I have a topo.json file on my computer, but when I run that in, ipython says loading failed.

map=r'C:\Users\chungkim271\Desktop\DC housing\dc.json'
geo_data = [{'name': 'DC',
             'url': map,
             'feature': "collection"}]
vis = vincent.Map(geo_data=geo_data, scale=1000)
vis

Do you know if vincent only takes url addresses, and if so, what is the quickest way i can get an url address for this file?

Thanks in advance


Source: (StackOverflow)

How do you create multiple line graphs in Vincent with a date as the x axis?

I am working on a similar problem to this question: Creating a multiline graph using Vincent, except my index is a date. If I change the index to be numbers, it works fine. But as a date, it shows nothing on the graph.

Printing my data out ("results") that I pass into vincent.Line, I see the following:

{
    'index': [datetime.datetime(2015, 1, 1, 0, 0, tzinfo = psycopg2.tz.FixedOffsetTimezone(offset = -300, name = None)), datetime.datetime(2015, 2, 1, 0, 0, tzinfo = psycopg2.tz.FixedOffsetTimezone(offset = -300, name = None)), datetime.datetime(2015, 4, 1, 0, 0, tzinfo = psycopg2.tz.FixedOffsetTimezone(offset = -240, name = None)), datetime.datetime(2015, 5, 1, 0, 0, tzinfo = psycopg2.tz.FixedOffsetTimezone(offset = -240, name = None))],
    u 'Shoes': [0, 0, 4L, 0],
    u 'Household': [8L, 6L, 12L, 0],
    u 'Accessories': [0, 9L, 2L, 8L],
    u 'Books': [0, 36L, 0, 0],
    u 'Toys': [0, 12L, 0, 0],
    u 'Clothing': [0, 0, 53L, 16L]
}

And then I call:

import vincent
graph = vincent.Line(results, width=600, height=400, iter_idx='index')
graph.scales[0].type = 'time'
graph.axis_titles(x='Date', y=title)
graph.legend(title="Categories")
graph.to_json()

As I said, that does nothing. However, as soon as index are just numbers, it works fine. Any ideas? Am I missing something?


Source: (StackOverflow)

Canvas too large when reading a topojson file with Vincent

I want to display a topojson file using Vincent. I converted a shapefile to topojson with this command:

topojson -o /path/to/output/file.topo.json -- /path/to/input/file.shp

In order to display it, I'm using this code (in the Ipython Notebook):

import vincent
vincent.core.initialize_notebook()
world_topo = r'scot.topo.json'
geo_data = [{'name': 'countries',
              'url': world_topo,
             'feature': 'scot'}]

vis = vincent.Map(geo_data=geo_data, scale=1000)
vis.display()

However, this is the result:

enter image description here

Does anyone know why I get too much blank space using Vincent? This also happens without using the Ipython Notebook.

I also verified that shapefile in QGIS and it looks correct, so there is no extra blank space in the original file.

UPDATE:

I was able to center the image and reduce the amount of blank space but I'm not sure why it works. This is the code:

import vincent
vincent.core.initialize_notebook()
world_topo = r'scot.topo.json'
geo_data = [{'name': 'countries',
              'url': world_topo,
             'feature': 'scot'}]

vis = vincent.Map(geo_data=geo_data, scale=6000, center=[0,57])
vis.display()

enter image description here

Does anyone know what is the idea to get the right parameters? I tried first to get it working in D3 and although there are similarities in the code, vincent and d3 don't seem to produce the same result with the same parameters. This is the d3 code:

var width = 350,
    height = 450;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("scot.topo.json", function(error, s) {
  if (error) return console.error(error);
    var subunits = topojson.feature(s, s.objects.scot);
    var projection = d3.geo.albers()
        .center([0, 57])
        .rotate([4.4, 0])
        .parallels([50,60])
        .scale(4000)
        .translate([width / 2, height / 2]);
    var path = d3.geo.path()
        .projection(projection);
    svg.append("path")
        .datum(subunits)
        .attr("d", path);

}); 

Source: (StackOverflow)