SVG String parsing error

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 :slight_smile: So Please if you see something wrong with the string help out.


Ok! Finally got my ducks :slight_smile:

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


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:

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.


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

represents the Google search for expensive cars. The place to fix this is on the Javascript side by 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"


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.

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

1 Like

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


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 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. While X3D is not natively rendered by the browser, X3Dom is a good Javascript library to render it. That’s what I used, for example, to generate this trefoil knot and this 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 that I participated in a few years ago.

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

Now look at these

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.


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


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


1 Like