Arranging a pair of elements, charts, one on top of the other on the page

Question

Arranging a pair of elements, charts, one on top of the other on the page

I'm working with two pieces of D3.js code to draw charts. The first piece sets the width, height, and margins like this:

<script>

    var margin = {top: 20, right: 20, bottom: 30, left: 40},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

It displays perfectly on the page. Specifically, the script tag is sourced from here: https://github.com/mhemesath/r2d3/blob/master/examples/scatterplot/scatterplot.html

Then, I include another piece of D3.js code for a bar chart, setting its width, height, etc., as follows:

<script type="text/javascript>

    //Width and height
    var w = 500;
    var h = 100;
    var barPadding = 1;

Specifically, the script tag is sourced from here:

How can I prevent these two charts from overlapping? I want the first one to display first and then have the second one appear below it...

javascript css svg d3.js

Answer 1

Answer №1

To implement this method, you can generate two distinct SVG elements and attach them to the body individually. For a practical illustration, refer to this code snippet. It is important to observe that each SVG variable should be assigned a unique name (such as svgFirst and svgSecond).

Answer 2

To implement this method, you can generate two distinct SVG elements and attach them to the body individually. For a practical illustration, refer to this code snippet. It is important to observe that each SVG variable should be assigned a unique name (such as svgFirst and svgSecond).

Answer 3

Answer №2

There are a couple of approaches to address your queries:

VARIED SVG COMPONENTS: As suggested earlier, you have the option to utilize two distinct svg elements with different class names.

let svg1 = d3.select(body)
              .append(svg)
              .attr('class', 'graph1')

let svg2 = d3.select(body)
          .append(svg)
          .attr('class', 'graph2')

In this case, you can simply reference the variables:

          svg1.append('rect').data().enter()
          svg2.append('rect').data().enter()

Employing Group Tags (G): This method enables you to group multiple charts within the svg using different G tags, much like Div tags in HTML.

You may find this post on Stack Overflow helpful for D3 visualization: redraw function with g containers

Answer 4

There are a couple of approaches to address your queries:

VARIED SVG COMPONENTS: As suggested earlier, you have the option to utilize two distinct svg elements with different class names.

let svg1 = d3.select(body)
              .append(svg)
              .attr('class', 'graph1')

let svg2 = d3.select(body)
          .append(svg)
          .attr('class', 'graph2')

In this case, you can simply reference the variables:

          svg1.append('rect').data().enter()
          svg2.append('rect').data().enter()

Employing Group Tags (G): This method enables you to group multiple charts within the svg using different G tags, much like Div tags in HTML.

You may find this post on Stack Overflow helpful for D3 visualization: redraw function with g containers

Arranging a pair of elements, charts, one on top of the other on the page

Answer №1

Answer №2

Similar questions

Javascript and JSON: Making Updates to Files

JavaScript Link Replacement Magic!

When incorporating a CSS transition, a div element gracefully descends from the top of the HTML body

Attempting to execute a function within a MAP operation

Is there a way to effortlessly bring life to a pre-designed image gallery through automation?

Show a compilation of articles along with their corresponding identification numbers

Automatically pre-fill and send hidden form

Jquery Parallax causing scrolling problems across different browsers

The Webdriver is known to raise a Nosuchemelent exception when dealing with modal dialogs, particularly those that

What is the process for dynamically declaring a variable within the data function in Vue.js?

Error 400: Invalid request encountered while developing a game using Node and Socket.io

Animating CSS using JavaScript

Scope isolation prevents variables from being accessed in higher levels of the scope chain

Having trouble displaying results in Vue.js after making an API request?

The screen suddenly goes blank when attempting to load a Google Charts example using XMLHttpRequest

Update div element with a dynamic table without the use of jQuery or any other libraries

How can I eliminate the border from the last child in a row within a responsive framework?

Is it necessary for a viewport breakpoint to have an impact beyond its designated area in Twitter Bootstrap?

When utilizing React, I generated an HTML page with a distinct .js file, however, encountered two unexpected errors

Unable to break through the lines