Why the data doesn’t project properly The key issue is that your data is already projected. D3 geoProjections use data that is unprojected, or in lat long pairs. Data in the WGS84 datum. Essentially a d3 geoProjection takes spherical coordinates and translates them into planar cartesian x,y coordinates. Your data does not conform to this … Read more
Because d3 requests (like d3.json) are asynchronous, it’s best practice to wrap all of the code dependent on your external request within the request callback, ensuring that this code has access to the data before executing. From the D3 docs: “When loading data asynchronously, code that depends on the loaded data should generally exist within … Read more
The issue is the winding order of the coordinates (see this block). Most tools/utilities/libraries/validators don’t really care about winding order because they treat geoJSON as containing Cartesian coordinates. Not so with D3 – D3 uses ellipsoidal math – benefits of this is include being able to cross the antimeridian easily and being able to select … Read more
From D3 v4 onwards you cannot use objects to set attr or style anymore. To do so, you have to reference the mini library D3-selection-multi: <script src=”https://d3js.org/d3-selection-multi.v0.4.min.js”></script> After doing that, change your code from attr to attrs (yes, like a plural): var textLabels = labelGroups.append(“text”).attrs({ //mind the ‘s’ here————————-ˆ }); Do the same for the … Read more
d3 v5 uses the fetch API and returns a promise requiring the below code. d3.csv(‘yourcsv.csv’) .then(function(data) { // data is now whole data set // draw chart in here! }) .catch(function(error){ // handle error }) In case in the future people want v4. d3 v4 on the other hand uses the XMLHttpRequest method, and does … Read more
There’s another way to do this that doesn’t require redrawing the graph, and it involves modifying the viewBox and preserveAspectRatio attributes on the <svg> element: <svg id=”chart” viewBox=”0 0 960 500″ preserveAspectRatio=”xMidYMid meet”> </svg> Update 11/24/15: most modern browsers can infer the aspect ratio of SVG elements from the viewBox, so you may not need … Read more
D3v5 and earlier In d3v5 and earlier we could use the pattern: selection.on(“eventType”, function(d,i,nodes) { …. }) Where d is the datum of the element triggering the event, i is its index, and nodes the current group of elements. Event information could be accessed within the event listener with d3.event. D3v6 In d3v6 the pattern … Read more
The signature of d3.json has changed from D3 v4 to v5. It has been moved from the now deprecated module d3-request to the new d3-fetch module. As of v5 D3 uses the Fetch API in favor of the older XMLHttpRequest and has in turn adopted the use of Promises to handle those asynchronous requests. The … Read more
tl;dr The objective of using selectAll(null) is to guarantee that the “enter” selection always corresponds to the elements in the data array, containing one element for every element in the data. The “enter” selection To answer your question, we have to briefly explain what is an “enter” selection in D3.js. As you probably know, one … Read more
I assume that what you want is a tooltip. The easiest way to do this is to append an svg:title element to each circle, as the browser will take care of showing the tooltip and you don’t need the mousehandler. The code would be something like vis.selectAll(“circle”) .data(datafiltered).enter().append(“svg:circle”) … .append(“svg:title”) .text(function(d) { return d.x; }); … Read more