Newest 'd3.js' Questions - Stack Overflow

Questions tagged [d3.js]

D3.js is a JavaScript library for creating interactive data-bound visualisations of documents using HTML, SVG, and Canvas.

0
votes
0answers
8 views

D3 simplest way to draw roads on a map (ideally without API)

This question may straddle both the domains of SO and Open Data SE, so bear with me. I am trying to create a map of the island of Langkawi (in Malaysia). The goal is to have a minimalist map of the ...
-2
votes
0answers
6 views

What is the essential difference between d3 and dagre-d3?

What is the essential difference between d3 and dagre-d3? Currently I'm looking for javascript library to render flowchart/lineage view. Basically, it's like a directed graph. And some user ...
0
votes
0answers
11 views

How do I dynamically update the coordinates for nodes in a D3 forceSimulation?

I am trying to update the position of a node, based on a click event. I can see that the data is updated in console, however the x,y coordinates aren't updating. I was expecting the forceSimulation ...
0
votes
0answers
10 views

The mouseover event for D3.js does not work in Leaflet

1.I used a Leaflet to draw a GeoJSON map. 2.Create a node in svg using D3 3.Bind the mouseover event to the node, but it does not take effect My Environment Leaflet version:1.5.1 D3.js v5 Browser (...
1
vote
1answer
17 views

What is the best way to visualize a self-similarity matrix

I have a string array that holds over 150 elements. I am trying to visualize a self-occurance matrix in a manner similar to this. However, when I try to run the code, the load time is incredibly long. ...
0
votes
0answers
22 views

How to Update d3 force directed graph dynamically in Vue.js?

I have this VueJS code generating d3 force directed network node on mount using json call. I'm trying to update the network graph with new nodes and links using the same json call and after ...
0
votes
0answers
8 views

Chart with varied number of series in a group

I need to add a date field group to a chart. The groups have varied sizes. I have followed a few examples but have not managed to get the date field into the chart. I have created the chart showing a ...
0
votes
0answers
14 views

How to use D3 with direct text input [on hold]

In this case, I'll be using a php output of text. I currently have an adopted file that pulls the data from a csv file. Is there a way to replicate that? The start of the csv call goes like this "d3....
0
votes
1answer
18 views

D3.JS: Discrete filter for image processing

I have an arbitrary raster pattern where blue is -1.0, white is 0.0 and orange is 1.0 (left image). Need to develop an SVG filter, similar to this reference Graying out an image in D3js), but for ...
-4
votes
1answer
28 views

SVG - Draw shapes along the circle path

How to draw shapes as a stroke for Circle in SVG ? Something like this:
0
votes
0answers
22 views

How to scale y-Axis in d3.js according to data input correctly

I created a small Barchart. My problem is that the y-axis doesn't scale according to my dataset. Here is a screenshot: So as you can see the 313 is a little bit above the 800 scale. I would like the ...
0
votes
0answers
27 views

D3: Text to a bar chart doesn't appear

I'm newbie with d3.js and I'm trying to create a bar chart graphic but after creating the first two bars when I try to create the third the text what I want to add to the bar is hidden behind the bar....
0
votes
1answer
28 views

React redirect on click of svg element

I have a single page React App that is d3 and SVG heavy, and I would like to be able to redirect from one page to another when a user clicks on an svg rect on one of my pages. I am familiar with this....
0
votes
0answers
33 views

Need to blend a scatterplot with a radar chart for plotting golf shots - possible in D3? Example image included

I'd like to plot golf shots as dots on a pie-shaped radar chart, given their distance traveled and distance off center. Like this: https://imgur.com/PuvBp3t I've got quite a bit of experience with D3,...
0
votes
0answers
23 views

d3Tip on d3 line chart- can't get display specific values for position on line

I am building a line chart (using d3 in an Angular 6 app) and I would like to display a tooltip with the values corresponding to where the mouse is hovering over on the line. I can only seem to ...
0
votes
1answer
33 views

How to Properly Parse a CSV File to Work With SVG Elements

I'm working with Javascript and d3.js for the first time and as a nice starter project I wanted to make a bar chart. It went fine but the array I used was declared within the .js file, instead of ...
0
votes
2answers
29 views

d3.js - merge multiple line graphs cumulatively into one (x-values not directly matching)

I have multiple datasets like this: const server1 = [ { date: '2019-06-15T00:22:25.000Z', online: 451 }, { date: '2019-06-15T01:08:58.000Z', online: 499 } ]; const server2 = [ { date: '2019-06-...
0
votes
0answers
47 views

How to correctly draw a line chart in d3.js

I want to create a line chart using d3.js but I'm having some issues when it draws. So right now it's drawing like this: But I don't understand why it's showing like this, I just want a line chart ...
-3
votes
1answer
31 views

d3 - add elements without append

I have a demo here I have a stacked area chart with a mouseover that shows a tooltip with info for that area of the chart. I'd also like to show circles onmouseover for the data points in that ...
2
votes
2answers
57 views

Zero tick vertically centered on axis when all values are 0

I've noticed a change in behavior when updating from d3 version 4 to version 5. In v4, when a dataset contains all zero values for the y-axis, the "0" tick is correctly aligned to the bottom of the ...
1
vote
1answer
25 views

Create synchronous loading of data using D3.js and drawing following the loading

I have reached a stage where I believe I am not understanding the correct callback of events. I am utilizing d3.js v5 and my issue is as follows. I have a function which parses a tsv file and adds ...
1
vote
1answer
22 views

d3 combine zoom and drag calls?

Is it possible to conditionally ignore the drag function from eating an event? I have a pan/zoom canvas (as seen here: www.proofapp.io/workspace) and I'm trying to implement a shift+drag multi-...
-1
votes
0answers
36 views

d3.js vs dc.js, and the importance of “cross-filtering”:

I am an anything-js newbie, looking at d3.js and dc.js as possible tools for building an interactive visualization. With dc.js, I see the useful "cross-filter" capability, where making a selection on ...
1
vote
1answer
12 views

I've been trying to use dc.js and crossfilter to build the datatable functionality to listout some data.But the data is not displaying as expected

I've been trying to use dc.js and crossfilter to build the datatable functionality to listout some data.But the data is not displaying as expected My data sample { "name": "Thomas Ludlow Hallaway"...
0
votes
0answers
21 views

Uncaught SyntaxError: Unexpected identifier error with D3 example code

I am trying to run a sample code (https://observablehq.com/@d3/zoomable-sunburst) from the D3 library for a sunburst chart for the first time. I get a syntax error "Uncaught SyntaxError: Unexpected ...
0
votes
0answers
29 views

Link in svg not clickable in d3

I need to add a button in my SVG element through d3. I know you can't add Html directly to an SVG element so I use the foreign object and then add the button/the link. The button appears but isn't ...
0
votes
0answers
13 views

D3 Typeerror cannot read property of undefined

I'm trying to follow this guide, but implementing my own data: https://www.d3-graph-gallery.com/graph/stackedarea_basic.html Here is my function getStackedAreaChart: function(pod) { //eval is ...
-1
votes
1answer
20 views

How can I change the color of a D3 brush

I seem unable to override the default (gray) colour of the D3 brush. Here's a snippet that I think should work: d3.select(this.$el).select('#brush'); .style('fill', '#569fd5') .call(brush.on(...
0
votes
0answers
18 views

d3-lasso cannot find d3-drag module in Angular 7

I'm having this simple code that implements a scatterplot (using d3.js in an angular 7 app), in which I want to enable the d3-lasso feature to select the points. So in order to do that, I installed ...
0
votes
0answers
10 views

Having trouble persisting the position of pack layout in d3.js

I need to save the location and scale of a circle pack (d3.js) when I drag or zoom it. On zooming I am able to get how much it is translated through d3.event.transform, but I cant seem to get an ...
0
votes
0answers
20 views

How can I bind different types of elements to data in d3.js? [duplicate]

I'm trying to enter some data in d3.js, and have it create different types of elements (paths, rects, arcs, etc). For example, my data might be like: var mydata = [{i:0, type:'arc'}, {i:1, type:'rect'...
0
votes
0answers
19 views

Error column chart with d3.json doesnt render

I was trying to change a code to render a column chart inside a DIV, but it doesn't work. The original code is working: <html> <style> body { margin: 15px; background-color: #FFFFFF ...
0
votes
0answers
16 views

D3 - show data points on a stacked area chart

I have a demo here I have a stacked area chart with a mouseover action that shows a tooltip with the data for that area of the chart. On mouseover I'd also like to show circles on the chart showing ...
2
votes
0answers
29 views

How tovisualize local csv file with javascript using d3?

I'm trying to visualize my local csv file with javascript. As I was trying to make a bar graph and wanted to have x Axis "disease name" and y Axis "Anzahl" which is occurence . But having an error ...
2
votes
1answer
16 views

tickSizeOuter not equal zero, but just first and last tick of yAxis shows line

I have a line chart. And just the first and last tick of yAxis shows the outer line. The result as below image: The expected result is that every tick of yAxis shows outer line. Example: https://bl....
-3
votes
0answers
18 views

How to create progress level indicator in d3.js chart [on hold]

i will try to create a progress level indicator chart using d3.js and svg. my output is my output. but i except this type of chart output
-4
votes
0answers
28 views

How do I convert d3 v3 to v4

I have a problem. How I can translate this code in D3 v3 to v4. I know that d3.layout.stack() should be d3.stack() in v4, but it doesnt' work. var data = [ { year: "2006", redDelicious: "10", ...
0
votes
0answers
23 views

Caching to make Dashboard faster

I am creating a dashboard using js [backend is hosted on aws]. Can I store the data in indexedDB or localstorage and still make it real-time?
1
vote
1answer
26 views

Tooltips show in the wrong position

I have three charts in different positions. The tooltips look fine for my first chart, but for the other two the tooltips show in the first chart. I've tried BBbox and getboundindclientrect(), and ...
0
votes
1answer
30 views

How to get d3 treemap cell text to wrap and not overflow other cells

The text for the cells in my d3 treemap don't wrap and overflow the other cells. This my project I want the text to look like this project. I've looked at their code (and many others) but I can't ...
2
votes
1answer
36 views

How to change the icon of a pictogram?

I was trying to change the icon from the pictogram of this example: http://bl.ocks.org/alansmithy/d832fc03f6e6a91e99f4 The part of the code that render the icon is that: svgDoc.append("defs") ....
-1
votes
0answers
20 views

How to render d3 chart in real time when the data is obtained through socket?

I'm getting data in an array based on these values from the backend startval,difference,endval. For example - if startval = 10, difference = 10, endval = 50. Then the array returned is [10,20,30,40,50]...
0
votes
1answer
34 views

How to edit the size (or color…) of selection from user search in D3 force layout?

Been wrestling this issue trying to get it to work for a while... made force network in .js file (the whole file is not included below, but the search function of issue is), but for some reason I ...
-1
votes
0answers
34 views

d3 can anyone explain this error message? (Type error: g is not a function)

I am using d3 version 3. Console throws an error, I don't understand: TypeError: g.each is not a function The error occurs in the d3.js file, not in my app.js Here I am referring to "g" svg ...
0
votes
0answers
26 views

d3 stacked bar only updates 3 times

I want a horizontal stacked bar to update more than 3 times. I am not using random data but actual data. I have data for 60 years. This example has four, but it will only update 3 years. It uses ...
0
votes
1answer
15 views

TypeError: svg.append(…).attrs is not a function when creating charts using D3.js

I am trying to create racing bar charts using D3.js. I am fairly new to the library so I tried to modify this example to learn how the library works. Unfortunately, I am getting the following error: ...
2
votes
1answer
33 views

Get width of element

I have a demo here I have a stacked area chart with a mouseover that shows a tooltip with data for that area of the chart. I want the tooltip to be centered over the top of the area the mouse is ...
1
vote
1answer
25 views

Barchart “dates” are displaying strange / bars are pressed

I want to create a barchart displaying C02 emission. The Problem (see picture below): Why are the bars "pushed" to the right? Why are the years in the x-axis displayed without the first integer? I ...
0
votes
0answers
22 views

How to get x and y coordinate value with vertical and horizontal line marking the touch value with tooltip in react-native-svg-charts

How to get x and y coordinate value with vertical and horizontal line marking the touch value with tooltip in react-native-svg-charts. I just want to make same as given here in this link with react-...
0
votes
0answers
26 views

Correct way to create network graph without overlaps using D3

I have a file of the following format: { "nodes":[ { "id":"abc", "label":"some-long-title" }, { "id":"xyz", "label":"another-long-title" ...