def show_d3(figure=None):
    """
    Show matplotlib fig using d3.js.
    """
    if figure:
        img = mpld3.fig_to_html(figure, d3_url=D3_URL)
    else:
        img = mpld3.fig_to_html(fig, d3_url=D3_URL)
    dat = img.replace('\n', '\r')
    print 'embed:', dat

def render_webfigure(var_dict):

  userlon = float(var_dict['userlon'])
  userlat = float(var_dict['userlat'])
  data = var_dict['data']

  fig, ax = plt.subplots(figsize=(15,10))

  #return antlons, antlats, scss, cats, separations, geodesics, contour_lons, contour_lats
  antlons = data[0]
  antlats = data[1]
  scss = data[2]
  cats = data[3]
  contour_lons = data[6]
  contour_lats = data[7]

  #print userlon
  plt.plot(userlon, userlat, 'g*', ms=40)
  plt.scatter(antlons, antlats, c='r')
  for i in xrange(len(antlons)):
    label = '{} ({})'.format(scss[i], cats[i])
    plt.text(antlons[i]+.05, antlats[i], label)
    plt.plot(contour_lons[i], contour_lats[i])
    #print contour_lons[i], contour_lats[i]

  import json
  execfile("/Users/mwoods/Work/OldJobs/JobSearch/Pre-Insight/plotUSA.py")
  jdata = json.load(open("/Users/mwoods/Work/OldJobs/JobSearch/Pre-Insight/states.json"))
  i=0
  for state in jdata['geometries']:
    i+=1
    j=0
    # State only has one border, do not enter into 'for each border' loop.
    if len(state['coordinates'][0]) != 1:
      x,y = np.array(state['coordinates']).T
      plt.plot(x,y, 'b', lw=3)
      continue
    # There is a list with multiple borders (islands)
    for shape in state['coordinates']:
      x,y = np.array(shape[0]).T
      plt.plot(x,y, 'b', lw=3)
  plt.xlim(userlon-1, userlon+1)
  plt.ylim(userlat-1, userlat+1)
  plt.xlabel("Longitude")
  plt.ylabel("Latitude")
  #plt.gca().set_aspect('equal')


  #plt.hist(np.random.random(100))
  #plt.scatter(np.random.random(100), np.random.random(100))
  fig_html = mpld3.fig_to_html(fig)

  return mpld3.fig_to_html(fig)

    def pos_salaries_distribution(self):
        """
        This is a function to analyze and plot salaries distribution by positions.

        Return:
        html: a string of html of by-position salaries distribution plot.
        pos: a dataframe with salaries statistics by positions.
        """
        salaries_pos_year = self.df[[self.year,'POS']].dropna()
        positions = ['C','PF','SF','SG','PG']
        salaries_pos_year = salaries_pos_year[salaries_pos_year['POS'].isin(positions)]
        pos = [salaries_pos_year[salaries_pos_year['POS'] == position].describe().rename(columns={self.year:position}) for position in positions] #store by-position salaries statistics into a list
        pos = pd.concat(pos, axis=1) #merge all by-position dataframes
        #convert all elements in dataframe into integers
        for position in positions:
            pos[position] = pos[position].apply(lambda x: int(x))

        ax = salaries_pos_year.boxplot(by='POS',sym='r*',figsize=(10,6))
        ax.set_axis_bgcolor('#EEEEEE')
        ax.grid(color='white', linestyle='solid')

        #add positions name text into the boxplot
        loc = salaries_pos_year.groupby('POS').median()
        for i in xrange(0,5):
            ax.text(i+1, 
                    loc[self.year][i], 
                    loc.index[i], 
                    ha='center',
                    va='bottom')
        plt.title('')
        ax.set_xlabel('Positions', fontsize=16)
        fig = ax.get_figure()
        html = mpld3.fig_to_html(fig)
        plt.close()
        return html, pos

    def overall_salaries_trend(self):
        """
        This function is to analyze and plot nba salaries trend.

        Return:
        html: a string of html for the salaries trend plot.
        salaries: a dataframe with salaries statistical information (e.g., mean, min, max) in each year. 
        """
        years = xrange(2000,2016)
        salaries = [self.df[year].describe().apply(lambda x: int(x)) for year in years] #store salaries statistical information for each year in a list
        salaries = pd.concat(salaries, axis=1).T.drop(['25%','75%'],1) #merge all salaries statistical information dataframes into a dataframe

        fig = plt.figure(figsize=(10,6))
        ax = fig.add_subplot(111, axisbg='#EEEEEE')
        ax.grid(color='white', linestyle='solid')
        ave_salaries = self.df.mean() #calculate the average salaries for each year
        plt.bar(self.df.columns, ave_salaries, 0.5, color='#0077FF', alpha=0.5)
        ax.set_xlabel('Year', fontsize=16)
        ax.set_ylabel('Average Salaries', fontsize=16)
        ax.xaxis.set_label_coords(0.5,-0.08)
        ax.yaxis.set_label_coords(-0.14,0.5)
        plt.title('2000-2015 NBA Average Salaries Trend')
        html = mpld3.fig_to_html(fig)
        plt.close()
        return html, salaries

    def plot(self, notebook=False, colormap='polar', scale=1, maptype='points', show=True, savename=None):

        # make a spatial map based on the scores
        fig = pyplot.figure(figsize=(12, 5))
        ax1 = pyplot.subplot2grid((2, 3), (0, 1), colspan=2, rowspan=2)
        if maptype is 'points':
            ax1, h1 = pointmap(self.scores, colormap=colormap, scale=scale, ax=ax1)
        elif maptype is 'image':
            ax1, h1 = imagemap(self.scores, colormap=colormap, scale=scale, ax=ax1)
        fig.add_axes(ax1)

        # make a scatter plot of sampled scores
        ax2 = pyplot.subplot2grid((2, 3), (1, 0))
        ax2, h2, samples = scatter(self.scores, colormap=colormap, scale=scale, thresh=0.01, nsamples=1000, ax=ax2, store=True)
        fig.add_axes(ax2)

        # make the line plot of reconstructions from principal components for the same samples
        ax3 = pyplot.subplot2grid((2, 3), (0, 0))
        ax3, h3, linedata = tsrecon(self.comps, samples, ax=ax3)

        plugins.connect(fig, LinkedView(h2, h3[0], linedata))
        plugins.connect(fig, HiddenAxes())

        if show and notebook is False:
            mpld3.show()

        if savename is not None:
            mpld3.save_html(fig, savename)
        elif show is False:
            return mpld3.fig_to_html(fig)

    def to_html(self):
        import matplotlib.pyplot as plt
        html = fig_to_html(self.content, figid="generatedchart")
        #closes fig element (refresh)
        plt.close()

        return html

def display_figure(fig, message=None, max_width='100%'):
    "Display widgets applicable to the specified element"
    if OutputMagic.options['fig'] == 'repr': return None

    figure_format = OutputMagic.options['fig']
    dpi = OutputMagic.options['dpi']
    backend = OutputMagic.options['backend']

    if backend == 'nbagg' and new_figure_manager_given_figure is not None:
        manager = new_figure_manager_given_figure(OutputMagic.nbagg_counter, fig)
        # Need to call mouse_init on each 3D axis to enable rotation support
        for ax in fig.get_axes():
            if isinstance(ax, Axes3D):
                ax.mouse_init()
        OutputMagic.nbagg_counter += 1
        manager.show()
        return ''
    elif backend == 'd3' and mpld3:
        fig.dpi = dpi
        mpld3.plugins.connect(fig, mpld3.plugins.MousePosition(fontsize=14))
        html = "<center>" + mpld3.fig_to_html(fig) + "<center/>"
    else:
        renderer = Store.renderer.instance(dpi=dpi)
        figdata = renderer.figure_data(fig, figure_format)
        if figure_format=='svg':
            figdata = figdata.encode("utf-8")
        b64 = base64.b64encode(figdata).decode("utf-8")
        (mime_type, tag) = MIME_TYPES[figure_format], HTML_TAGS[figure_format]
        src = HTML_TAGS['base64'].format(mime_type=mime_type, b64=b64)
        html = tag.format(src=src)
    plt.close(fig)
    return html if (message is None) else '<b>%s</b></br>%s' % (message, html)

def draw_fig(fig_type):
    """Returns html equivalent of matplotlib figure

    Parameters
    ----------
    fig_type: string, type of figure
            one of following:
                    * line
                    * bar

    Returns
    --------
    d3 representation of figure
    """

    with lock:
        fig, ax = plt.subplots()
        if fig_type == "line":
            ax.plot(x, y)
        elif fig_type == "bar":
            ax.bar(x, y)
        elif fig_type == "pie":
            ax.pie(pie_fracs, labels=pie_labels)
        elif fig_type == "scatter":
            ax.scatter(x, y)
        elif fig_type == "hist":
            ax.hist(y, 10, normed=1)
        elif fig_type == "area":
            ax.plot(x, y)
            ax.fill_between(x, 0, y, alpha=0.2)

    
    return mpld3.fig_to_html(fig)

def run(data):
    global t0, lines, test
    
    print data
    #override t to be count of seconds
    t=time.time()-t0
    tdata.append(t)

    for sensor in all_data:
        for axis in all_data[sensor]:
            if axis=="x":i=0
            if axis=="y":i=1
            if axis=="z":i=2
            # if test==0: print sensor+" ("+axis+")"
            all_data[sensor][axis].append(data[sensor][i])
            lines[sensor][axis][0].set_data(tdata, all_data[sensor][axis])
    # all_lines=[[axis for axis in sensor.values()] for sensor in lines.values()]
    # test=1
    #MOVING WINDOW
    xmin, xmax = ax[0].get_xlim()
    if t >= xmax-1: #once the line get's 9 10ths of the way...
        #move the window by 5 seconds forward
        
        xmin+=5
        xmax+=5
        for i in range(len(axes)):
            ax[i].set_xlim(xmin, xmax)
        # print 'test'
        ax[0].figure.canvas.draw()
        ax[1].figure.canvas.draw()
        ax[2].figure.canvas.draw()
    html=mpld3.fig_to_html(fig)
    print html
    # mpld3.show(fig)
    return html

def get_heatmap(ds):
    plt.close('all')
    corrmat = ds.corr()
    fig, ax = plt.subplots()
    sns.heatmap(corrmat, vmax=.8, square=True)
    heatmap_html = mpld3.fig_to_html(fig)
    return heatmap_html

 def draw(self, name=None, old=None, new=None):
     if name is not None and self.DONT_DRAW.match(name):
         return
     
     if self._FREEZE:
         return
     
     plot_and_message = ''
     
     # Better way would be a decorator or something that only goes into draw if not autoupdate
     if self.autoupdate:
         
         # Generate new figure object
         f = plt.figure(figsize=(self.figwidth, self.figheight))
         if PLOTPARSER.is_3d(self.kind):
             projection = '3d'
         else:
             projection = None
         ax = f.add_subplot(111, projection=projection)
         
         if self._color_state or self.kind not in ['spec', 'waterfall', 'contour', 'contour3d']:
             colorkwags = dict(color=self.color)
         else:
             colorkwags = dict(cmap=self.colormap, cbar=self.colorbar)
         
         self.spec_modified.plot(ax=ax,
                                 fig=f,
                                 kind=self.kind,
                                 norm=self.NORMUNITS_REV[self.norm_unit],
                                 **colorkwags
                                 )
         f.tight_layout() #Padding around plot
         lines = ax.get_lines()
         plt.close(f)
                                 
         #http://mpld3.github.io/modules/API.html
         if self.interactive:
             import mpld3
             if self.selectlines:
                 from line_plugin import HighlightLines
                 
                 for idx, col in enumerate(self.spec_modified.columns):
                     name = 'COLUMN(%s): %s' % (idx, col)
                     tooltip = mpld3.plugins.LineLabelTooltip(lines[idx], name)
                     #voffset=10, hoffset=10,  css=css)
                     mpld3.plugins.connect(f, tooltip)
                 
                 mpld3.plugins.connect(f, HighlightLines(lines))
             
             plot_and_message += mpld3.fig_to_html(f)
         else:
             plot_and_message += mpl2html(f)
         
         self.fig_old = f
     
     else:
         plot_and_message += html_figure(self.fig_old)
     
     # VALUE IS WHAT GUI LOOKS UP!!!
     self.value = plot_and_message

def plot_to_html( name = None ):
    """Converts a matplotlib figure, such that it can be displayed in an html page
        either using an embedded svg tag (default)
        or by using mpld3 
    """
    result = ""
    if mpld3_available and use_mpld3 :
        html = mpld3.fig_to_html( plt.gcf() )
        result = html
    else:
        figStr = io.StringIO()
        plt.savefig( figStr, format='svg', bbox_inches='tight' )
        result = figStr.getvalue()
    
    if write_pdfs and name:
        if not os.path.exists(pdf_output_dir):
            os.makedirs(pdf_output_dir)

        filename = os.path.join(pdf_output_dir, name + '.pdf')
        filepath = os.path.join(filename)
        plt.savefig( filepath, bbox_inches='tight' )
        result = '<a href="%s" > %s </a>' % ( filename, result )
        
    plt.clf()
        
    return result

def map_plot():
    import matplotlib.pyplot as plt, mpld3
    import numpy as np
    from mpl_toolkits.basemap import Basemap

    fig, ax = plt.subplots()
    m = Basemap()
    #m = Basemap(projection='ortho',lat_0=0,lon_0=0,resolution='l')     
    #m = Basemap(projection='moll',lon_0=0,resolution='l')     
    # Shift 'lon' from [0,360] to [-180,180], make numpy array
    #tmp_lon = np.array([lon[n]-360 if l>=180 else lon[n] 
    #                   for n,l in enumerate(lon)])  # => [0,180]U[-180,2.5]
    
    #i_east, = np.where(tmp_lon>=0)  # indices of east lon
    #i_west, = np.where(tmp_lon<0)   # indices of west lon
    #lon = np.hstack((tmp_lon[i_west], tmp_lon[i_east]))  # stack the 2 halves
    
    # Correspondingly, shift the 'air' array
    #tmp_air = np.array(air)
    #air = np.hstack((tmp_air[:,i_west], tmp_air[:,i_east]))
    #poly_paths = m.drawcoastlines().get_paths() # coastline polygon paths
    #X,Y = np.meshgrid(lon,lat)
    
    m.etopo()
    #m.contourf(X, Y, air, 40, alpha=.75, cmap='jet')
    #ticks=range(-90,90,30)
    #ax.set_yticks(ticks)
    
    #ax.set_ylabel("Latitude", fontsize=16)
    #ax.set_xlabel("Longitude", fontsize=16)
    #plt.colorbar()
    
    # D3 Works!
    #mpld3.display(fig)
    return mpld3.fig_to_html(fig,template_type="general")

def simple_plot():
    import matplotlib
    matplotlib.use('Agg')
    import matplotlib.pyplot as plt, mpld3
    fig, ax = plt.subplots()
    plot = ax.plot([3,1,4,1,5], 'ks-', mec='w', mew=5, ms=20)
    return mpld3.fig_to_html(fig, template_type = "general")

def generate_histogram(dates, values):
    """
    Generate a barchart from the given information.

    This function receives a list of floats and a list of labels
    and uses them to generates a barchart histogram.

    Keyword arguments:
    values -- a list of values for each bar of the chart.
    labels -- a list of labels for each bar of the chart.
    """
    #n_groups = len(values)


    fig, axes = plt.subplots()
    axes.plot(dates, values, 'o--')
    plt.ylim([0, 5])
    one_mon_rel = relativedelta(months=1)
    plt.xlim([min(dates), max(dates) + one_mon_rel])
    fig.set_size_inches(12, 5)
    plt.xlabel('Videos through time')
    plt.ylabel('Mean video scores')
    plt.title('Channel\'s video progress through time')
    plt.legend()
    plt.tight_layout()

    return mpld3.fig_to_html(fig)

def save_and_or_show_plot(show=None, savefig="None", **kwargs):
    """ Save and/or show current matplotlib figure

    Parameters
    ----------
    show: bool or None
        Show plot, when None only show when savefig is not used
        default: None
    savefig: string
        path to output file of figure. If extension is html, mpld3
        will be used to generate a d3 backed html output.
    \*\*kwargs:
        keyword arguments passed on to ``matplotlib.pyplot.savefig``
    """
    if savefig is not None and savefig != "None":
        if savefig.endswith(".html"):
            # Export using mpld3
            import mpld3

            open(savefig, "wt").write(mpld3.fig_to_html(plt.gcf()))
        else:
            plt.savefig(savefig, **kwargs)

        if show is None:
            show = False
    else:
        if show is None:
            show = True

    if show:
        plt.show()

def d3():
    rtimes, rt, rp = np.loadtxt("data/data.txt").T
    mask = np.logical_and(rtimes>1391000000, rtimes<1393000000)
    rtimes = rtimes[mask]
    rt = rt[mask]
    rtimes = map(datetime.datetime.fromtimestamp, rtimes)
    rtimes = matplotlib.dates.date2num(rtimes)
    fig, axis = plt.subplots()

    axis.xaxis_date()
    fig.autofmt_xdate()
    axis.plot_date(rtimes, rt, "-",linewidth=3, color="black")

    forecast_list = []
    for fname in glob.glob("data/forecast.1391*.txt"):
        stamp = fname.split(".")[1]
        times, tempa = np.loadtxt(fname).T
        times = map(datetime.datetime.fromtimestamp, times)
        times = matplotlib.dates.date2num(times)

        points = np.array([times, tempa]).T.reshape(-1, 1, 2)
        segments = np.concatenate([points[:-1], points[1:]], axis=1)
        lc = LineCollection(segments, cmap=plt.get_cmap("jet"),
                            norm=plt.Normalize(0, 1))
        lc.set_array(np.linspace(0,1,len(times)))
        lc.set_linewidth(1)
        axis.add_collection(lc)

        axis.plot_date(times, tempa, "-", linewidth=2)



    return fig_to_html(fig)

 def renderFigure(self, fig):
     def genMarkup(chartFigure):
         return self.env.from_string("""
                 {0}
                 {{%for message in messages%}}
                     <div>{{{{message}}}}</div>
                 {{%endfor%}}
             """.format(chartFigure)
         ).render(messages=self.messages)
         
     if not self.useMpld3:
         import base64
         try:
             from io import BytesIO as pngIO
         except ImportError:
             from StringIO import StringIO as pngIO
         png=pngIO()
         plt.savefig(png, pad_inches=0.05, bbox_inches='tight', dpi=self.getDPI())
         try:
             return( 
                 genMarkup("""
                         <center><img style="max-width:initial !important" src="data:image/png;base64,{0}"  class="pd_save"></center>
                     """.format(base64.b64encode(png.getvalue()).decode("ascii"))
                 )
             )
         finally:
             png.close()
     else:
         mpld3.enable_notebook()
         try:
             return genMarkup(mpld3.fig_to_html(fig))
         finally:
             mpld3.disable_notebook()

    def mpld3_to_html(self):
        """This require to call a plotting figure before hand"""
        from gdsctools import gdsctools_data
        # This copy the full path and therefore HTML cannot
        # be moved in another directory. to be fixed.
        js_path1 = gdsctools_data('d3.v3.min.js', where='javascript')
        js_path2 = gdsctools_data('mpld3.v0.2.js', where='javascript')
        try:
            # mpld3 is great but there are a couple of issues
            # 1 - legend zorder is not used so dots may be below the legend,
            #     hence we set the framealpha =0.5
            # 2 - % character even though there well interpreted in matploltib
            #     using \%, they are not once parsed by mpld3. So, here
            #     we remove the \ character
            axl = pylab.legend(loc='best', framealpha=0.8, borderpad=1)
            axl.set_zorder(10) # in case there is a circle behind the legend.
            texts = [this.get_text() for this in axl.get_texts()]

            for i, text in enumerate(texts):
                text = text.replace("\\%", "%")
                text += "  "
                axl.get_texts()[i].set_text(text)
            import mpld3
            htmljs = mpld3.fig_to_html(self.current_fig,
                            d3_url=js_path1,
                            mpld3_url=js_path2)
        except:
            htmljs = ""
        return """<div class="jsimage"> """ + htmljs + "</div>"

def csuppfb():
    if request.args['df'] :
        dataf1 =request.args['df']
        dataf = pd.read_csv(app.config['UPLOAD_FOLDER']+'/'+dataf1)        
        index_list=["Case Owner","Case Number","Support Survey - Service rating","Support Survey - Service feedback"]
        value_list = ["Age (Hours)"]
        pvt = pd.pivot_table(dataf, index=index_list, values=value_list,
                           aggfunc=[np.sum, np.mean, np.std], fill_value=0, columns=None)          
        
    agent_df = []
    for agent in pvt.index.get_level_values(0).unique():
        agent_df.append([agent, pvt.xs(agent, level=0).to_html()])
    env = Environment(loader=FileSystemLoader('.'))
    template = env.get_template("csupp.html")

    plt=mpld3.fig_to_html(pvt)

    template_vars={"title": "CSUPP FB REPORT", 
                "Excellent": get_summary_stats(dataf,"Excellent"),
                "Good": get_summary_stats(dataf,"Good"),
                "csupp_pivot_table": pvt.to_html(),
                "agent_detail": agent_df,   
                "csupp_pivot_graph": plt.to_html()}

    html_out = template.render(template_vars)

    return html_out