Challenges with Dual Y-Axis in a Horizontal Stacked Bar Graph

My charts are presenting me with several issues and questions:

  • Is there a way to avoid the right y-axis tick values from either being partially erased or overlapping with the chart?

  • When I set yValuesTripId as the domain for both the left and right y-axes, the chart displays properly. How can I achieve the same result when using yAxisFirstStopTimes for the left axis and yAxisLastStopTimes for the right axis?

You can access and modify the chart by clicking here:

Below is the code snippet:

// The JavaScript code related to displaying the interactive chart.
// For complete content, refer to the original source URL provided above.
...
The rest of the code is responsible for defining the dataset, setting up margins, legends, tooltips,
and rendering the bar chart along with color schemes based on passenger occupancy levels.
...
javascriptd3.jsbar-chartstacked-chartstacked-area-chart

Answer №1

Your initial query is fairly straightforward: simply modify the right margin.

The subsequent inquiry, however, presents a more complex situation: despite yValuesFirstStopTimes and yValuesLastStopTimes both having an equal length (which is 43), the left axis seems misaligned with the right one due to duplicate values in both your yValuesFirstStopTimes and yValuesLastStopTimes arrays. In D3, the ordinal scale will merge these duplications (and as the number of repeats varies between the two arrays, you'll end up with differing tick counts on the left and right axes).

A (less than ideal) solution entails defining your domain based on the length of yValuesFirstStopTimes...


    yScaleLeft = d3.scale.ordinal()
    .domain(d3.range(0, yValuesFirstStopTimes.length))
    .rangeRoundBands([0, height], .1);

...then, within the axis generator, fetching each tick's value by its index:


var yAxisLeft = d3.svg.axis()
    .scale(yScaleLeft)
    .orient('left')
    .tickFormat(function(d, i) {
        return yValuesFirstStopTimes[i];
    });

Repeat this method for yValuesLastStopTimes.

Your revised code snippet can be found below:

// your updated code here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging the power of jQuery Ajax in conjunction with node.js and express for email validation functionality

Hey there! I have a contact form on my website that uses ajax for validation and email sending. The issue is that the validation file is set up for PHP, but I'm trying to make it work with my NodeJS app. Unfortunately, when I tried modifying the ajax ...

javascriptjquerynode.jsexpresscontact-form

Modify the hue of the div as soon as a button on a separate webpage is

Looking for assistance with a page called "diagnosticoST" that contains four buttons (btn-institucional, btn-economico, btn-social, btn-natural). These buttons have different background colors until the survey inside them is completed. Once the user comple ...

javascriptjqueryhtmlcss

What is the best way to combine an Angular project with an existing Node.js project?

I've successfully deployed my Angular project on Heroku and my Node.js API REST on Heroku as well. However, they are separate projects with different URLs but function together. Is there a way to combine them on the server and have just one URL? Curr ...

javascriptnode.jsangularexpress

The current object is not being referenced by this specific keyword

I am encountering an issue in my React application where I am trying to set the state of a child component using this.props, but it is showing an error saying props is undefined. It seems like 'this' is not referencing the current object correctl ...

javascriptnode.jsreactjs

Guide to attempting an asynchronous function again in JavaScript with a time delay

I've been facing a challenge while trying to retrieve a record from a database. The issue of race conditions often leads to situations where the record might not be available when attempting the initial fetch. How can I implement retry logic to overco ...

javascriptnode.jsasync-awaitpromise

Difficulty encountered while transmitting JSON data from Express to React

Currently, I am diving into learning express and facing an issue with transmitting JSON data from my express server to my react application. When working on my express server, I initiate an API call to the openweathermap API and then send the obtained JSO ...

javascriptnode.jsjsonreactjsexpress

I often find myself yearning for the good old days of prototyping functions when initializing a new

I just created a module in nodejs called Test.js with the following code: function Test() { this.key = 'value'; } Test.prototype.foo = function () { return 'foo'; } module.exports = Test; Then, in B.js file: var Test = require(&a ...

javascriptnode.jsmodulecommonjs

What could be causing the second switchMap to be triggered repeatedly upon subscription?

Check out the code snippet below for reproducing the issue: import { defer, BehaviorSubject, of } from "rxjs"; import { shareReplay, switchMap } from "rxjs/operators"; const oneRandomNumber = defer(() => of(Math.floor(Math.random() ...

javascriptrxjs

Obtaining the most recent commit date through the Github API

I'm in the process of creating a database containing git repositories and I'm curious about how to extract the date of the most recent commit for a repository listed in my database. My experience with the github API is limited, so I'm strug ...

javascriptphpgithub-api

Is it possible for AngularJS to share a service among multiple ng-apps?

I've been working on developing a web app that involves multiple Angular ng-apps, and I want to use the same service code for at least two of them (even though they don't share data but perform similar functions). How can I prevent code duplicati ...

javascriptangularjs

Enclose every line of the paragraph within a <span> element

My <div> element is configured to display a paragraph without any line breaks, similar to the example below: <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dum ...

javascriptjqueryhtml

IE8 is proving to be a major hurdle for the successful operation of AngularJS $http

Currently, I am faced with the challenge of creating an Angular application that needs to be compatible with IE8. However, I'm encountering difficulties in establishing a connection with the server. Surprisingly, whenever I attempt a $http.get, the en ...

javascriptangularjsinternet-explorer-8

The Document.querySelector() method is not displaying every element

As a beginner, I am currently exploring the world of relative CSS selectors and JSPath for my automation scripts. During my journey, I noticed that there are differences in the return statements between these two methods. Below is an example demonstrating ...

javascriptseleniumcss-selectorsselectors-apiqueryselector

showing sections that collapse next to each other

I am currently designing a portfolio website using HTML, CSS, and vanilla JavaScript. I have implemented collapsing sections that expand when clicked on. However, the buttons for these sections are stacked vertically and I want to place them side by side. ...

javascripthtmlcss

Deactivating a form field depending on a selected radio button in Angular 2

If I have two radio buttons, with a click function called localClick for the first button to give value 1 and the second button to give value 2. <div class="ui-g-12"><p-radioButton name="group1" value="Local" (click)=localClick(1) label="Local"&g ...

javascripthtmlangulartypescriptangular2-template

Having trouble with the Jquery animate() function?

I recently developed a jQuery animation where clicking on specific buttons triggers a hidden div to slide from left: -650px; to left: 0px;. You can see an example by clicking here. However, I've noticed that when another button is clicked to reveal a ...

javascriptjquerycss

Challenges with form validation

Hello everyone, I'm a newbie to JS and struggling with my code. It seems like everything should work, but it just won't. The issue seems to be with the phone number form validation. I've written code that, in theory, should do the job, but ...

javascripthtml

Choosing specific information in Typescript response

I am encountering an issue with my HTML where it displays undefined(undefined). I have checked the data in the debugger and I suspect that there may be an error in how I am using the select data. Here is a snippet of the code: <div *ngIf="publishIt ...

javascriptangularasp.net-mvctypescript

Encountered a JavaScript error while using Internet Explorer

My web and Jquery plugins are working flawlessly on various browsers such as Firefox, Chrome, Safari (Windows & OSX), and Android. However, they encounter issues with Windows and Internet Explorer as some JavaScript fails to load. It's frustrating tha ...

javascriptjqueryinternet-explorercross-browser

Tips for resolving the Range issue with jQuery-UI slider and activating a function when changes are made

I created a simple form that calculates an estimated price based on quantity and one of three options. Then, I attempted to integrate a jQuery-UI slider into the form. However, I encountered an issue where the slider was displaying values outside of the sp ...

javascriptjqueryjquery-ui