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.
d3.js
4,310
questions
147
votes
11
answers
73k
views
Center a map in d3 given a geoJSON object
Currently in d3 if you have a geoJSON object that you are going to draw you have to scale it and translate it in order to get it to the size that one wants and translate it in order to center it. This ...
- 6,962
166
votes
6
answers
244k
views
Show data on mouseover of circle
I have a set of data that I am plotting in a scatter. When I mouseover one of the circles I would like it to popup with data (like x, y values, maybe more). Here is what I tried using:
vis....
- 4,002
15
votes
1
answer
4k
views
Selecting null: what is the reason behind selectAll(null) in D3?
I've seen some D3 codes with a pattern like this for appending elements:
var circles = svg.selectAll(null)
.data(data)
.enter()
.append("circle");
I really don't get this snippet. Why ...
- 102k
56
votes
2
answers
21k
views
Code within d3.json() callback is not executed
I am trying to load a GeoJSON file and to draw some graphics using it as a basis with D3 v5.
The problem is that the browser is skipping over everything included inside the d3.json() call. I tried ...
- 976
245
votes
12
answers
143k
views
What's the best way to make a d3.js visualisation layout responsive?
Assume I have a histogram script that builds a 960 500 svg graphic. How do I make this responsive so on resize the graphic widths and heights are dynamic?
<script>
var n = 10000, // number of ...
- 12.7k
24
votes
1
answer
23k
views
Unable to get node datum on mouseover in D3 v6
I am trying to get a nodes' bound datum with selection.on() in D3 v6. In my event listener I'm getting the mouse event data instead of the datum. How do I get the datum?
This my code
const data = {
...
- 287
36
votes
2
answers
32k
views
How to load data from a CSV file in D3 v5
I'm trying to load data from a CSV file in D3; I have this code:
function update (error, data) {
if (error !== null) {
alert ("Couldn't load the dataset!");
} else {
//do ...
- 513
6
votes
2
answers
3k
views
D3.js Drawing geojson incorrectly
I am trying to visualize russians regions. I got data from here, validate here and all was well - picture.
But when I try to draw it, I receive only one big black rectangle.
var width = 700, height =...
13
votes
2
answers
6k
views
Scaling d3 v4 map to fit SVG (or at all)
I am trying to make this map of the us scale smaller. Either to my SVG, or even manually.
This is my code in its simplest from:
function initializeMapDifferent(){
var svg = d3.select("#map")....
- 135
12
votes
1
answer
6k
views
Cannot use attr with an object in D3 v4
I've been trying to convert a nice D3 chart example ( https://jsfiddle.net/thudfactor/HdwTH/ ) to an Angular2 component with the new D3 v4.
I do however get a "cannot read property text of null&...
- 6,990
53
votes
8
answers
91k
views
Importing local json file using d3.json does not work
I try to import a local .json-file using d3.json().
The file filename.json is stored in the same folder as my html file.
Yet the (json)-parameter is null.
d3.json("filename.json", function(json) {
...
- 750
14
votes
1
answer
10k
views
variable scope in d3 javascript
I want to get data in global variable by using the following code:
var data;
d3.json ( "file.json" , function(json) {
data = json;
console.log(data); //defined
});
console.log(data); //undefined
...
- 1,191
135
votes
6
answers
202k
views
How to add a tooltip to an svg graphic?
I have a series of svg rectangles (using D3.js) and I want to display a message on mouseover, the message should be surrounded by a box that acts as background. They should both be perfectly aligned ...
- 14.1k
16
votes
1
answer
18k
views
Multiseries line chart with mouseover tooltip
I've created a multi-series line chart using this bl.ocks.org code example. I've managed to recreate it on JSFiddle.
Now, I'm trying to add an x-value mouseover tooltip, which displays the a tooltip ...
- 3,581
4
votes
1
answer
3k
views
Retrieve DOM target from drag callback when `this` is not available
The documentation for d3.drag states the DOM element target of the drag event will be available in this to the callback:
When a specified event is dispatched, each listener will be invoked with the ...
- 8,208