Bootstrap container and D3jS line chart

[Dev C]

Hello

Anyone has D3js chart which is responsive respect to bootstrap container col-lg-3 ?

Consider there are 4 charts / each one has to fit inside col-lg-3 container.

Thanks

[Zhenjun Hu]

Here is an example of d3+bootstrap, guess at least containers 9top+bottom+left+graph), you can try out at:

http://www.microbialnet.org/mind.html?location=p1/figures/3/fig3_cmd.json

Many thanks,

Zhenjun Hu

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/d3-js/CAKVZMjDn0B28RSshX4e2jwre2pNfohhHnq686oXMkHptD9vNzw%40mail.gmail.com.

[Dev C]

Thanks but I was looking for line chart if any. would be helpful. thanks

To view this discussion on the web visit https://groups.google.com/d/msgid/d3-js/CABKw74Ddmtf8Rqpn3oH-WkvYgNzt4Zsmt2jrnVUjx8qkraKUAQ%40mail.gmail.com.

[Mike]

Responsivity based on a parent element‘s size always requires some foresight when implementing a D3 chart because SVG doesn’t respond the same as html elements. Most line graph examples you find on bl.ocks etc will work if you wrap them in a function and then either add a window resize event listener that computes dimensions based on parent’s getBoundingClientRect method, or else set an interval timer that checks dimensions and re-renders the chart if the dimensions changed. Keep in mind any positional constants like margins, padding, svg width / height may need to be changed to be relational to the parent element’s size rather than the constants shown in the example. 

-Mike

On Jan 18, 2021, at 11:04 PM, Dev C <chauhan...@gmail.com> wrote:



To view this discussion on the web visit https://groups.google.com/d/msgid/d3-js/CAKVZMjDNkqTdGXRk0oMhWwugBPbJMMyCn3ZXFxXJr%2B4Ca7S-zg%40mail.gmail.com.

[Dev C]

Thanks Mic, Appriciate your insight, will surely look into this.

On Tuesday, January 19, 2021, Mike <michael.sam...@gmail.com> wrote:

Responsivity based on a parent element‘s size always requires some foresight when implementing a D3 chart because SVG doesn’t respond the same as html elements. Most line graph examples you find on bl.ocks etc will work if you wrap them in a function and then either add a window resize event listener that computes dimensions based on parent’s getBoundingClientRect method, or else set an interval timer that checks dimensions and re-renders the chart if the dimensions changed. Keep in mind any positional constants like margins, padding, svg width / height may need to be changed to be relational to the parent element’s size rather than the constants shown in the example. 

-Mike

On Jan 18, 2021, at 11:04 PM, Dev C <chauhan...@gmail.com> wrote:



Thanks but I was looking for line chart if any. would be helpful. thanks

On Tue, Jan 19, 2021 at 5:55 AM Zhenjun Hu <zhenj...@gmail.com> wrote:

Here is an example of d3+bootstrap, guess at least containers 9top+bottom+left+graph), you can try out at:

http://www.microbialnet.org/mind.html?location=p1/figures/3/fig3_cmd.json

Many thanks,

Zhenjun Hu

On Mon, Jan 18, 2021 at 7:21 AM Dev C <chauhan...@gmail.com> wrote:

Hello

Anyone has D3js chart which is responsive respect to bootstrap container col-lg-3 ?

Consider there are 4 charts / each one has to fit inside col-lg-3 container.

Thanks

--
You received this message because you are subscribed to the Google Groups "d3-js" group.

To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/d3-js/CAKVZMjDn0B28RSshX4e2jwre2pNfohhHnq686oXMkHptD9vNzw%40mail.gmail.com.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.

To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/d3-js/CABKw74Ddmtf8Rqpn3oH-WkvYgNzt4Zsmt2jrnVUjx8qkraKUAQ%40mail.gmail.com.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.

To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/d3-js/CAKVZMjDNkqTdGXRk0oMhWwugBPbJMMyCn3ZXFxXJr%2B4Ca7S-zg%40mail.gmail.com.

--

You received this message because you are subscribed to the Google Groups "d3-js" group.

To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/d3-js/214593C1-BD53-4036-AEB1-BDF9C0EB0B1B%40gmail.com.

--
Sent from my mi note 4 phone.

[Seemant Kulleen]

You can also consider using the viewBox property of SVG, which dispenses with the need to have a listener and do manual steps just to resize the svg.

Sara Soueidan's 3-part blog series is a must-read on the subject: https://www.sarasoueidan.com/blog/svg-coordinate-systems/

Curran and I successfully used this in our Josquin visualization: https://ribbon.stanford.edu/?id=Jos2721

HTH,

Seemant

--

Oakland Finish Up Weekend
Be Amazed.  Be Amazing.
Get Mentored | Get Inspired | Finish Up

http://oaklandfinishup.com

To view this discussion on the web visit https://groups.google.com/d/msgid/d3-js/214593C1-BD53-4036-AEB1-BDF9C0EB0B1B%40gmail.com.

[Zhenjun Hu]

There is no difference whether it is line graph or force graph in general. You just need to respond to the resize event. Here is the code for your reference:

d3.select(window).on('resize', function(){ 

    var win_width=window.innerWidth, acc_width=$("#accordion").outerWidth();

    if (document.getElementById("accordion").style.display !== "none") {//visible

      if (win_width>770){

        $("#graphHolder").outerWidth($("#container").innerWidth() - acc_width);

        document.getElementById("graphHolder").style.left = acc_width+"px";

      }else {

        document.getElementById("graphHolder").style.left = "0px";

        $("#graphHolder").outerWidth($("#container").innerWidth());

      }

    }else $("#graphHolder").outerWidth($("#container").innerWidth());

    

    $scope.theNetwork.resize();

    setContextBoxHeight();

  });

In above code,  #accordion is div for the left control panel, and  graphHolder is the div for the force graph. The graph div is changed when the window is resized, and then the force graph (theNetwork) calls the function resize to redraws the network.

Many thanks,

Zhenjun Hu

[Curran]

Thanks Seemant for linking to that article! It's a great one that I remember seeing a long time ago. I just added it to this index of educational resources https://github.com/datavis-tech/awesome-dataviz-education/blob/master/README.md#svg

[Seemant Kulleen]

Curran,

What a cool resource your list is!

Much learnings on there

Cheers,

Seemant

To view this discussion on the web visit https://groups.google.com/d/msgid/d3-js/2adc9ba6-836f-4364-8f1d-f679c5c617a6n%40googlegroups.com.

--