39,352
questions
0
votes
0
answers
11
views
how to create complex polar area chart
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
14
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
26
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 ...
0
votes
1
answer
28
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
22
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);
...
0
votes
2
answers
49
views
how to create circumplex chart
enter image description here
i have this reference image which i want to create in my project but i cant find anything similar to this the closest one that i found are highchart and d3 chart.
i ...
0
votes
0
answers
25
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 ...
0
votes
1
answer
53
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 ...
1
vote
1
answer
42
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 ...
1
vote
1
answer
99
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 ...
1
vote
0
answers
50
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
92
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 ...
0
votes
0
answers
22
views
dash/plotly: add custom d3js date format specifier
I have a dash/plotly figure for which I use a d3js date format specifier among d3-time-format:
fig.update_xaxes(tickformat="%s", hoverformat="%Y-%m-%dT%H:%M:%S.%L")
Here, for the ...
0
votes
1
answer
38
views
How to change the appearance of D3 chart in react?
I have worked through the following tutorial to create a D3 chart using react:
https://paulho1973.medium.com/create-line-chart-with-d3-and-react-a0ae9a5e1f7
I know how to change the colour of the line ...
3
votes
1
answer
68
views
Matching the colors and order of inflow and outflow in a sankeyNetwork diagram
I would like to rearrange the inflow and outflow in the Sankey diagram according to each source. For example, among the 2-year survivors in the localized OP group, some continue to survive into the ...
1
vote
0
answers
19
views
How can I fix overlapping axes and graphs in d3-contour?
I'm drawing a graph using contour from the d3 library, and I'm having trouble with the graph and the axes overlapping. I don't know what the problem is. The code below is the code that's causing the ...
0
votes
0
answers
34
views
D3 zoom reset transition causes chart to disappear first
I've been trying out the D3 library in a Nextjs app and I am trying to get the zoom and pan working. Now, I've somehow managed to get the zoom and pan working. What I'm having trouble with is ...
0
votes
0
answers
19
views
Is there a way to implement D3.js in Odoo?
I have managed to make some charts using d3.js but I wanted to put them into Odoo. I managed to get a dashboard run using Chart.js but d3.js is more complete for me. I loaded the d3.js but the charts ...
0
votes
0
answers
25
views
D3 support for network graph with area drawing
I want to create this using d3.js but I haven't found any samples or reference like it. I already tried it with d3-force and Voronoi diagrams. But it was not successful, has anyone done this before in ...
0
votes
0
answers
63
views
How to align Nivo Bar chart label position to end of bar?
Hi I am trying to align the labels of my bar chart to the far right of the bar but haven't been able to do so yet. The docs for Nivo Bar suggests I use a labelPosition="end" property but on ...
0
votes
1
answer
38
views
How can I slow down drag behavior with D3/JavaScript?
I am designing a visualization which begins with the user drawing points on the screen as shown here: https://jsfiddle.net/jtr13/j2yrknf3/25/
The relevant part of the code (inspired by this answer) is:...
0
votes
1
answer
31
views
D3.min.js Installation Issues
I am using Scott Murray's book to learn about D3. In "Chapter 4 Setup"/"Download D3" the instruction is to go to https://d3js.org and click the download button. I am not finding ...
0
votes
0
answers
18
views
Bugging at rescale() function in D3js
i'm working on a data visualize project and trying to use D3js library for graphs. Everything is fine, except when I try to let my bar chart zoomable on X scale.
<div class="row" id="...
0
votes
0
answers
12
views
Tooltip not showing up d3.js version d3 v6
async generateQuadrat(id: any, current_data: any, dimensions?: any) {
d3.selectAll(`#${id} > svg`).remove();
console.log(current_data);
if (!dimensions) {
dimensions = {
...
0
votes
0
answers
16
views
Hide coordinates of a dot in a label in Plotlyjs D3 chart
I am using this Plotly 3D chart as setup https://plotly.com/javascript/3d-point-clustering/
and want to show custom text on a hover label, not the coordinates + text.
In the example there's no config ...
0
votes
1
answer
30
views
Using D3.js for rendering map but the resulted map is too small
I'm using D3.js for drawing map of Vietnam. I fetch a GeoJSON data from an URL (in the code), I following a lot of instructions, from converting to TopoJSON (for compact size) then convert back to ...
0
votes
0
answers
51
views
d3.js zooming on a line chart not updating data
I am trying to add zooming functionality to my line chart. However, after consulting the documentation and the examples provided by d3.js, my solution still only updates the scaling of the x-axis, ...
0
votes
0
answers
17
views
Draw a graph as in image
I need to draw a graph as shown in image.
const svg = d3.select("svg");
const width = +svg.attr("width");
const height = +svg.attr("height");
// Define the ...
0
votes
0
answers
41
views
Collapsible/Expandable Bowtie hierarchy - Javascript D3
I am trying to build a bowtie hierarchy diagram using Javascript d3. I have the code working for one way hierarchy but I haven't been able to make it expand/collapse it smoothly both ways. I have ...
1
vote
1
answer
20
views
D3.js + Next.js (React) cannot parse csv
I'm trying to import a csv using d3.csvParse, but for some reason it's not loading my csv file. I'm using the latest version of Next.js (v14.2.5)
Here's my project structure:
project/
- public/
- ...
4
votes
0
answers
39
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 ...
0
votes
0
answers
27
views
is it possible to set the initial coordinates of the node in the ngx-graph library
Hello everyone I wrote code to visualize the graph using ngx-graph, but I ran into a problem, I need to center the main nodes (in my data they are marked with a specific tag). Are there any options to ...
0
votes
0
answers
24
views
Why is my ridgeline plot not closing correctly?
I wanted to make a Ridgeline Plot, which changes, when using a dropdown menu to change the data.
Started with a simple attempt first, and first rows are fine, but one of them is kind of off.
The line ...
2
votes
0
answers
18
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 ...
0
votes
0
answers
30
views
How to store Programmatic zoom for mouse zoom not to start at 0,0 scale 1 again
I have a d3 v4 script which draws a windrose / pie chart type graphic which is tweened into to the canvas from x:0, y:0 to the middle of the canvas.
When a User zooms that windorose catapults back to ...
0
votes
0
answers
29
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 ...
0
votes
0
answers
35
views
Leaflet - SVGs in Custom Pane not updating position
I am using d3.js to draw svgs on a basic map in Leaflet. I want my custom pane lay on top. I have created a pane and it works just fine.
// draw overlay in custom pane
function drawBorderOverlay() {
...
0
votes
2
answers
42
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 ...
0
votes
0
answers
58
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="...
0
votes
0
answers
20
views
How make own d3.arc function?
I try make own d3.arc function but can't count arc's large-arc-flag and sweep-flag.
createArc (bands) {
const innerRadius = this.maxRadius * 0.8
const outerRadius = this.maxRadius * 0.95
...
0
votes
1
answer
18
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 ...
1
vote
0
answers
34
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
22
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 ...
1
vote
1
answer
23
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,...
2
votes
0
answers
64
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 ...
0
votes
1
answer
72
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 ...
0
votes
0
answers
28
views
How to sort and align the nodes vertically in the graph using d3.js and angular 13
I have used the d3.js graph structure to draw the flow chart. I have managed to align each node vertically at each level. However, I am facing several issues:
I am unable to sort the nodes based on ...
1
vote
1
answer
33
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/...
0
votes
0
answers
50
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 ...
0
votes
0
answers
28
views
Plotting (discontinuous) 2d-functions correctly with d3
I have to have a smooth plot of a decisionboundary which is a function that takes (x,y) as input and returns a single value. The decisionboundary points that I have to plot have to be smaller than a ...