Re: how to embed a d3.js script in a view correctly?

[Alan Etkin]

Hi, I am new to web2py and I would like to embed a running (tested with flask)
javascript based on d3.js in a web2py view.

If the script can go in the body of the document, you can do this in a view:

{{=SCRIPT(_type="text/javascript", _src=URL(c="static", f="js/<the script's name>"))}}

Where <the script's name> is stored in the scaffolding app's static/js folder

If not, then you can add it to the head by appending the URL(...) to the response.files global object in the model

response.files.append(URL(...))

[António Ramos]

Try this,

{{response.files.append(URL(r=request,c='static',f='/js/d3.js'))}}

{{extend 'layout.html'}}

The in the web console try

d3.select('body').append('svg').append('circle').style("stroke", "gray").style("fill", "red").attr("r", 40).attr("cx", 50).attr("cy", 50);

I´m into D3.js too!

2013/1/12 Alan Etkin <spam...@gmail.com>

--
 
 
 

[Alan Etkin]

{{response.files.append(URL(r=request,c='static',f='/js/d3.js'))}}

{{extend 'layout.html'}}

That way, the script is only added for the current action (the function requested by the client), saving client resources

Another way would be adding them conditionally per-controller/function

(model code)

if request.controller in ("d3", "plot"):
    response.files.append(...)

(controller code)

if not request.function in ["about", "index", "contact"]:
    response.files.append(...)

There is detailed information on static files and the layout in the book

http://www.web2py.com/books/default/chapter/29/05#Page-layout

[Martina Gruber]

Alan and Ramos, thnk you for the answers.
Based on your recommendations I did the following:
1. Created a new app with the wizard (default layout, name: TestD3). Views: index,error and visualizations where I want to have the d3 stuff.
2. Put the d3 javascript file in static/js
3. In View TestD3/views/default/visualizations.html:

                   {{response.files.append(URL(r=request,c='static',f='/js/d3.js'))}}
                   {{extend 'layout.html'}}

                   <p>Here we would like to have some d3.js plots</p>
                   <script type="text/javascript">

                             d3.select('body').append('svg').append('circle').style("stroke", "gray").style("fill", "red").attr("r", 40).attr("cx", 50).attr("cy", 50);

                   </script>

This produced a red circle but the circle below the copyright 2013    -- powered by web2py line.
Of course I have to select properly because I want to have the circle inside:

  <section id="main" class="main row">
        <div class="span12">

I ll take some time to dive into web2py and then I will post whatever worked with d3.

[Sihui Huang]

Hi Martina,

Thanks for posting this! It's very helpful!

I'm also trying to use d3 in web2py.

I follow your example, it works!

But I don't know how to make to circle appear above the copyright 2013    -- powered by web2py line.

Here's the html file:

{{response.files.append(URL(r=request,c='static',f='/js/d3.js'))}}

{{extend 'layout.html'}}

 <section id="main" class="main row">

        <div class="span12">

<p>Here we would like to have some d3.js plots</p>

<script type="text/javascript">

d3.select('body').append('svg').append('circle').style("stroke", "gray").style("fill", "red").attr("r", 40).attr("cx", 50).attr("cy", 50);

</script>

</div>

</sction>

What should I add?

Thanks!!

[Martina Gruber]

Hi Sihui,

Just add a div with an id after extend layout and then select this id from d3.
If you select "body" and append a circle it will go at the bottom of the page.

{{response.files.append(URL(r=request,c='static',f='/js/d3.js'))}}

{{extend 'layout.html'}}

 

        <div id="mychart"> </div>

<script type="text/javascript">

d3.select('#mychart').append('svg').append('circle').style("stroke", "gray").style("fill", "red").attr("r", 40).attr("cx", 50).attr("cy", 50);

</script>

[António Ramos]

After all the pain learning d3 and angular i discovered d3js directives for angular.

using them inside web2py is easy

check one of them here about the line chart

http://cmaurer.github.io/angularjs-nvd3-directives/line.chart.html

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[DeadRabbittt]

Maybe a dumb question, but how can i use the d3js directives? I put all the dependencies in my static folder and wrote in my html file: 

<script src="js/angularjs-nvd3-directives.js"></script>
<script src="js/d3/d3.js"></script>
<script src="js/nvd3/nv.d3.js"></script>
<link rel="stylesheet" href="css/nvcd3/nv.d3.css"/>

<div ng-controller="ExampleCtrl">
    <nvd3-line-chart
        data="exampleData"
        id="exampleId"
        xAxisTickFormat="xAxisTickFormatFunction()"
        yAxisTickFormat="yAxisTickFormatFunction()"
        width="550"
        height="350"
        showXAxis="true"
        showYAxis="true">
            <svg></svg>
    </nvd3-line-chart>
</div>

just as in the link you provided. But the next two lines i dont really get:

In the Angular App, include nvd3ChartDirectives as a dependency.

var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']);

Create an Angular.js Controller, and assign json data to a scope variable.

and what do i have to write in my Controller file? 

Thanks for any help :)

[António Ramos]

To the first part of your question:

From Alain Etkin previous post ...

Try changing your code 

<script src="js/angularjs-nvd3-directives.js"></script>


<script src="js/d3/d3.js"></script>


<script src="js/nvd3/nv.d3.js"></script>


<link rel="stylesheet" href="css/nvcd3/nv.d3.css"/>

to something like

{{response.files.append(URL(r=request,c='static',f='/js/d3.js'))}}




{{extend 'layout.html'}}

or from your controller: 

(model code)


if request.controller in ("d3", "plot"):


    response.files.append(...)



(controller code)


if not request.function in ["about", "index", "contact"]:


    response.files.append(...)



There is detailed information on static files and the layout in the book



http://www.web2py.com/books/default/chapter/29/05#Page-layout

To the second part of your question:

you have your html directive

<div ng-controller="ExampleCtrl">


    <nvd3-line-chart
        data="exampleData"

You have to code inside your angular module a controller called "ExampleCtrl" 



inside this controller you have to set 

$scope.exampleData=[]




try filling this variable with data like in the examples from the directive.

When you see it working you move to real data, a json feed from a web2py controller.



It works !!!



Regards

António

[pollwerk]

Hello, I am new here and tried to get something working. It took some time until i realitzed its working but only in default/index.html (not in default/visualisations.html). Most realistic within the next days I will learn why. No need to reply. But I wanted to return the full code where I was successful the 1st time with D3. Now I can go ahead in an iterative way.  Its exactly what Martina has written. But I was not sure if this is all. Regards, Klaus  

---

{{response.files.append(URL(r=request,c='static',f='/js/d3.js'))}}

{{extend 'layout.html'}}

<div id="mychart"> </div>

<script type="text/javascript">

d3.select('#mychart').append('svg').append('circle').style("stroke", "gray").style("fill", "red").attr("r", 40).attr("cx", 50).attr("cy", 50);

</script>

-----