-2

I am trying to write an API that will read the data fed through a UI, filter the data and feed the data to a set of Javascript (D3) visualizations that I created and output the result as SVG/PNG/PDF. How am I going to implement this ? Let me know if more details are required for you to understand and answer the question. Any help would be highly appreciated.

Mina
  • 651
  • 6
  • 24
Shubham24
  • 1
  • 2
  • 1
    I dont think you would need a backend such as flask/bottle to do this. You can use HTML5 drag and drop API, read the file from it, and then pass this file to your D3 function, and render it. However, if you need to save these file to your server, you can send the file to server via POST request and do whatever you want with it in the backend. Please let me know if you need more info. – user2707389 May 15 '14 at 11:11
  • Thanks @user2707389 ! I am doing this as an exercise to learn Python and web-frameworks (flask/bottle). What would be the procedure to do this if I want to automate this process of uploading the files via UI and getting the output as SVG/PNG/PDF. – Shubham24 May 15 '14 at 11:31
  • Read this first: http://www.sitepoint.com/html5-file-drag-drop-read-analyze-upload-progress-bars/ .Summary: Add 'drop' event to your file drag and drop 'id'. Then obtain the file as in where he says 'Fetch File Objects'. Initiate the D3 function that takes this file as an input and draw it on canvas. However, I suggest: make an AJAX call to the server, and upon successful saving of the file, ask server to return same file to the browser, and draw the canvas. Javascript does not allow multi-threading and the backend operation is quicker in this case than the frontend rendering – user2707389 May 15 '14 at 11:41
  • Thanks @user2707389. I understood very little of this. I would like to make a UI with an API underneath. User should be able to upload the JSON data and the API would filter the data and return the visualizations created using D3 as SVG/PNG/PDF. I would like to automate the whole process so that the user do not need to modify the D3 parameters. Consider the user to be a JS novice. Thanks, Shubham – Shubham24 May 15 '14 at 11:48
  • Sorry if I was not clear. To ask a question, how familiar are you with D3? D3 actually takes in json directly, and you do not need to parse much. Let me know how familiar you are first. Then: http://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf/3514404#3514404 to convert to png. and then http://parall.ax/products/jspdf# to convert the image to pdf. To be honest, I googled these solutions as I have not exported to png/pdf but it seems pretty basic. – user2707389 May 15 '14 at 14:36
  • I am quite familiar with D3. I'm writing this API for someone else with no programming experience. I wanted to automate the process for her. So that she can just input the data and will get the output, without having to make changes to JS/D3 code. I know D3 is capable of fetching, filtering and modifying the data, but still I would like to write and host the API on a server so that she don't need to do anything. Thanks @user2707389 Shubham – Shubham24 May 15 '14 at 17:17
  • No, no she would not be doing anything at all. You will basically write a html file with javascript. The javascript will do the magic which you will write. She does not need to do anything. – user2707389 May 16 '14 at 02:40
  • Thanks @user2707389! We have a remote server where we would like to host the API, preferably developed using Python+bottle. What do I need to do that ? How do I integrate my API with the JS+D3 ? Regards, Shubham – Shubham24 May 16 '14 at 05:57
  • As D3 and all of the links that I put above are client-side codes, Python+bottle is not needed at all. You can even put the code in AMAZON S3. However, if you were to use a flask backend, you would serve the static files and template, as you would normally. (I mean .html in templates folder, and js inside static folder). Feel free to ask more questions. – user2707389 May 17 '14 at 07:39

1 Answers1

2

There is the HTML 5 drag and drop option that is already explained. But if you insist on getting a remote server involved then when you get data through you UI you need to save it in a file or db and then in your back end you clean the data (I assume your cleaning process is happening in Python for example) and then you have a cleaned data ready to be passed. Here you need flask and templates to pass the data to your HTML and evoke D3. If you take a look at Flask quick start then you'll see how flask comes in handy to mediate communication between a backend code and your HTML. From there you get a better idea. I also suggest reading this blog that explains a mini blog application using flask this covers API, Flask part of your question very well.

Mina
  • 651
  • 6
  • 24
  • Thanks Mina. It really helped. – Shubham24 May 18 '14 at 13:22
  • Glad it was helpful. Let me know if you need more clarification. – Mina May 20 '14 at 21:45
  • So, here is what I understood: I will have to write an API (hosted on a remote server), that will fetch the data from an existing API, filter the data and return the filtered data to /foo/bar (the input of @app.route(/foo/route) decorator). The D3.js code embedded in the HTML will call /foo/bar for and takes that data as input for the visualization. Am I right ? Did I miss anything ? Anything you would like to add ? Thanks. – Shubham24 May 21 '14 at 04:51