# SVG String parsing error

**URL:** https://talk.observablehq.com/t/svg-string-parsing-error/3272
**Category:** Help
**Created:** [May 12, 2020, 2:34pm UTC](https://talk.observablehq.com/t/svg-string-parsing-error/3272 "2020-05-12T14:34:05Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![dara](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/dara/32/3057_2.png) [@dara](https://talk.observablehq.com/u/dara)
#### Post date: [May 12, 2020, 2:34pm UTC](https://talk.observablehq.com/t/svg-string-parsing-error/3272/1 "2020-05-12T14:34:05Z")

</div>

> **[Wolfram Cloud Free Form 2D Regions](https://observablehq.com/@ccnlog/wolfram-cloud-free-form-2d-regions)**
>
> Makes a cloud call with a FREE FORM Interface to specify mixed mathematical and English input. Outputs the reults in SVG String. I then stole some code from Bostock for read the String. Exmaples: implicit region x^2 plus y^2==1 implicit region x^2 +...

I stole some code from Bostock for converting SVG String into an image.

When I manually copy the String by hand from Mathematica Free Form output into the Observable notebook, it works, when I call the Wolfram Cloud and query for it some syntax error appears.

I suspect, as we have seen before, Mathematica fiddles with some quotes when exporting the String.

Off to buy my duckies from farmers markets @ Kilkenney this is first day we are allowed to go to the markets 🙂 So Please if you see something wrong with the string help out.

Dara

---

<div class="post-metadata">

### Author: ![dara](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/dara/32/3057_2.png) [@dara](https://talk.observablehq.com/u/dara)
#### Post date: [May 12, 2020, 5:45pm UTC](https://talk.observablehq.com/t/svg-string-parsing-error/3272/2 "2020-05-12T17:45:17Z")

</div>

Ok! Finally got my ducks 🙂

In spite of the syntax error all is working, so I am able to run the region computing in Wolfram Cloud and then output the 2D plot into SVG String form into the Observable Notebook, Bostock’s code works great thank you Sir to convert from SVG to String !!

Now I need to figure out how to do regions in 3D and nD.

Some issue with + operator in Mathematica I am going to call Wolfram Techsupport to fix.

I will be back soon

Dara

---

<div class="post-metadata">

### Author: ![dara](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/dara/32/3057_2.png) [@dara](https://talk.observablehq.com/u/dara)
#### Post date: [May 12, 2020, 5:52pm UTC](https://talk.observablehq.com/t/svg-string-parsing-error/3272/3 "2020-05-12T17:52:20Z")

</div>

If the region computing works and we can connect Wolfram Cloud to Observable notebook then Observable users could do amazing scientific computing like the pros in these cute little notebooks of yours!

There will be no need to load huge number of Python and Fortran libraries and all will be at your finger tips.

In particular you have full calculus on the regions e.g. integration, volume, area, perimeter measures.

You can do booleans on the regions, extract boundaries.

You could also spray regions with random points, compute the shortest distances and etc.

If you have a death wish you could solve differential equations over regions:

[https://reference.wolfram.com/language/ref/NDSolve.html](https://reference.wolfram.com/language/ref/NDSolve.html)

Once I figure out how to do 3D regions then will issue base notebooks for many of these with Free Form interface for the community to use.

Dara

---

<div class="post-metadata">

### Author: ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)
#### Post date: [May 12, 2020, 6:03pm UTC](https://talk.observablehq.com/t/svg-string-parsing-error/3272/4 "2020-05-12T18:03:42Z")

</div>

> [@dara](#):
>
> Some issue with + operator in Mathematica I am going to call Wolfram Techsupport to fix.

The plus sign issue is not a Mathematica issue; it’s a URL issue because plus signs in URLs represent spaces. For example, the URL

```
https://www.google.com/search?q=expensive+cars

```

represents the Google search for expensive cars. The place to fix this is on the Javascript side by [percent encoding](https://en.wikipedia.org/wiki/Percent-encoding) your query. The easy way to do that is to use the `encodeURIComponent` function. That is, replace your `input1` definition

```
input1 = "implicit region x^2 + y^2=1"

```

with

```
input1 = encodeURIComponent("implicit region x^2 + y^2=1")

```

Note that, without the URL encoding, the plus sign is interpreted as a space which (in Mathematica) yields multiplication, which is why you got the graph you got before.

---

<div class="post-metadata">

### Author: ![dara](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/dara/32/3057_2.png) [@dara](https://talk.observablehq.com/u/dara)
#### Post date: [May 12, 2020, 6:10pm UTC](https://talk.observablehq.com/t/svg-string-parsing-error/3272/5 "2020-05-12T18:10:01Z")

</div>

OMG I forgot … you are genius! Let me cancel the techsupport ticket at Wolfram!

---

<div class="post-metadata">

### Author: ![dara](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/dara/32/3057_2.png) [@dara](https://talk.observablehq.com/u/dara)
#### Post date: [May 12, 2020, 6:24pm UTC](https://talk.observablehq.com/t/svg-string-parsing-error/3272/6 "2020-05-12T18:24:38Z")

</div>

I added a fancy polynomial region, I will develop the grammar some more tonight to allow the programmers to enter booleans and other functions to compute serious domains suitable for research and etc.

I will also add the Complex domains shortly.

Special note of gratitude to Prof. Mc Clure and Bostock.

Now some nice person tell me how to do the 3D rendering from JSON or some other format, NOT FILE ATTACHMENTS

D

---

<div class="post-metadata">

### Author: ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)
#### Post date: [May 12, 2020, 7:46pm UTC](https://talk.observablehq.com/t/svg-string-parsing-error/3272/7 "2020-05-12T19:46:36Z")

</div>

> [@dara](#):
>
> Now some nice person tell me how to do the 3D rendering from JSON or some other format, NOT FILE ATTACHMENTS

Since you’re using the Wolfram Cloud anyway, then by far the easiest way to embed a rotatable, 3D image is to simply point to one of their generated cloud objects. It’s pretty easy to embed those in an iframe, too. [Here’s an Observable notebook](https://observablehq.com/d/e98d86bb7be6e184) that accepts a user defined, free form bivariate function definition, passes that to an API in the Wolfram Cloud, and displays the result in the Observable notebook.

Of course, there might still be reasons that you want to take the output as JSON and render it in Observable. To do so would be considerably more work than the 2D stuff you did with SVG. The reason is that SVG is a well established XML based file format for 2D graphics that Mathematica can export to nicely and that virtually all browsers render natively. The closest thing for 3D would be [X3D](https://www.web3d.org/x3d/what-x3d). While X3D is not natively rendered by the browser, [X3Dom](https://www.x3dom.org/) is a good Javascript library to render it. That’s what I used, for example, to generate [this trefoil knot](https://observablehq.com/@mcmcclur/the-trefoil-knot) and [this 3D Choropleth](https://observablehq.com/@mcmcclur/nc-covid-3d-choropleth).

More problematic is Mathematica’s ability to export X3D, which is limited to be polite. You can read a discussion in this [StackExchange thread](https://mathematica.stackexchange.com/questions/81104/can-mathematica-produce-manipulatable-3d-plots-for-deployment-on-the-web) that I participated in a few years ago.

---

<div class="post-metadata">

### Author: ![dara](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/dara/32/3057_2.png) [@dara](https://talk.observablehq.com/u/dara)
#### Post date: [May 12, 2020, 7:53pm UTC](https://talk.observablehq.com/t/svg-string-parsing-error/3272/8 "2020-05-12T19:53:34Z")

</div>

Terrific, I know how to get the 3D rendering out of the Wolfram Cloud. The quality is very low.

Now look at these

[http://research.lossofgenerality.com/life-sciences-cloud/](http://research.lossofgenerality.com/life-sciences-cloud/)

Same 3D computations from Mathematica but using other Three.js vendors.

THe problem with those vendors is that they only do one thing, plot a 3D scene and animations are primitive.

But I take your advice and not bother with 3D @ Observable. So I use Woflram Cloud or other vendors and use iframe as you did.

More on the grammar shortly

Thanx for the help.

Dara

---

<div class="post-metadata">

### Author: ![dara](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/dara/32/3057_2.png) [@dara](https://talk.observablehq.com/u/dara)
#### Post date: [May 12, 2020, 8:03pm UTC](https://talk.observablehq.com/t/svg-string-parsing-error/3272/9 "2020-05-12T20:03:25Z")

</div>

What I am preaching these days is that no one vendor or organization can do it all, there is a mentality of monolithic companies can do them all!

Defining the focus for our software endeavor has been the most difficult task.

Why I came to Observable, once I see the notebook technology has some weight

Dara

---

<div class="post-metadata">

### Author: ![dara](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/dara/32/3057_2.png) [@dara](https://talk.observablehq.com/u/dara)
#### Post date: [May 13, 2020, 12:35pm UTC](https://talk.observablehq.com/t/svg-string-parsing-error/3272/10 "2020-05-13T12:35:18Z")

</div>

I was the only customer for the birds! Very sad.

In Ireland we cannot build basements nor pools, specially in the farmlands where my lab is. So for now a rubber inflatable pool has to do until we pour some above the ground cement box for the girls.

I will keep you all abreast of their news

![duckies](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/6/6b6d379978d813eca9f233d4862b4d9d68a32c70.jpeg)
