d3.js

How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?

by

There are 5 steps. I often use this method to output inline svg. get inline svg element to output. get svg source by XMLSerializer. add name spaces of svg and xlink. construct url data scheme of svg by encodeURIComponent method. set this url to href attribute of some “a” element, and right click this link … Read more

How do I remove all children elements from a node and then apply them again with different color and size?

by

Your answer will work, but for posterity, these methods are more generic. Remove all children from HTML: d3.select(“div.parent”).html(“”); Remove all children from SVG/HTML: d3.select(“g.parent”).selectAll(“*”).remove(); The .html(“”) call works with my SVG, but it might be a side effect of using innerSVG.

Comparison between d3.js and chart.js (only for charts) [closed]

by

d3.js is not a “charting” library. It is a library for creating and manipulating SVG/HTML. It provides tools to help you visualize and manipulate your data. While you can use it to create conventional charts (bar, line, pie, etc…) it’s capable of so much more. Of course with this “capable of so much” comes a … Read more

Difference between GeoJSON and TopoJSON

by

If you care about file size or topology, then use TopoJSON. If you don’t care about either, then use GeoJSON for simplicity’s sake. The primary advantage of TopoJSON is size. By eliminating redundancy and using a more efficent fixed-precision integer encoding of coordinates, TopoJSON files are often an order of magnitude smaller than GeoJSON files. … Read more

Invoke a callback at the end of a transition

by

You want to listen for the “end” event of the transition. // d3 v5 d3.select(“#myid”).transition().style(“opacity”,”0″).on(“end”, myCallback); // old way d3.select(“#myid”).transition().style(“opacity”,”0″).each(“end”, myCallback); This demo uses the “end” event to chain many transitions in order. The donut example that ships with D3 also uses this to chain together multiple transitions. Here’s my own demo that changes the … Read more

A good book for learning D3.js [closed]

by

As @Autio already mentioned, there are the tutorials from Scott Murray on his website. You will also note that on his site, he has a link to his recent d3 book, Interactive Data Visualization for the Web. However, that book is now available online for free, along with embedded jsbin examples. http://chimera.labs.oreilly.com/books/1230000000345/index.html So if you … Read more

d3 axis labeling

by

Axis labels aren’t built-in to D3’s axis component, but you can add labels yourself simply by adding an SVG text element. A good example of this is my recreation of Gapminder’s animated bubble chart, The Wealth & Health of Nations. The x-axis label looks like this: svg.append(“text”) .attr(“class”, “x label”) .attr(“text-anchor”, “end”) .attr(“x”, width) .attr(“y”, … Read more

What is the difference between D3 and jQuery?

by

D3 is data-driven but jQuery is not: with jQuery you directly manipulate elements, but with D3 you provide data and callbacks through D3’s unique data(), enter() and exit() methods and D3 manipulates elements. D3 is usually used for data visualization but jQuery is used for creating web apps. D3 has many data visualization extensions and … Read more

Fast and responsive interactive charts/graphs: SVG, Canvas, other?

by

Fortunately, drawing 2000 circles is a pretty easy example to test. So here are four possible implementations, two each of Canvas and SVG: Canvas geometric zooming Canvas semantic zooming SVG geometric zooming SVG semantic zooming These examples use D3’s zoom behavior to implement zooming and panning. Aside from whether the circles are rendered in Canvas … Read more