Amber and D3.js interaction

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
10 messages Options
Reply | Threaded
Open this post in threaded view
|

Amber and D3.js interaction

Tommaso DS
Hello,

I am trying to port in Amber some visualizations I have done with D3.js.

The problem is that in D3 I would write:

d3.selectAll('svg').append('rect')

to select a collection of elements (svg in this case) and call the method 'append' on each one of these elements.
In Amber this should become something like:

(d3 selectAll: 'svg') append: 'rect'

but this causes a MNU for the method #append:. This happens because the method #selectAll: returns an Array (of Arrays), where I would expect a JSObjectProxy. To make the trick work I have to use:

(JSObjectProxy on: (d3 selectAll: 'svn')) append: 'rect'

This however gets quickly unmanageable when you have to concatenate more instructions.
Is there a better way to do that?

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
Reply | Threaded
Open this post in threaded view
|

Re: Amber and D3.js interaction

SebastianHC
Hi!

Same problem here!

I once found some issue report on github regarding this issue and the way I was able to solve this was:

You need this:
allowJSCallsOn: anObject
    <anObject.allowJavaScriptCalls = true>

and then you do this:

 something := d3.selectAll:'svg'.
self allowJSCallsOn: something .
something append:'rect'.

I hope that works for you too.
In the end I think you are right. There shouldn'T be the need to do such thing... I have trouble with this in other respects too.

Sebastian



Am 14.01.2014 07:25, schrieb [hidden email]:
Hello,

I am trying to port in Amber some visualizations I have done with D3.js.

The problem is that in D3 I would write:

d3.selectAll('svg').append('rect')

to select a collection of elements (svg in this case) and call the method 'append' on each one of these elements.
In Amber this should become something like:

(d3 selectAll: 'svg') append: 'rect'

but this causes a MNU for the method #append:. This happens because the method #selectAll: returns an Array (of Arrays), where I would expect a JSObjectProxy. To make the trick work I have to use:

(JSObjectProxy on: (d3 selectAll: 'svn')) append: 'rect'

This however gets quickly unmanageable when you have to concatenate more instructions.
Is there a better way to do that?
--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
Reply | Threaded
Open this post in threaded view
|

Re: Amber and D3.js interaction

Herby Vojčík
or add

  Array >> asD3
    ^ JSObjectProxy on: self

and use

  (d3 selectAll: 'svg') asD3 append: 'rect'
 
Herby

Sebastian Heidbrink wrote:

> Hi!
>
> Same problem here!
>
> I once found some issue report on github regarding this issue and the
> way I was able to solve this was:
>
> You need this:
> allowJSCallsOn: anObject
> <anObject.allowJavaScriptCalls = true>
>
> and then you do this:
>
>  something := *d3.selectAll:'svg'.*
> self allowJSCallsOn: something .
> something *append:'rect'.
> *
> I hope that works for you too.
> In the end I think you are right. There shouldn'T be the need to do
> such thing... I have trouble with this in other respects too.
>
> Sebastian
>
>
>
> Am 14.01.2014 07:25, schrieb [hidden email]:
>> Hello,
>>
>> I am trying to port in Amber some visualizations I have done with D3.js.
>>
>> The problem is that in D3 I would write:
>>
>> *d3.selectAll('svg').append('rect')*
>>
>> to select a collection of elements (svg in this case)
and call the

>> method 'append' on each one of these elements.
>> In Amber this should become something like:
>>
>> *(d3 selectAll: 'svg') append: 'rect'*
>>
>> but this causes a MNU for the method #append:. This happens because
>> the method #selectAll: returns an Array (of Arrays), where I would
>> expect a JSObjectProxy. To make the trick work I have to use:
>>
>> *(JSObjectProxy on: (d3 selectAll: 'svn')) append: 'rect'*
>>
>> This however gets quickly unmanageable when you have to concatenate
>> more instructions.
>> Is there a better way to do that?
>> --
>> You received this message because you are subscribed to the Google
>> Groups "amber-lang" group.
>> To unsubscribe from this group and stop receiving emails from it,
>> send an email to [hidden email].
>> For more options, visit https://groups.google.com/groups/opt_out.
>
> --
> You received this message because you are subscribed to the Google
> Groups "amber-lang" group.
> To unsu
bscribe from this group and stop receiving emails from it, send
> an email to [hidden email].
> For more options, visit https://groups.google.com/groups/opt_out.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
Reply | Threaded
Open this post in threaded view
|

Re: Amber and D3.js interaction

SebastianHC
And the winner is!!!

Thank you Herby!


Am 14.01.2014 07:42, schrieb Herby Vojčík:

> or add
>
>  Array >> asD3
>    ^ JSObjectProxy on: self
>
> and use
>
>  (d3 selectAll: 'svg') asD3 append: 'rect'
>
> Herby
>
> Sebastian Heidbrink wrote:
>> Hi!
>>
>> Same problem here!
>>
>> I once found some issue report on github regarding this issue and the
>> way I was able to solve this was:
>>
>> You need this:
>> allowJSCallsOn: anObject
>> <anObject.allowJavaScriptCalls = true>
>>
>> and then you do this:
>>
>>  something := *d3.selectAll:'svg'.*
>> self allowJSCallsOn: something .
>> something *append:'rect'.
>> *
>> I hope that works for you too.
>> In the end I think you are right. There shouldn'T be the need to do
>> such thing... I have trouble with this in other respects too.
>>
>> Sebastian
>>
>>
>>
>> Am 14.01.2014 07:25, schrieb [hidden email]:
>>> Hello,
>>>
>>> I am trying to port in Amber some visualizations I have done with
>>> D3.js.
>>>
>>> The problem is that in D3 I would write:
>>>
>>> *d3.selectAll('svg').append('rect')*
>>>
>>> to select a collection of elements (svg in this case)
> and call the
>>> method 'append' on each one of these elements.
>>> In Amber this should become something like:
>>>
>>> *(d3 selectAll: 'svg') append: 'rect'*
>>>
>>> but this causes a MNU for the method #append:. This happens because
>>> the method #selectAll: returns an Array (of Arrays), where I would
>>> expect a JSObjectProxy. To make the trick work I have to use:
>>>
>>> *(JSObjectProxy on: (d3 selectAll: 'svn')) append: 'rect'*
>>>
>>> This however gets quickly unmanageable when you have to concatenate
>>> more instructions.
>>> Is there a better way to do that?
>>> --
>>> You received this message because you are subscribed to the Google
>>> Groups "amber-lang" group.
>>> To unsubscribe from this group and stop receiving emails from it,
>>> send an email to [hidden email].
>>> For more options, visit https://groups.google.com/groups/opt_out.
>>
>> --
>> You received this message because you are subscribed to the Google
>> Groups "amber-lang" group.
>> To unsu
> bscribe from this group and stop receiving emails from it, send
>> an email to [hidden email].
>> For more options, visit https://groups.google.com/groups/opt_out.
>

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
Reply | Threaded
Open this post in threaded view
|

Re: Amber and D3.js interaction

Tommaso DS
That's a good Idea, thank you!

Tommaso

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
Reply | Threaded
Open this post in threaded view
|

Re: Amber and D3.js interaction

smozes
In reply to this post by Herby Vojčík
Herby Vojčík wrote
> or add
>
>   Array >> asD3
>     ^ JSObjectProxy on: self
>
> and use
>
>   (d3 selectAll: 'svg') asD3 append: 'rect'
>  

I'm looking at d3.js, have seen this solution and it works. However, working
through the d3 tutorials, I find idiomatic d3 method chaining to be unwieldy
in Amber.

For example, from the  bar chart tutorial <http://bost.ocks.org/mike/bar/>
:


> d3.select(".chart")
>   .selectAll("div")
>     .data(data)
>   .enter().append("div")
>     .style("width", function(d) { return d * 10 + "px"; })
>     .text(function(d) { return d; });

I quickly had many nested parens, and had to write this instead:

> |chart bar barUpdate barEnter appended|
> chart := (d3 select: '.chart') asD3.
> bar := (chart selectAll: 'div') asD3.
> barUpdate := (bar data: data) asD3.
> barEnter := (barUpdate enter) asD3.  
> appended := (barEnter append: 'div') asD3.
> appended style: 'width' set: [:d | (d * 10) asString , 'px'];
>                text: [:d | d].

Is there a better way?



--
View this message in context: http://forum.world.st/Amber-and-D3-js-interaction-tp4736695p4750380.html
Sent from the Amber Smalltalk mailing list archive at Nabble.com.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: Amber and D3.js interaction

smozes
In reply to this post by Herby Vojčík


On Tuesday, January 14, 2014 7:42:28 AM UTC-8, Herby wrote:
or add

  Array >> asD3
    ^ JSObjectProxy on: self

and use

  (d3 selectAll: 'svg') asD3 append: 'rect'
 
Herby

 This solution works, but d3 method chaining is unwieldy in Amber. From the bar chart tutorial: http://bost.ocks.org/mike/bar/
d3.select(".chart") 
.selectAll("div") 
  .data(data) 
.enter().append("div") 
  .style("width", function(d) { return d * 10 + "px"; }) 
  .text(function(d) { return d; });

 Initially used nested parens, which got out of hand. Then rewrote as:

|chart bar barUpdate barEnter appended| 
chart := (d3 select: '.chart') asD3. 
bar := (chart selectAll: 'div') asD3. 
barUpdate := (bar data: data) asD3. 
barEnter := (barUpdate enter) asD3.   
appended := (barEnter append: 'div') asD3. 
appended style: 'width' set: [:d | (d * 10) asString , 'px']; 
                text: [:d | d]. 

 Is there a better way?

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: Amber and D3.js interaction

Ricardo Moran
Hi,

I'm not a d3 expert and I'm just starting to play with amber but I think you can get a better api by wrapping d3 into a nice amber object.
I just made a small example (see attached) that only exposes a small part of d3 but I think you can get the general idea from this example.
You can use it like this:

(D3 select: 'body')
append: 'div'
with: [:div | div
style: 'border' set: '1px solid red';
append: 'h1'
with: [:h1 | h1 text: 'Heading 1'];
append: 'h2'
with: [:h2 | h2 text: 'Subtitle 1'];
append: 'p'
with: [:p | p text: 'Some text here.']];
append: 'hr';
append: 'div'
with: [:div | div
style: 'border' set: '2px solid blue';
text: 'Some more text here...']
It requires a little more effort on your side to grow the D3 class with all the necessary methods, but I think it's much nicer than the other alternatives.
Anyway, I hope this helps.

Cheers,
Richo

P.S. I don't know how to share amber code (as I said I'm a newbie here), I just attached the .st file I found on the source directory. Let me know if there is a better way.


On Mon, Mar 24, 2014 at 12:15 AM, sivan.mozes <[hidden email]> wrote:


On Tuesday, January 14, 2014 7:42:28 AM UTC-8, Herby wrote:
or add

  Array >> asD3
    ^ JSObjectProxy on: self

and use

  (d3 selectAll: 'svg') asD3 append: 'rect'
 
Herby

 This solution works, but d3 method chaining is unwieldy in Amber. From the bar chart tutorial: http://bost.ocks.org/mike/bar/
d3.select(".chart") 
.selectAll("div") 
  .data(data) 
.enter().append("div") 
  .style("width", function(d) { return d * 10 + "px"; }) 
  .text(function(d) { return d; });

 Initially used nested parens, which got out of hand. Then rewrote as:

|chart bar barUpdate barEnter appended| 
chart := (d3 select: '.chart') asD3. 
bar := (chart selectAll: 'div') asD3. 
barUpdate := (bar data: data) asD3. 
barEnter := (barUpdate enter) asD3.   
appended := (barEnter append: 'div') asD3. 
appended style: 'width' set: [:d | (d * 10) asString , 'px']; 
                text: [:d | d]. 

 Is there a better way?

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

D3.st (918 bytes) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: Amber and D3.js interaction

sebastianconcept
Doesn’t sound like canvas?

What about making a D3 specific canvas?

Doesn’t have to be part of Amber, just Amber software on top of it

Anyway just a thought





On Mar 24, 2014, at 3:51 AM, Ricardo Moran <[hidden email]> wrote:

Hi,

I'm not a d3 expert and I'm just starting to play with amber but I think you can get a better api by wrapping d3 into a nice amber object.
I just made a small example (see attached) that only exposes a small part of d3 but I think you can get the general idea from this example.
You can use it like this:

(D3 select: 'body')
append: 'div'
with: [:div | div
style: 'border' set: '1px solid red';
append: 'h1'
with: [:h1 | h1 text: 'Heading 1'];
append: 'h2'
with: [:h2 | h2 text: 'Subtitle 1'];
append: 'p'
with: [:p | p text: 'Some text here.']];
append: 'hr';
append: 'div'
with: [:div | div
style: 'border' set: '2px solid blue';
text: 'Some more text here...']
It requires a little more effort on your side to grow the D3 class with all the necessary methods, but I think it's much nicer than the other alternatives.
Anyway, I hope this helps.

Cheers,
Richo

P.S. I don't know how to share amber code (as I said I'm a newbie here), I just attached the .st file I found on the source directory. Let me know if there is a better way.


On Mon, Mar 24, 2014 at 12:15 AM, sivan.mozes <[hidden email]> wrote:


On Tuesday, January 14, 2014 7:42:28 AM UTC-8, Herby wrote:
or add

  Array >> asD3
    ^ JSObjectProxy on: self

and use

  (d3 selectAll: 'svg') asD3 append: 'rect'
 
Herby

 This solution works, but d3 method chaining is unwieldy in Amber. From the bar chart tutorial: http://bost.ocks.org/mike/bar/
d3.select(".chart") 
.selectAll("div") 
  .data(data) 
.enter().append("div") 
  .style("width", function(d) { return d * 10 + "px"; }) 
  .text(function(d) { return d; });

 Initially used nested parens, which got out of hand. Then rewrote as:

|chart bar barUpdate barEnter appended| 
chart := (d3 select: '.chart') asD3. 
bar := (chart selectAll: 'div') asD3. 
barUpdate := (bar data: data) asD3. 
barEnter := (barUpdate enter) asD3.   
appended := (barEnter append: 'div') asD3. 
appended style: 'width' set: [:d | (d * 10) asString , 'px']; 
                text: [:d | d]. 

 Is there a better way?

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.


--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
<D3.st>

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: Amber and D3.js interaction

Ricardo Moran

On Mon, Mar 24, 2014 at 9:04 AM, sebastian <[hidden email]> wrote:
Doesn’t sound like canvas?

Yes, indeed. Although simpler :)
 

What about making a D3 specific canvas?

I don't think that makes a lot of sense. d3 is more than just DOM manipulation. My example was just to show how easily you can implement a wrapper that exposes a nice api instead of talking directly to the javascript objects, which can get ugly quite easily.

Cheers,
Richo
 

Doesn’t have to be part of Amber, just Amber software on top of it

Anyway just a thought





On Mar 24, 2014, at 3:51 AM, Ricardo Moran <[hidden email]> wrote:

Hi,

I'm not a d3 expert and I'm just starting to play with amber but I think you can get a better api by wrapping d3 into a nice amber object.
I just made a small example (see attached) that only exposes a small part of d3 but I think you can get the general idea from this example.
You can use it like this:

(D3 select: 'body')
append: 'div'
with: [:div | div
style: 'border' set: '1px solid red';
append: 'h1'
with: [:h1 | h1 text: 'Heading 1'];
append: 'h2'
with: [:h2 | h2 text: 'Subtitle 1'];
append: 'p'
with: [:p | p text: 'Some text here.']];
append: 'hr';
append: 'div'
with: [:div | div
style: 'border' set: '2px solid blue';
text: 'Some more text here...']
It requires a little more effort on your side to grow the D3 class with all the necessary methods, but I think it's much nicer than the other alternatives.
Anyway, I hope this helps.

Cheers,
Richo

P.S. I don't know how to share amber code (as I said I'm a newbie here), I just attached the .st file I found on the source directory. Let me know if there is a better way.


On Mon, Mar 24, 2014 at 12:15 AM, sivan.mozes <[hidden email]> wrote:


On Tuesday, January 14, 2014 7:42:28 AM UTC-8, Herby wrote:
or add

  Array >> asD3
    ^ JSObjectProxy on: self

and use

  (d3 selectAll: 'svg') asD3 append: 'rect'
 
Herby

 This solution works, but d3 method chaining is unwieldy in Amber. From the bar chart tutorial: http://bost.ocks.org/mike/bar/
d3.select(".chart") 
.selectAll("div") 
  .data(data) 
.enter().append("div") 
  .style("width", function(d) { return d * 10 + "px"; }) 
  .text(function(d) { return d; });

 Initially used nested parens, which got out of hand. Then rewrote as:

|chart bar barUpdate barEnter appended| 
chart := (d3 select: '.chart') asD3. 
bar := (chart selectAll: 'div') asD3. 
barUpdate := (bar data: data) asD3. 
barEnter := (barUpdate enter) asD3.   
appended := (barEnter append: 'div') asD3. 
appended style: 'width' set: [:d | (d * 10) asString , 'px']; 
                text: [:d | d]. 

 Is there a better way?

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.


--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
<D3.st>

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.