Questions tagged [d3.js]

D3.js is a JavaScript library for creating interactive data-bound visualisations of documents using HTML, SVG, and Canvas. Questions should mention the version number of D3 you are using.

Filter by
Sorted by
Tagged with
1 vote
1 answer
12 views

D3.js script upgrade from v4 to v7

My D3.js graph works fine in v4 but not in v7. I know I have to use the ".then" clause in v7 but I would like to understand the meaning of the function below " from : ...(d, i, columns ....
  • 51
0 votes
1 answer
15 views

d3 - change x axis interval

I need help with a d3 line chart. The X axis looks weird, how to skip every X label's, same like I have in the Y axis? Working example: https://stackblitz.com/edit/react-ts-7awftc?file=App.tsx
  • 23.9k
0 votes
0 answers
4 views

d3js pan and zoom working with Five server test, but not with django runserver test

I made a test version of my code to use five server in vscode. I have managed to get pan and zoom to work via this example. I have moved all the javascript code changes to my django code set. However ...
0 votes
0 answers
10 views

Assign X, Y variables from Rails to D3

I have created a chart by specifying the function(d) { return x(d3.timeParse("%Y-%m-%d")(d.date)) } and function(d) { return y(d.value) } for x and y in the individual SVG components. ...
  • 15
0 votes
0 answers
12 views

Draw Line Chart with Tooltip but with Multiple Lines using D3.js

I followed this tutorial: https://observablehq.com/@d3/line-with-tooltip function LineChart(data, { x = ([x]) => x, // given d in data, returns the (temporal) x-value y = ([, y]) => y, //...
0 votes
0 answers
8 views

How properly draw polygons on map (QGIS) an export it so I can then use it with d3 map?

I've been struggling with QGIS for a while. I want to draw custom maps with properties (which is essentially is a drawing a number of polygons). I add baseline map as my 1st layer I create a new ...
0 votes
1 answer
20 views

SVG <text> y position

I'm writing a population pyramid using d3 + react. I'm using d3 for calculations and react for DOM rendering. Everything is working out pretty great, except for positioning the y-axis labels. Ideally, ...
  • 4,761
0 votes
0 answers
16 views

D3 JS not display properly

I'm doing this program for my assignment. Here is my code function init() { const margin = { top: 20, right: 20, bottom: 30, left: 50 }; const width = 600 - margin.left - margin.right; ...
2 votes
0 answers
25 views

Placing all the code in an html file as opposed to separate html and css and javascript files [duplicate]

I have written the following code snippets to create a simple legend. When I distribute them across HTML and CSS and JavaScript files, the webpage shows nothing, but when I stick them all in an HTML ...
-1 votes
0 answers
13 views

How add a slider on D3.js chart?

I'm just starting with D3 charts and I wanna to add a slider under the chart, the idea for this slider is to do a zoom in chart when you slide it from right or left and also the slide have to show as ...
  • 17
0 votes
2 answers
45 views

Maintain SVG <pattern> textures position on a bar chart after shuffling bars?

I created a bar chart consisting of three bars with textures generated based on given parameters. Clicking the "Shuffle Bars" button randomly changes the order of the bars. However, when the ...
-2 votes
1 answer
26 views

Best way to consume csv data [closed]

I have a csv file of around 80,000 rows of data. I need to consume this data to create visualizations in d3. What would be the best way to consume this data. I would also need to filter the data based ...
0 votes
0 answers
21 views

Responsive D3 stacked bar chart

I have created these stacked bar chart using D3 in angular, but the problem is that I have tried to make it responsive and it just doesn't work. Which would be the best and easy way to make this chart ...
  • 1
0 votes
0 answers
22 views

How to build infinite D3 timeline

I've got a D3 timeline with set min and max dates that are coming from the data. I need that domain to be infinite so the user can scroll left and right as he/she wishes. But a domain that wide would ...
  • 2,030
0 votes
0 answers
28 views

Drawing a bezier curve in d3.js with more than two control points

I'm new to d3 and I'm trying to draw a path with a lot of smooth curves; it's supposed to give the impression that the data is vine-like. However, when trying to draw the paths with bezier curves it ...
0 votes
0 answers
21 views

D3.js Force Directed Graph in Angular - Keep getting Memory Leak and "undefined" error

I am trying to implement a Force directed Graph with D3.js in Angular. I wanted to start small, and work my way up to a more complex graph. But no matter what I try, the application crashes every time ...
1 vote
1 answer
24 views

How to join data by special order to svg text

my data is like const data = [ { name: 'Jane', age: 90 }, { name: 'Paul', age: 20 }, { name: 'Jerry', age: 32 }, { name: 'Mary', age: 75 }, ]; my svg is like <svg> <g data-name='...
  • 109
0 votes
0 answers
12 views

dblclick event doesn't work on Safari and Chrome (d3.js library)

I'm using the d3.js library to create group elements ("g") that can be double clicked to do something. In Firefox everything works perfectly fine but in Safari or Chrome it doesn't fire. ...
  • 1
0 votes
0 answers
17 views

Using csv on D3-contour plots

I am using d3js library to plot a dataset to get a figure like the one in the following image: Plot The code that I am using now reads the "Azimuth" and "Altitude" columns of the ....
0 votes
0 answers
13 views

use Mapbox with D3, padding trouble

I use Mapbox and D3 for weather in react I use Mapbox flyto include padding like this map.current.flyTo({ center: bounds.getCenter(), zoom, essential: true, padding: { top: 200, bottom:...
  • 3
-2 votes
1 answer
35 views

I cannot select a class in a svg with D3.js

When I try this in the script: var key="#US" d3.select(key).style("fill", "red"); it's doesn't work. But in the console it's work. I try some function like document....
0 votes
1 answer
18 views

Output list of genes from chorddiag interactive diagram

we're currently exploring chorddiag in our lab to better display large proteomic and CRISPR screen datasets. Initial display of the diagram seems to work great. However, we have something of a basic ...
  • 23
0 votes
0 answers
8 views

How does this old zoom and pan d3js code translate to d3js.v7?

// set the dimensions and margins of the graph var margin = {top: 10, right: 30, bottom: 30, left: 60}, width = 460 - margin.left - margin.right, height = 400 - margin.top - margin.bottom; // ...
0 votes
0 answers
14 views

Retrieving data from mongodb for visual analytic

I want to retrieve the data from mongodb, but the question is whether I need to define the array in the accidents also? [enter image description here](https://i.stack.imgur.com/aPWjk.png) I wish to ...
  • 1
3 votes
1 answer
60 views

Creating a legend for a scatter plot in D3

I have written the following code snippets to create a legend for a scatter plot. Basically, it is a simple example that uses Susie Lu's D3-legend module to create a legend for a scatter plot. The ...
2 votes
1 answer
41 views

Problem rendering pointer gauge on all tree nodes

I'm using the D3.js tree to render a gauge for each node. Only the root node is rendering the gauge pointer (path object). I researched several sources to try to understand the problem, but I couldn't ...
0 votes
1 answer
30 views

React + d3 - Why is my <g> element not reacting to onClick listener

I am fairly new to d3 and I know that there can be some conflicts between react and d3. This might be one. I have a svg that implements the zoomable behaviour from d3.I would like to make the elements ...
  • 85
1 vote
1 answer
25 views

In D3.js axis render along the border of SVG canva and is not visible

I am trying to build a bar chart to visualize some data. I got accross this problem while rendering the X axis: It looks like the axis is rendered "under" the SVG and cannot find a way to ...
0 votes
0 answers
12 views

Update nodes and links in D3js weighted graph

I'd like to update my weighted graph made with D3js. I've created a Fiddle with the following code: var margin = {top: 10, right: 30, bottom: 30, left: 40}; let width = 400 - margin.left - margin....
  • 8,514
-1 votes
0 answers
20 views

D3.js family tree

Hello everyone i am currently making a family tree using d3js but i have a problem displaying the name. When you click the box in the family tree the form will display and it should display in the ...
0 votes
0 answers
7 views

Multiple clickable nodes with differents force in one graph

I'm trying to figure how to create a graph with several fixed nodes (square) and when we click on them they show their content with a linked force, and doing that on multiple nodes in a single svg ...
  • 21
0 votes
1 answer
31 views

Adding text to lowest level circle on transition in d3.js circle packing plot | updating style of text element of a specific class

I am learning both javaScript and d3.js so please bear with me. Currently, I have a circle packing plot that lets you zoom into each level, making the text from the parent node disappear while making ...
2 votes
1 answer
28 views

Display data from multiple Columns from a csv file in D3.js

I've tried to display data from a csv files with multiple variables on the columns. Here's a little extract from the data (these are pollen concentration in a country over 30 years) : Date Ambrosia ...
-2 votes
0 answers
56 views

How do I resample a time series within a .csv only using javascript and d3?

Currently, we are resampling our source csv file into 6 files for every 15 minutes (default for our source), every 30 minutes, every hour, every day, every week, and every month using pandas in python....
0 votes
0 answers
12 views

Using two datasets in one d3.js force-directed graph

I am still learning to use d3.js and I have hit a stumbling block which I hope someone can help with. I have one data set of authors and one of published items with a many-to-many relationship: an ...
0 votes
0 answers
15 views

Integrate D3 with tableau

How to integrate d3.js visualization to tableau dashboard with the help of tableau extension. we tried creating TREX file, and upload into the tableau Dashboard.
0 votes
1 answer
28 views

D3.js in JupyterNotebook

I'm trying to plot an interactive network with D3.js on Jupyter Notebook (via VSCode). Here is the best code that I tried so far: import networkx as nx G = nx.Graph() G.add_edge(1, 2) G.add_edge(...
0 votes
0 answers
30 views

How to create a JSON structure for wordtree development from a text file

I am developing the word tree using python and d3.js. And actually, the development of the visualization itself was successful thanks to the d3.js article, but the problem is the essential JSON data ...
1 vote
1 answer
37 views

Fade out all bars on bar chart on mouseover (except the one my cursor is on top of)

I'm trying to get all bars to fade out on mouseover except the one my cursor is on top of——that's the the one I want to highlight by keeping it full opacity. So far I've been able to get all bars to ...
0 votes
1 answer
19 views

"Identical" array of dictionaries, but one has an undefined key

I have some example code to produce Euler diagrams from an array of dictionaries, which works as long as I explicitly define the array within my .js, and it does not work if I use the input from a ....
1 vote
1 answer
100 views

How can I apply Tailwind CSS classes to SVG elements using D3.js (in VSCODE)?

How can I apply Tailwind CSS classes to SVG elements using D3.js? I'm working on a web project where I need to use both Tailwind CSS and D3.js. However, I'm having trouble applying Tailwind CSS ...
0 votes
0 answers
15 views

How to align @visx Hierarchy Tree view nodes on the top & root node on the top left

I am using VISX and example implementation is here https://codesandbox.io/s/github/airbnb/visx/tree/master/packages/visx-demo/src/sandboxes/visx-linktypes I want to achieve the UI, where root node is ...
1 vote
1 answer
45 views

Passing on condition to d3.dispatch

I am trying to see how can I author an interaction to d3.dispatch. Without dispatch, the interaction is following const data = [ { "id": 1 }, { "id": 2 }, { "id": 3 }, { "id": 4 }, ...
  • 3,970
0 votes
0 answers
15 views

D3 force graph links are getting broken sometime. and rendered separate from the nodes

D3 force graph is created in typescript and working fine most of the time but sometime when coming from different routes the links are separated from the nodes. and I am not able to get the exact ...
1 vote
1 answer
26 views

How to add click handler to D3 element in React

I have the below code that appends a rect into an svg. I need that rect to handle click events such as click and mouseenter. import { useEffect } from "react"; import * as d3 from "d3&...
  • 2,030
0 votes
0 answers
18 views

d3 bar chart on nested data with zoom

I am trying to create zoom on a bar chart with d3 but I am not sure how. This is my code: var groupclusters = d3.nest() .key(function(d) { return d.clustindex; }) .entries(...
  • 480
0 votes
0 answers
88 views

NextJS 13 & Visx / d3 - ERR_REQUIRE_ESM [closed]

I have created some charting components using visx in a separate component package which I am importing into a NextJS 13 app. The components work fine in the component package with storybook etc but ...
  • 1
0 votes
0 answers
12 views

How to remap D3 v3 to v7 functions correctly when migrating treemap api?

I'm trying to make interactive d3 treemaps. Unfortunately all the examples are out of date by a few years too many. So I created a mapping of the old api vs the new API in the d3 library // const ...
2 votes
1 answer
34 views

Put simulation nodes at specific position

I would like put node at specific position with simulation forceX/Y, I expected strength 0 means no any strength to X and Y, then nodes should be put at the position defined by nodes. What's proper ...
  • 8,367
0 votes
1 answer
24 views

One d3 line on nested data with mouseover

I have managed to create the line and the plot that I want but unfortunately I have failed to create a simple hover over the line. This is the main code: var groupclusters = d3.nest() .key(...
  • 480

1
2 3 4 5
783