39,171 questions
4
votes
0
answers
42
views
Responsive svg in d3 best way
I am trying to create a responsive SVG. It should scale when the browser is resized. I am currently using the parent container as a reference and setting things to be a % value. I get some issues with ...
- 59
2
votes
0
answers
21
views
Interactive graph in D3.js - problems with adding/flagging elements
I wrote the code for making an interactive graph which have some major problems.
The idea is that first, I want to display three clickable SVGs. After clicking on one of them, the two unclicked SVGs ...
- 21
0
votes
0
answers
34
views
When the child element executes translate(0,0), it abnormally appears on the left side of the parent element
I'm using d3.js to draw a Gantt chart, and I encountered an exception that puzzled me. The following is a function for drawing a Gantt chart (code not relevant to the problem is omitted). gantt-y-axis ...
-1
votes
2
answers
123
views
Build errors when using d3 in a sharepoint 2019 spfx environment
I have a devenvironment setup for Sharepoint 2019/SPSE and i can create webparts but have problem when using d3.js. Adding import * as d3 from 'd3' generates a bunch of type-errors when running gulp ...
- 1
0
votes
0
answers
60
views
SVG rounds edges with large stroke-width
I met a problem during sankey diagram generating with d3 and screenshoting it with html2canvas.
D3 looks fine with this code of links:
<svg id="svg" width="740" height="400">
<g fill="...
- 1,327
0
votes
1
answer
47
views
How to calculate the center of pie slice with pie chart created with D3?
I created a pie chart with D3. I want to calculate the center of each pie slice, so I can draw a line/path from the center of each pie slice. At the end of the line, it'll have text.
Code Playground
I ...
- 15
1
vote
0
answers
48
views
D3 Issue with custom link strength on update
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
<style>
svg {
border: 1px black solid;
}
</style&...
1
vote
1
answer
34
views
Issues with Event Handlers D3.js Update Function
I’m experiencing an issue where the mouseover event isn’t working after integrating the update function into my D3.js code. It seems the event listeners are not being recognized or triggered as ...
- 11
1
vote
1
answer
30
views
Using d3.js to submit multiple JSON requests and bind data to different elements
I am building a configuration page that allows a user to reconcile unmatched data by selecting a match from a list of possibilities. The list of items needing to be matched is generated by the backend,...
- 106
2
votes
0
answers
179
views
Trouble with correctly triangulating a polygon on a sphere in THREE.js
tldr: help I can't correctly triangulate a GeoJSON polygon in 3D space to make it spherical and it has been haunting me for weeks. The question at the end of this novel is "Is this a poly2tri ...
- 41
0
votes
1
answer
227
views
How to install the D3 library
I have an issue with the methods in the D3 library. I am a fairly new to JS and my background is more in Python and Java. I am currently just testing out to make some visuals on a webpage and for some ...
1
vote
1
answer
37
views
Limit chart bottom labels to 7
I'm working on a D3 line chart that requires bottom labels to be 7, but the chart has more data than 7 and want to limit it.
Here is a work-in-progress jsfiddle:
jsfiddle.net/JosephMurphy/au2y7pLs/16/...
- 75
0
votes
0
answers
55
views
D3 scaleTime getting really strange dates
I am working on a timeline in d3. My expectations are that it shows the day of today, and then the user can zoom in/out to see more times and dates. However to start with it gets me a date in 2034 and ...
- 449
0
votes
1
answer
51
views
Creating Real-Time Quantum Entangled Visualizations with D3.js
I am attempting to create real-time quantum entangled visualizations using D3.js. This involves simulating quantum states and visualizing their entanglement dynamically.
I've been exploring quantum ...
1
vote
0
answers
23
views
How do I make the data points follow the cursor in this interactive scatter plot graph?
I want to create an interactive scatter plot graph with the x-axis ranging from 24 to 48 and the y-axis ranging from 10,000 to 100,000. The points should be able to be moved by the user by dragging ...
- 17
1
vote
1
answer
50
views
Unable to create a bar chart in powerbi using d3.js
I'm trying to create a bar chart for a sample data in the d3.js editor in powerbi, but I'm always getting a blank visual or else just a visual with only 2 lines as x and y axes. Below is the code I've ...
- 25
0
votes
0
answers
64
views
React d3 tree display div on hover
I am rendering custom nodes in react-d3-tree. I want to display a div on hover only next to the hovered node. How can I proceed with this?
Each time I hover over a node, all the divs display, not only ...
- 33
1
vote
1
answer
158
views
React onMouseEnter event.currentTarget is always null
I am using React d3 tree with a custom node element. I am trying to show some text on hovering a node, but it only works the first time I hover over one, then the mouse.currentTarget seems to be null ...
- 33
0
votes
0
answers
45
views
Multi line and axes chart using d3.js in powerbi
I'm trying to create a multi line chart with dual y axes , I've tried running the code in powerbi d3.js visual , but is not yielding any visual. I'm not understanding where I've made the mistake
I ...
- 25
0
votes
0
answers
99
views
How to set 'path' to use it with .getTotalLength() .getPointAtLength() methods?
I try to get 'path' to make use of it with .getTotalLength() .getPointAtLength() methods.
I try the following out of not knowing well enough SVG stuff:
// Declare the line generator.
const line = d3
...
- 1
0
votes
1
answer
52
views
How to obviate incompatibility of d3.js versions?
If I use d3@7 I have nice labeling but no circle with toltip moves along the line as it supposed by code. A piece of circle is available in the upper left corner.
If I use d3@6 I have absurd labeling ...
- 1
1
vote
0
answers
66
views
Create line chart using d3.js
I want to create a line chart for the following data in powerbi custom visual d3.js
Student name
Marks
Jasmine
45
Oliver
33
Maya
11
Ethan
66
Sophia
77
Lucas
8
Ava
88
Clara
11
I've tried follwing ...
- 25
0
votes
1
answer
58
views
D3 zoom prevents 'mousedown' event from bubbling
I'm working on an application that requires the use of d3.zoom, and I'm bumping into an issue when listening for the mousedown event. I've simplified the problem into the example below.
Basically, I ...
- 1,685
0
votes
1
answer
94
views
SVG Gradient with D3
I am trying to achieve the following svg gradient
The closest I can achieve is
I'd be very grateful if someone could help out
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.4/d3....
- 1,871
0
votes
1
answer
77
views
Converting Seaborn into D3 Plot
I would like to create this plot in D3.js v7.
To do so, I wrote the following script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
...
- 112
1
vote
1
answer
71
views
Why doesn't d3 like this GeoJSON file?
Does anyone have any idea why D3 is failing to render the following GeoJSON?
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<svg width="960" height="720"></svg>
&...
- 12.9k
0
votes
2
answers
129
views
Vue 2.15.3 Node 18.18.0 d3-org-chart require() of ES Module
I am using Nuxt 2 with Vue version 2.15.3 and my Node version is 18.18.0, npm 9.8.1
"nuxt": "^2.15.3",
"d3-org-chart": "^3.1.1",
After npm install d3-org-chart,...
- 664
0
votes
1
answer
47
views
D3 Chart Doesn't work when using viewbox in Angular Project
My SVG just will not show up in my dom when I change it to try and use a viewbox.
I am just realistically just changing this:
.attr("width", this.width + this.margin.left + this....
- 363
1
vote
0
answers
62
views
How to avoid slow down over long period in infinite animations of CSS?
I have this CSS code below that triggers animation in a path of a D3 graph.The code likes below
.link {
stroke-dasharray: 4;
stroke-dashoffset: 40;
animation: dash 20s linear infinite;
}
@...
- 3,056
0
votes
0
answers
244
views
Is there a way to support ESM and node/NPM without an import map?
I'm working on a library that I publish as ESM. A primary goal is to allow it to be used without a build step, or even without using node/npm at all (just clone the repo and import). But I also ...
- 10.7k
0
votes
2
answers
139
views
Bipartite_D3 giving "ReferenceError: vizjs is not defined" error and not runnin script properly
I am new to programing, but I figured how to do most things on R Studio with the help of some frineds and try and error. But I have no idea what is happening when I try to run the Bipartite_D3 package,...
1
vote
0
answers
30
views
Unable to view an indented tree and a document embedding for this d3 project
I am learning visualization using D3 and was trying to execute this code on my browser for creating an indented tree to view taxonomy and to create a document embedding but unfortunately I can't view ...
0
votes
1
answer
59
views
Why the mouse hover is not showing?
// Create a tooltip
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("position", "...
0
votes
0
answers
45
views
Why are x, y in a twin d3v7 force graph NaN? Why doesn't the data work properly?
I want to implement a dual-panel set of D3 force graphs (see below).
I use an adjacency list to split my original data into two graphs. There are two copies of everything, so individual elements can ...
- 55
1
vote
1
answer
101
views
create d3 heatmap showing days on one axis and hours on the other?
I want to create a heatmap with d3 showing days (January 1, January 2, etc.) on one axis, and hours (12am, 1am, 2am, etc.) on the other. I have managed to get the data to display, but I'm not sure if ...
- 602
0
votes
0
answers
22
views
How to Align KDE Plots to the Edges of a Scatterplot in React with TypeScript and D3.js
I am working on creating a component that includes scatterplots for multiple datasets and KDE (Kernel Density Estimation) plots for the x and y-coordinates of those datasets, in React with TypeScript ...
- 1
1
vote
1
answer
74
views
Directed graph update nodes with new data
I've been struggling with this issue for days now and cannot find a solution to update the nodes properly.
Since I'm using threejs to render the graph I couldn't find enough info on the web on how to ...
- 608
0
votes
1
answer
345
views
Javascript Error: require is not defined is the Jupyter Notebook Macbook Pro OS
I'm encountering a JavaScript error, "require is not defined", when trying to run Jupyter Notebook on a MacBook Pro. This issue occurs in both Edge and Chrome browsers. Below is the ...
- 388
0
votes
2
answers
473
views
How to filter Observable Plot text mark when "section" is too narrow
Using Observable Plot, I wish to recreate the https://merrysky.net weather timeline with colored bands and text labels.
I have gotten an initial version working, but it has some flaws:
The labels are ...
- 18k
-1
votes
1
answer
339
views
Transform NCDU JSON output file to hierarchical json data like flare.json [d3 example file]
I want to convert the NCDU json file (https://dev.yorhel.nl/ncdu/jsonfmt) to a hierarchical json that can be imported in D3.js using D3.json(). Here is the D3 sample file flare.json (https://raw....
- 101
0
votes
0
answers
77
views
D3 Projection has black border, causes country fills to be impossible
I am currently trying to setup a D3 Map with PIXI. For some reason, when using d3.geoMercator with data from https://www.geoboundaries.org/. I get this border around my map:
When having all my ...
- 143
1
vote
2
answers
637
views
Get Observable Plot x,y data values from mouse (hover) position
Question: How can I get the x/y data values from an Obervable Plot for the point the mouse is hovering over? (Or touched on mobile.)
Background: I am trying to make an interactive timeline like on ...
- 18k
0
votes
1
answer
63
views
How can I add text to a data point on a d3 graph?
I am using d3 to try and create a line graph with text on one of the lines data points. Here is a jsfiddle of my unsuccessful attempt at doing this:
https://jsfiddle.net/pz2afemd/
var y = [5,6,8,4]
...
- 151
1
vote
0
answers
21
views
Creating circular curve in D3 [duplicate]
EDIT: My question was closed and a similar question was suggested, but the accepted answer was some overly-complicated formula. However, I found a better answer to my question via a link to ...
- 517
0
votes
0
answers
67
views
HTML opening with VS Code Live Server buth not from my local files
I have an issue with this HTML code using d3.js. It's working fine as long as I open it with Live Server on VS Code, but once I open it from my local files it doesn't show the graphs it creates, I was ...
- 57
1
vote
1
answer
119
views
d3js - geojson of polygons is not drawn
I'm trying to draw a map (polygons of the districts of a city) using d3js. And all I get is a beige rectangle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=&...
1
vote
1
answer
135
views
D3orgChart Zoom when scrolling
Here is an example of adding buttons to zoom in and zoom out on a chart.
I need to stop zoom when scrolling on chart.
How can I do that?
https://stackblitz.com/edit/js-zd21e3?file=index.html
i tried ...
- 33
0
votes
0
answers
45
views
Passing a value returned from a function into a d3.filter
I am trying to pass a value from a function that locates a name from a dropdown list in my html and have it as the argument in my d3.filter.
The function works fine, but I cannot seem to figure out ...
- 1
1
vote
1
answer
278
views
D3 globe with country names label layer
I'm struggling to find any example of a D3 globe (or Globe-gl etc.) that has country names as a label layer. I'm essentially looking for this demo
https://observablehq.com/@michael-keith/draggable-...
1
vote
0
answers
178
views
Issue with mapboxgl not removing layers/source on map
I'm having trouble dynamically remove and re-adding layers to a mapboxgl map.
Here's some pseudocode, unfortunately I'm not able to produce a fully reproducible example since I'm running this code in ...
- 1,839