devkmem's Graphical Calculator Spice

[devkmem]

Spice Pull Request Template

Using this template will help us better understand your Instant Answer and assist you when necessary. Simply copy and paste the markdown below into the description of your GitHub pull request and complete as appropriate.

What does your Instant Answer do?
Graphical calculator for displaying equations entered as search queries.

What problem does your Instant Answer solve (Why is it better than organic links)?
Displays the equation graph on the DDG search results page without the need to select and load a separate page.

What is the data source for your Instant Answer? (Provide a link if possible)
http://maurizzzio.github.io/function-plot/
https://github.com/maurizzzio/function-plot

Why did you choose this data source?
Used as an example from mathjs.org

Are there any other alternative (better) data sources?
Hard to answer if there is anything "better;" this is the best I have found

What are some example queries that trigger this Instant Answer?
Please see t/GraphicalCalculator.t for 23 examples, plus counter-examples.
Note: see problems below.

Which communities will this Instant Answer be especially useful for? (gamers, book lovers, etc)
General math oriented.

Is this Instant Answer connected to a DuckDuckHack Instant Answer idea?
https://duck.co/ideas/idea/4683/graphing-feature
https://duck.co/ideas/idea/114/display-graph-for-function
https://duck.co/ideas/idea/5865/plot-a-graph

Which existing Instant Answers will this one supersede/overlap with?
None; it should be compatible and complementary with a non-graphical calculator

Are you having any problems? Do you need our help with anything?

1. The IA requires three external JS libraries (see share/spice/graphical_calculator/js/).
   For local development I hacked perl5/lib/perl5/App/DuckPAN/Web.pm. After line 436 insert:

$calls_script .= "<script type='text/JavaScript' src='share/spice/graphical_calculator/js/d3/3.5.6/d3.min.js'></script>"
                 . "<script type='text/JavaScript' src='share/spice/graphical_calculator/js/mathjs/1.7.0/math.min.js'></script>"
                 . "<script type='text/JavaScript' src='share/spice/graphical_calculator/js/function-plot.min.js'></script>";

1. t/GraphicalCalculator.t lists 11 equations that should work, but do not. I made a local test install of the function-plot library, and based on this testing it appears that the issue is with the library. The github author (Mauricio Poppe) should be contacted and we'll see if we can get this fixed.

What are the terms of use for the API? Will DuckDuckGo need specific authorization (e.g. an API key)? Are there any costs associated with API usage?
No APIs are used. License on math.js is Apache 2; license on d3 is BSD; license on function-plot is MIT.

Where did you hear about DuckDuckHack? (For first time contributors)
Web.

What does the Instant Answer look like? (Provide a screenshot for new or updated Instant Answers)

Checklist

Please place an 'X' where appropriate.

[X] Added metadata and attribution information
[X] Wrote test file and added to t/ directory
[X] Verified that instant answer adheres to design guidelines (https://duck.co/duckduckhack/design_styleguide)
[X] Verified that instant answer adheres to code styleguide (https://duck.co/duckduckhack/code_styleguide)
[*] Tested cross-browser compatibility

    Please let us know which browsers/devices you've tested on:
    - Windows 8
        [] Google Chrome
        [] Firefox
        [] Opera
        [] IE 10

    - Windows 7
        [] Google Chrome
        [] Firefox
        [] Opera
        [] IE 8
        [] IE 9
        [] IE 10

    - Windows XP
        [] IE 8

    - Mac OSX
        [X] Google Chrome
        [X] Firefox
        [] Opera
        [X] Safari

    - iOS (iPhone)
        [] Safari Mobile
        [] Google Chrome
        [] Opera

    - iOS (iPad)
        [] Safari Mobile
        [] Google Chrome
        [] Opera

    - Android
        [] Firefox
        [] Native Browser
        [] Google Chrome
        [] Opera

• Used Google Chrome for some testing on virtual mobile devices (e.g., iPhone 6).

[moollaza]

@devkmem thanks a lot for contributing, we really appreciate it!

I really wish you would have reached out to us though to have this idea approved before you started working on it. Did you happen to notice that part of the documentation? If not its OK, it's our fault and we need to make it more clear!

The reason why is because an IA like this requires some planning and discussion on our end. Especially when you start using custom templates and 3rd party JS libs.

I'll need to show this to the team and discuss it further before we can move ahead with this.

Can you explain the purpose of the 3 different libs and also give me their minified sizes?

Thanks again!

[devkmem]

Thanks; there is actually some coordination going on; loop internally and PM me for details.

Can you explain the purpose of the 3 different libs and also give me their minified sizes?

function-plot.min.js (uglifyjs-ed function-plot "bundle.js"): 162049 bytes
math.min.js (version 1.7.0): 317297
d3.min.js (version 3.5.6): 151145

Re purpose, they are the guts of http://maurizzzio.github.io/function-plot/

Please note re the 'problems' section above, this is not a production request. It is an MVP (Minimum Viable Product) built for early evaluation.

Best.

[moollaza]

You can use DDG.get_asset_path() (https://duck.co/duckduckhack/spice_js_api#getassetpathspicename-asset) to load these libs.

That way you won't need to mess with DuckPAN or anything else :)

[devkmem]

Perfect; thanks.

[bsstoner]

Sorry for the confusion here, I should have pinged @moollaza about it. 🙈

@devkmem has been working with us on this and it's a work in progress until we can sort out of a few things. Also need to get the design team involved.

[moollaza]

👍

[jagtalon]

Closing this. Code is in https://github.com/duckduckgo/zeroclickinfo-spice/tree/ideas/graphical-calc if anyone wants to finish it!