d3 split bar chart with a horizontal layout

https://i.sstatic.net/P6qck.png

I am interested in creating a split difference bar chart using d3 similar to the image provided. I have two input arrays - one for y-axis labels and one for data as shown below:

data = [[35,90], [60,45], [80,90], [95,90]]
months = ["Jan - 20", "Feb - 20", "Mar - 20", "Apr -20"]

I attempted to use d3-observable, but I have encountered difficulties with rendering the nested data correctly with scale. Any advice or assistance on this matter would be greatly appreciated.

Thank you.

javascripttypescriptd3.jsdata-visualizationdata-science

Answer №1

Instead of relying on SVG, you have the option to use plain HTML to create a chart like this. However, utilizing d3 can still be beneficial in simplifying tasks such as managing scales, date formatting, and element creation that extend beyond SVG capabilities. For instance, check out how you can generate the initial bar chart and its corresponding label:

d3.select("#first-bar-column")
    .selectAll("div")
    .data(data)
    .enter()
    .append("div")
    .style("width", d => `${xScale(+d.A)}px`)
    .classed("first-bar", true)
    .append("p")
    .classed("label", true)
    .text(d => d.A);

If you're interested in adding any interactive elements for hover/click effects across the entire row, you would need to assign a common class based on the element index: 

.attr("class", (d, i) => `row${i}`)

Take a look at this example on JSFiddle for more details.

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

The JSON is invalid due to an unexpected character at the beginning

I am encountering an issue with a POST method, even though I believe I have implemented it correctly. Error: Unexpected token f in JSON at position 1 at JSON.parse This error seems to make sense in some way, as 'token f' aligns with the beginn ...

javascriptpostvue.jsmongoosebackend

Steps for setting up node-openalpr on a Windows 10 system

While attempting to install npm i node-openalpr, an error is occurring: When using request for node-pre-gyp https download, I encounter a node-pre-gyp warning and error message. The package.json for node-openalpr is not node-pre-gyp ready, as certain pr ...

javascriptnode.jsexpressnpmopenalpr

A guide on implementing a confirmation box with jquery confirm plugin for form submission

After submitting a form, I want to display a confirmation message without using the typical method of "return confirm("Are You Sure?")". I decided to utilize JQuery Confirm in this way: @using (@Html.BeginForm("SubmitTest", "HydrostaticReception", FormMe ...

javascriptjqueryhtmlasp.net-mvcforms

What is the process for updating data for THREE materials?

Is it possible to update the material of an object based on a radio button selection? I have managed to change the color in my current example, but the entire material does not get updated. How can I instruct THREE to adjust its internal data accordingly? ...

javascriptthree.js

React error: "Unable to locate property 'bind' within the undefined"

After reviewing several solutions, I'm still struggling to understand. Below is my code snippet: // userInputActions.js ... export function dummy() { console.log('dummy function called'); } ... // *userInputPage.js* import * as use ...

javascriptreactjs

A JavaScript regex that can identify white spaces and new lines to calculate word count

Currently, I am attempting to count words within the Summernote editor using Angular. While I have successfully created a service for counting words, it seems to be ineffective when encountering new lines. Here is an example of the text: Hult Internation ...

javascriptangularjsregex

Utilizing Ajax to dynamically update the values of two PHP variables in real-time, retrieved from an external source

Here is the HTML snippet I am working with: <form class="addtowatchlistform" action="logo/insertwatchlist.php" method="POST"> <input type="hidden" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'"/> <button id="addtowatchli ...

javascriptphpjqueryhtmlajax

Obtain information from YouTube and format it into a list item

Currently, I'm working on compiling a list of videos that includes the title, link, image, and creator of each video. It's been a bit challenging :S <script type="text/javascript"> $(document).ready(function(){ $.getJSON('http://gdata ...

javascriptjson

Is there a JavaScript tool available that allows for the integration of textareas that automatically refresh the formatting of a webpage as you type?

I have a unique opportunity to teach HTML to at-risk children in an upcoming class, but our time is limited. I want to show them how fun it can be to create their own web page. My plan is to create a page template filled with text boxes that the kids can ...

javascriptjqueryhtmlreal-timewysiwyg

A guide on clearing the selected value in a dropdown menu with Angular.js

Can someone assist me with setting the drop-down value to blank after completing an action in Angular.js? Below is my code explanation: <div style="height:270px; overflow-x:hidden; overflow-y:scroll;" ng-show="viewOrderTable"> <div class="table-r ...

javascriptangularjs

Cufon failing to load following an ajax call

At first, cufon is used to replace the text on the main page. However, when another page file is loaded, cufon does not apply its replacement to the newly loaded content. Why is that? I tried adding cufon.refresh(); as the last function in the chain. I c ...

javascriptjqueryajaxfontscufon

The 959th module loader in the internal node system, designated as node:

I am encountering the console error code: 'MODULE_NOT_FOUND' Below is the complete console error message: node:internal/modules/cjs/loader:959 throw err; ^ Error: Unable to locate module 'C:\Users\jerry\OneDrive\Des ...

javascriptnode.jsnpm

Ensuring complete type safety by passing an object literal as a function parameter to a TypeScript type with rigorous type validation

I have a script written in JavaScript that I am currently converting to TypeScript. The code I am working with includes the following: const shapes = []; shapes.push({ name: 'Circle', radius: 12 }); shapes.push({ name: 'Rectangle', wid ...

typescript

Is it possible to generate an array of all matches found by a regular expression

I am trying to utilize the match-all package in order to match CSS selectors and generate an array of all of them. Here is the code snippet. const matchAll = require("match-all"); let s = `.u-br, .u-nr { blah blah } .u-tr { blah .blah }`; consol ...

javascriptnode.jsregex

Is there a way to incorporate a subtle fading effect when transitioning between images?

I find this continuously changing image every 5 seconds to be a bit overwhelming without any smooth transition. Is there a way I can implement a short fade effect like what is possible in CSS? import React, { useEffect, useState } from "react"; ...

javascripthtmlcssreactjs

In mongoose and nodejs, there is no method called .find()

I am encountering an issue while attempting to locate by id and receiving the error bankApp.find is not a function. Below is my schema: import {model, Schema} from "mongoose"; const StatusResponse = new Schema({ uniqueKey: {type: String, trim: true, ...

javascriptnode.jsexpressmongoose

Encountering a ng-select2 Error with Angular version 4.1.3

I have recently installed the ng-select2 package, but I encountered an error when trying to compile my code using 'ng serve'. Node version: 8.10.0 NPM version: 6.0.0 Another list item Operating System: Windows 7 ERROR in d:/PATH-TO-PROJECT-F ...

javascriptnode.jsangularnpm

Create a new object by extracting JSON data using JavaScript

I am attempting to extract various data elements from a JSON file and place them into an object. My ultimate goal is to then convert this object back to JSON format, containing only the desired data. I believe that structuring the object like this might w ...

javascriptjsonnode.js

Exploring Style Attribute Manipulation using vanilla JavaScript on Firefox

I searched for a similar question, but I couldn't find anything quite like it. I'm currently developing a JavaScript Slider plugin for various projects within our company. This requires me to manipulate styles on certain elements in the DOM. I&a ...

javascriptcssfirefoxstylesnative

Problems with the package @types/ckeditor

Encountering some difficulties while utilizing @types/ckeditor from the provided source. https://www.npmjs.com/package/@types/ckeditor The installation of the package was successful, and after importing the type into the necessary file, everything appear ...

angulartypescriptckeditorckeditor4.x