In the example you are using, the code is targeting <body> to insert the
graph, that's why it was not on the paragraph.
Here is a fixed example:
https://www.zeppelinhub.com/viewer/notebooks/bm90ZTovL2Rjb3JuZWF1L1BlcnNvbmFsLU5vdGVib29rcy80NzU5L25vdGUuanNvbg
If you want to improve this even further, you might have also to take care
of automatically resizing the graph based on its paragraph container.

On Tue, Jun 7, 2016 at 12:23 PM, anish singh <[email protected]> wrote:

> Hello,
>
> Here are the links to the images that contain those visualizations [0] ,
> [1], [2]. For the chord diagram in [0]. I simply used the visualization at
> http://bl.ocks.org/mbostock/4062006 inside html display. The bar chart in
> [1], was blue when it was drawn but it turned black on clicking 'clear
> output' option and was not erased from the screen. Other issues are stated
> in a previous mail in this thread.
>
> [0].
>
> https://drive.google.com/file/d/0ByXTtaL2yHBuZmcxdl9UU1diM3M/view?usp=sharing
> [1]. https://drive.google.com/open?id=0ByXTtaL2yHBuUzdDaS1rRy1SYUk
> [2]. https://drive.google.com/open?id=0ByXTtaL2yHBuazFVdmNmcEFhQWc
>
> Thanks,
> Anish.
>
> On Tue, Jun 7, 2016 at 8:29 AM, Corneau Damien <[email protected]>
> wrote:
>
> > We can't see the image in this email.
> > Maybe you should host it somewhere and then post the link.
> >
> > Another method would be to share your notebook so that we can try it out.
> > You can use https://www.zeppelinhub.com/viewer if the notebook is hosted
> > somewhere public
> >
> > On Tue, Jun 7, 2016 at 11:40 AM, anish singh <[email protected]>
> wrote:
> >
> > > Hello,
> > >>
> > >> I was trying to create custom visualizations using d3 and html display
> > >> but after running the paragraph containing the code(%html), the
> > >> results(visualizations) don't occur inside the paragraphs, instead
> they
> > >> come in the background outside the paragraphs, (as in the image). This
> > >> happens with nearly all the visualizations except for a few.[image:
> > >> visualization0.png]
> > >> ​The problem persists even after reducing the height and width of
> 'svg'
> > >> element. Also, after clicking on the 'clear output' button of the
> > paragraph
> > >> which generated the output, the visualizations are not erased. Since
> > output
> > >> of a paragraph is not erased, multiple visualizations occur for the
> same
> > >> paragraph result. For example, if I run a paragraph to generate bar
> > chart
> > >> five times, then five bar charts keep coming in the background
> > >> space(outside paragraphs) one under the other. The same thing happens
> if
> > >> the visualizations are generated using Helium.
> > >>
> > >> This may distort the structure of the notebook. However, this does not
> > >> happen with Google Maps(tried with both html display and Helium).
> Please
> > >> let me know if I'm doing something wrong or how to solve this. The
> chord
> > >> diagram in the figure is at http://bl.ocks.org/mbostock/4062006 .
> > >>
> > >> Thanks,
> > >> Anish.
> > >>
> > >
> > >
> >
>

Reply via email to