Smalltalk › Amber Smalltalk

Amber and D3.js interaction

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

10 messages Options

Tommaso DS

Amber and D3.js interaction

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.

SebastianHC

Re: Amber and D3.js interaction

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.

Herby Vojčík

Re: Amber and D3.js interaction

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.

SebastianHC

Re: Amber and D3.js interaction

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.
>

Tommaso DS

Re: Amber and D3.js interaction

That's a good Idea, thank you!

Tommaso

smozes

Re: Amber and D3.js interaction

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.

smozes

Re: Amber and D3.js interaction

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?

Ricardo Moran

Re: Amber and D3.js interaction

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.

D3.st (918 bytes) Download Attachment

sebastianconcept

Re: Amber and D3.js interaction

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>

Ricardo Moran

Re: Amber and D3.js interaction

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.