0

I've been trying out certain mpld3 plots and have come up with a doubt. I know mpld3 plots can be saved locally using savefig() function. My question is whether it would be possible to provide a download option so as to download the plot as an image in the browser itself. Attached herewith are the codes and screenshots:

ps = PorterStemmer()
stop_words = set(stopwords.words('english'))
file1 = open("test.txt")
line = file1.read()
words = line.split()
appendFile = open('outputFile.txt','w')
for r in words:
    if not r in stop_words:
        appendFile = open('outputFile.txt','a')
        appendFile.write(" "+r)
file=open("outputFile.txt","r+")
D={}
for word in file.read().split():
    if word not in D:
        D[word] = 1
    else:
        D[word] += 1

#print D

fig1=plt1.figure(figsize=(500/96, 400/96))
lists = sorted(D.iteritems(), key=lambda (k,v): (v,k), reverse=True) # sorted by key, return a list of tuples
#print lists
x, y = zip(*lists[:15]) # unpack a list of pairs into two tuples

plt1.title("Top Topics vs Count")
plt1.xlabel('Topics')
plt1.ylabel('Count')

plt1.bar(x, y,align='center',color='#ffd200')
k=sorted(D, key=D.get, reverse=True)
plt1.xticks(range(15), k[:15], fontsize=6)

locs, labels = plt1.xticks()
plt1.setp(labels, rotation=90)

return mpld3.fig_to_html(fig1)

The code plots the text from text file using mpld3(additional info for reference)

Plot Screenshot:

enter image description here

As you can see from the screenshot, the plot is running on flask and this needs to be converted to an image for downloading.

vvvvv
  • 25,404
  • 19
  • 49
  • 81
Amal Sailendran
  • 341
  • 1
  • 2
  • 16

1 Answers1

1

This StackOverflow link may at least partly address the question: Save D3 chart as image

It mentions a GitHub package called saveSvgAsPng (https://github.com/exupero/saveSvgAsPng) and how to use it to translate the D3 charts into a .png file.

The JavaScript-side mpld3 code basically takes the JSON specification that mpld3.fig_to_dict() generates for a matplotlib plot and it renders it in the DOM as D3 elements (<svg> and other nested elements). There is no raster-based image that is stored in the browser, so you can't directly download a png from this. But a tool such as saveSvgAsPng can allow you to translate that element of the DOM into a downloadable .png file. I don't know if there are other tools for PDFs, jpegs, etc.

We have websites we've created which allow the user to click on a button in the browser to download the figures, but the way they work is by telling the Python code on the server-side (through an HTTP-based remote procedure call) to replot the figure and save a file on the server to be downloaded. So there the server renders the plot, which I suppose might be the best option if you want your saved plot files to look like the original matplotlib figures rather than their D3 translations/approximations. (In one of our sites, https://github.com/optimamodel/optima/blob/develop/client/source/js/modules/charts/charts.js#L218 has the JavaScript-side RPC call, which calls https://github.com/optimamodel/optima/blob/develop/client/source/js/modules/common/rpc-service.js#L74 , and the following RPC Python server code is ultimately called: https://github.com/optimamodel/optima/blob/develop/server/webapp/dataio.py#L1103 )