39,329
questions
0
votes
0
answers
16
views
Is it possible to implement this D3 map using svg element instead of canvas? [closed]
I've been looking for a good D3 world map implementation and recently came across this really nice one by Brian Swedberg (https://gist.github.com/bwswedberg/da180a7f413d9fa47495482e99a56b9b). It ...
- 3
0
votes
0
answers
21
views
How to have interactions with right mouse click as well as brush in d3
I have a scatterplot with a tooltip interaction on the points using the right mouse button. On top of it I added a 2D brush, it works perfectly, but I cannot iniziate brushing if I am on a datapoint ...
- 160
2
votes
1
answer
53
views
How can I simulate firefox animation behaviour on chrome when using calcMode="linear"?
I have two charts, the first one plots two functions, predators and prey. Each containing a circle with an animateMotion that goes along the function path.
The other chart is a phase curve generated ...
2
votes
1
answer
49
views
How to change the chart arch color on mouse hover effect?
How to do the pie chart arch color change on mouse hover ?
Using .outerRadius(103 + 5); for hover transform, but how to apply some color change for arch? Please help
var arcOver = d3.arc()
....
- 1,091
1
vote
1
answer
50
views
How do I colorize the area only under the timeseries line?
Using D3 JS, I am making a timeseries plot, and trying to colorize the area only under the timseries line. The code below adds horizontal colored blocks, first, below the green threshold, second ...
- 851
1
vote
1
answer
37
views
D3: Position marker does not follow graph when zooming and panning
I have a D3.js graph with a vertical red line that marks the value of variable x. The value of x is determined by a range slider on the page.
The problem is that when the graph is panned/zoomed, the ...
- 1,591
1
vote
0
answers
34
views
The sankey diagram made with d3 fails and has overlapping nodes
I have a problem making a sankey chart with d3. It has to be in an HTML file without using frameworks so that it can be sent without further ado.
The problem is that nodes 4 and 5 are overlapping and ...
0
votes
0
answers
12
views
How to render a custom node for @nivo/tree
I am trying to make a tree structure in react. I was trying with @nivo/tree. There's very limited documentation for this library. I couldn't get it to render a custom node. Attaching the code here.
...
- 105
0
votes
0
answers
15
views
Qualtrics Javascript not displaying visual code - d3 issue?
I am trying to program a drag-and-drop exercise in qualtrics, where participants drag and drop tokens along a number line. The code is printed below along with my survey flow.
However, when I test my ...
- 55
0
votes
1
answer
30
views
d3 Zoom not synchronised when using a offset with a canvas
I'm trying to create a canvas plot with a zoom and margin so I have space to draw the axis. However I notice that when I add a large left margin e.g. const margin = { top: 20, right: 20, bottom: 40, ...
- 1,262
0
votes
0
answers
11
views
how to use force-graph in angular?
how to use force-graph in angular?
I'm trying to use force graph in angular8，but i not found angular force graph package in NPM，
I tried the following:
1、install depend
npm install d3 --save npm ...
- 21
0
votes
0
answers
17
views
Two independent scales on one chart D3
I have a line chart created in d3 (but drawn with Skia, since it's for mobile app using react native, I use d3 for calculations, scales etc.), which has 2 lines on it. Both of the lines have different ...
0
votes
0
answers
25
views
d3.js not displaying geoJSON properly after simplification
I am trying to display a geoJSON map using d3.js. I have a geoJSON file that is far too large. d3 will display that one just fine. However, when I run it through the mapshaper simplification tool, d3 ...
- 19
0
votes
0
answers
35
views
How to Make D3 SVG responsive in react with viewbox
How can I make my D3.js line chart responsive and scrollable horizontally?
Currently, when I resize the window, the SVG size does not adjust, and the chart is not responsive. The chart width ...
- 5,521
0
votes
0
answers
21
views
How to dyanamically get the data on sql using d3.js with recursive functions?
I built a tree with d3.js. The Head and children as shown in the image attached:
https://www.awesomescreenshot.com/image/51112170?key=ef216990b59101f1fa063f72df525fb4
If it is ordinary HTML and ...
1
vote
2
answers
47
views
D3 multiline grafhic Error: <path> attribute d: Expected number, "MNaN,346.47LNaN,3…"
Im trying to create a multiline graphic whith D3, in body I have this Line:
<svg id="lineChart1" width="600" height="400"></svg>
this is the js code:
...
- 11
1
vote
1
answer
62
views
Not defined error in Node.js + Express.js + Ejs project
I'm building website based on node.js(express.js), MYSQL and Ejs.
And I was trying to present graph with d3.js
This is part of script in mainpage.ejs
<script src="https://d3js.org/d3.v6....
- 11
0
votes
0
answers
31
views
Vite and three js web app deployed on vercel is not redirecting to other page
I have created a web app to explore solar system which consists of two pages
Which shows the main solar system and how it works
Which gives you the experience of 3D model of each planet
And when I ...
- 1
0
votes
0
answers
70
views
How to generate a burndown chart from a burnup chart?
I am trying to replicate the effect of the burndown chart in the picture of action items which rely upon different fields, called Estimated Completion Date, Original Due Date, and Closed Date, and use ...
- 1,821
0
votes
1
answer
45
views
.nodeColor() not updating node color for 3d-force-graph
i am having trouble changing the node color for my visualization using 3d-force-graph.
<head>
<style> body { margin: 0; } </style>
<script src="//unpkg.com/3d-...
- 1
0
votes
0
answers
31
views
X axis not showing on d3 graph
Hello I'm currently creating a line chart that takes in as x values the seconds in my .csv file and takes in as y values the value of the signal that represents a patients electrodermal activity.
I've ...
1
vote
1
answer
30
views
How can I use the d3.join method to create a clickable/interactive legend?
I am trying to create a clickable legend functionality in D3 version 7, using the .join() method.
My legend buttons are working and transmitting information correctly. However, there is something ...
- 1,186
0
votes
0
answers
41
views
D3 GeoJSON generated from TopoJSON renders some but not all features.. why is this?
I am trying to render a congressional boundaries map using d3. I am able to do this with the plain geojson file, but because it is quite large, I was trying to trim it down geo2topo. Now when I try to ...
- 11
1
vote
0
answers
26
views
Trying to setup HTML, Javascript, D3 work environment
I am currently trying to teach myself D3 so that I can create some cool data visualizations, however, I am having difficulty getting past the beginning setup. I would be incredibly grateful for any ...
0
votes
0
answers
32
views
Upgrading D3.js within Sencha ExtJS
We are currently licensed for Ext JS Premium.
Ext JS Premium 7.4.0.42 was released on May 6, 2021.
I need some cool stuff from
https://github.com/d3/d3-interpolate/blob/main/README.md
I noticed in one ...
- 558
0
votes
0
answers
26
views
How to display a d3-sankey chart using ReactJS?
I'm trying to create a basic sankey diagram using d3-sankey and ReactJS.
The chart is only displayed with static data from the code.
The data is displayed with both static and backend data on the ...
- 1,679
0
votes
1
answer
38
views
d3js pie chart with specific less traditional different patterns for the segments with slightly rounded corners
I am experimenting with different styles for charts - and I am wondering how to create these exact kind of pattern textures charts for the different segments.
How do you start creating some of these ...
0
votes
0
answers
24
views
d3js semi-pie chart with a seamless wiggle rainbow color pattern
I am experimenting with different styles for charts - and I am wondering how to create these kind of pattern textures charts for the different segments with rounded gapped edges (maybe using ...
1
vote
1
answer
19
views
Interactive Data Visualization for the Web Chapter 5 question about converting strings to floats
I am following the book Interactive Data Visualization for the Web to teach myself how to use D3 (using version 5 of D3) and I am having trouble understating what I am doing wrong, this is on page 76.
...
- 11
0
votes
0
answers
60
views
d3js pie chart with rounded segments
I am trying to experiment with different styles for the d3.js charts I have -- I am unsure how you would round the segments of the pie chart to mirror this design example.
Labels in rounded boxes, ...
0
votes
0
answers
30
views
Best way to remove gaps on candlestick chart using JS Observable Plot (d3)?
I have been working on a candlestick chart using Observable Plot, and I have come across a problem with gaps in the chart. In my dataset, there are of course gaps for weekends when no trading occurs, ...
0
votes
0
answers
14
views
Dragging a D3.js svg path object on top of leaflet map
I am trying to drag D3 objects that are rendered on top of a leaflet map.
I am able to do that when the added objects are "circle" object (tags) but unable to achieve the same thing when ...
- 10.8k
0
votes
1
answer
23
views
Draw a tree using D3.js and then connect two arbitrary nodes (not adjacent in the tree)
I have no problems drawing the tree corresponding to hierarchical object. But I can't to figure out how to connect to some non-adjacent nodes by line... What's the best way to do this?
Here is the ...
- 113
0
votes
0
answers
21
views
D3 Graph should extend when currentStepIndex is triggerd and not rerendered
im trying to get in touch with the D3 library in my React project and so far so good. But i have one problem: i want to animate a graph/line step by step as defined in the filteredData depending on ...
2
votes
2
answers
51
views
Why does the click event work the first time, but subsequent clicks only affect in last DOM node?
issue
I encountered an issue while using D3.js. I have two functions, unexpectedCode and expectedCode, which are supposed to draw some circles in an SVG and change their color when clicked. The click ...
- 21
1
vote
0
answers
40
views
d3 axis labels and ticks are invisible
I am trying to view the axis labels of my d3 timeline chart. We are using v3 of d3 at work which can't be easily changed (there are many charts written this way)
For some reason that I can't figure ...
- 429
0
votes
2
answers
37
views
Typescript error d3 RGBColor not having r, g, b properties
I'm trying to add opacity on colors using a d3 colorscale with diverging scheme.
Here's what I got so far :
const data = [-3, -2, -1, 0, 1, 2, 3];
const colorScale = d3.scaleDiverging(d3....
- 616
0
votes
0
answers
35
views
d3.js multiple relationship visual / tangled tree => collapsible ? add link to node?
I am new with d3.js and I am trying make expandable/collapsible following project:
here
The interest of this one is the multi parents relationship.
I tried to add and modify following functions:
...
0
votes
0
answers
59
views
Displaying state name to the AmCharts 5 Map
Using AmCharts 5 in react application to display the US geographic. I can able to view the states in US Geography, but unable to add the state name to the map. But on hovering of the state, i can able ...
- 787
0
votes
0
answers
28
views
how to create complex polar area chart [duplicate]
Refer this image I have a reference image that I want to recreate in my project, but I haven't found anything similar. The closest matches I found are Highcharts and D3.js charts. The chart I'm ...
1
vote
0
answers
30
views
d3 zoomable circle packing does not display labels when zooming in in angular v.18
everyone I managed to create zoomable circle packing using d3 in angular, every thing works fine even the zoom, but when I zoom in the labels of the children circles does not appear, and When I zoom ...
0
votes
0
answers
51
views
D3.js and Livewire Integration: Points Not Appearing on Zoomed Region
I'm working on a project that integrates D3.js with Livewire (v3.4) in a Laravel application. I aim to display points (schools) on a map when a region (polygon) is clicked and zoomed in. The points ...
- 221
0
votes
1
answer
39
views
SVG line chart using d3 is not rendering to full height along y-axis
I am rendering a svg line chart using d3. For y axis the maximum value in chart data is 104 and minimum is 0. I have taken height of chart to 500. But the maximum value i.e 104 should be rendered at ...
0
votes
0
answers
24
views
scaleTime sets arbitrary tick count
I've created a timeScale using only 2 subsequent dates:
const xFn = d3.scaleTime()
.domain(d3.extent(parsedData, d => d.date))
.range([0, width])
.nice()
let xAxis = d3.axisBottom(xFn);
...
- 5,982
0
votes
0
answers
28
views
D3 Circle Packing with Zooming Consistent End Node Size
I'm building a hierarchical data visualization using D3's circle packing. The library arranges the nodes well, but I'm having trouble with zooming. Specifically, the leaf nodes (circles without ...
- 1
1
vote
1
answer
72
views
How to show multicolor on slider using d3-simple-slider.js
I am using d3-simple slider and want to show multicolor on slider i.e.
From Range 0-9 it should be blue and 9 to 26 is orange and for range 26-60 color should be red and If I move handle which is ...
- 43
1
vote
1
answer
44
views
How to use d3.js to emulate spreadsheet-like keyboard navigation
I have built a webpage using HTML/JS with D3.js to allow data entry/editing. The data is output to the page as a table and there are input boxes to allow the user to update information and then send ...
- 106
1
vote
1
answer
146
views
Linear gradient in d3
I'm trying to create a conic gradient effect using the D3.js library, but I understand that conic gradients aren't natively supported. My goal is to manually implement a clockwise gray gradient that ...
- 11
1
vote
0
answers
56
views
Extract data from d3.js interactive tree to CSV
I don't know if it a silly question but is it possible to extract the data from the nodes from a d3js interactive tree and convert it to CSV data?
It is possible to convert CSV data to d3.js tree by ...
2
votes
0
answers
99
views
How to obtain a sketchy/painty/roughjs/semiotic look with ggplot2 [closed]
I know that with the gradient features introduced in version 4.1 of R, more is possible with respect to graphics. As such, how can I (or is it even possible to) obtain a sketchy and/or painty look as ...
- 2,487