Create a reusable chart

[damie...@gmail.com]

Hi everyone,


I discovered D3.js some days ago. I wanted to use it to create profile race as following:




Create it in an HTML page was "easy", but, for it, I always use the same data, an example is available here.


But now, my boss would like a JavaScript class, who create charts depending on data sent. I already visited
this tutorial. But it still doesn't work, for me.


So, can anyone point me in the right direction? Another tutorial or special help... I'm still a student, so,

there is a lot of stuff I do not know about D3 or even JS. 

All help or advices will be accepted with pleasure.

If you need further informations, don't hesitate :)

Best regards, Damien Braz.

[Curran]

Hello Damien,

In case it is helpful, here are two examples of reusable charts created in the "Towards Reusable Charts" style:

• Reusable Scatter Plot
• Reusable Bar Chart 

Also, here's a running version of the original Towards Reusable Charts Example.

I'm curious, what is it specifically about https://bost.ocks.org/mike/chart/ that doesn't work for for you? In my experience it's the best pattern out there, without adopting some heavy component library like React, Angular, or WebComponents. One variation I find convenient is to specify the containing DOM element and the data via accessors, so you don't need to construct a data-bound selection every time you change a parameter and want to re-render.

Probably the "Towards Reusable Charts" style is an approach that can work for you. It can be overwhelming at first, but if you can get something simple to work, like drawing a rectangle, then you can incrementally add features until you have the component you desire. Here's a Simplest Reusable Chart example that might work as a starting point.

Best regards,

Curran

Datavis.tech

[damie...@gmail.com]

Hi Curran,

Thank you for all the ressources you shared with me, I'll read all of them :)

So, about https://bost.ocks.org/mike/chart/ , I think it's because I don't really understand how I must translate my code with this pattern.

This is what I tried to do, according do Bostocks's pattern. I don't know if it's accepted here, but, there is some of my problems:

- "function chart(selection){
        selection.each(function(data){":  I do not know what is the "selection" here.

 

 - " var data = data.map(function(d,i){

                return [xValue.call(data, d, i), yValue.call(data, d, i)];

     });"                                          :I do not understand from where come these xValue.call(data, d, i).

- I do not know if my functions in "chart(selection)" will work.

- How can I use chart(selection) to draw my RaceProfile?

 - Can I add the functions available in my first codepen code? (setItem, getAltitude, ...)?

I hope you will understand better what are my problems :)

Best regards,

Damien.