Category "d3.js"

D3 Applying colour from a linear scale to my data

I have an SVG hex map that I've joined to my dataset using a foreach function. Dataset: var data = [ { "id": "Scotland ", "value": 5000 }, { "id": "Wales "

How to make shaded error bar region in d3/visx

I would like to make a line chart in the visx library with shading used to represent the error bars region. Here is an example of what I mean: example. Instea

D3 js filter select

I dont knoe exactly what is going on here tried everything to no success, here is my code, i am trying to add color by changing the opacity with the rgba, but i

Is there a way to create different d3 axis for unique groups in the data? (d3.js)

I am trying to create multiarray joy plot for some data, but I struggle to make a proper axis. I am facing the problem that each column in the joy plot needs it

Add image to react d3 tree renderCustomNodeElement attribute

I wish to add some images to my JSON data from it the tree data is taking all the data.. I just couldnt do it Do someone has had any experience in that area..?

How to connect the elements with each other by a line Angular

How to connect the elements with a line like in the picture? When you click on one circle and then another, a line should be drawn. Maybe there is a library for

Line chart point not aligned with x axis ticks D3.js

Hi I have a line graph but the point indicated by the line aren't aligned with the x axis points, they seem to be in-between the points. Anyone know that the ca

Having issue while creating D3.js charts as React components

I am very new to React, but I was trying to use React and D3.js for a data visualization web dashboard. I wanted to create D3.js charts as reusable React compon

Having issue while creating D3.js charts as React components

I am very new to React, but I was trying to use React and D3.js for a data visualization web dashboard. I wanted to create D3.js charts as reusable React compon

d3.js geo projection renders a black box

I am trying to make a US map using d3.js. I use the following code to draw my map: const EDUCATION = 'https://raw.githubusercontent.com/no-stack-dub-sack/test

How to make data() key function to work with TypeScript?

I am trying to use a custom key function for .data() with .selectAll() selection in D3. But, making it TypeScript compatible is becoming such a pain. The eleme

Is it possible to position the leaf nodes one below the other instead of next to each other?

I use d3-org-chart and I wonder if it's possible to position the bottommost elements below each other instead of on the same level: There are some exposed vari

D3.js ResizeObserver rendering issue. Axis not removed after resizing

Been experimenting with ResizeObserver in D3, the issue is that when the axis re-renders it leaves the old render behind, leaving a 'trace' of the previous axis

D3 selection.join() using classes

I'm trying to use the new D3 selection.join() paradigm to draw a randomly positioned circle within every svg. While I can get this to work using ids in the sel

How to remove weekend datetime gaps from x-axis of a financial chart?

I have a use case where I pull and plot Forex data in the form of ask and bid on the graph and this is based on minute, hour or day candlesticks and I am only p

How to plot x axis values over bars?

I changed the attributes of the X axis to plot its values over the bars of the chart. But anywhere I put the code, the values are always plotted before ("behind

How to select individual bars in d3 bar chart and highlight the selected bar?

I'm trying to select each bar in the bar chart by adding a click event, but in my code, highlighted bars are disappearing when selected. Please refer to my link

How to select individual bars in d3 bar chart and highlight the selected bar?

I'm trying to select each bar in the bar chart by adding a click event, but in my code, highlighted bars are disappearing when selected. Please refer to my link

How to display country names on globe d3.js

I'm currently working with d3.js and basically want to display a globe, which when hovering over the individual countries displays the names in a div. But at th

D3 / JavaScript find nearest element from mouse position

I am trying to show the nearest data point and its text when you hover over path element (in pink color in the example) using D3 / Javascript. JS Fiddle: https: