Data, Maps, Usability, and Performance

API canvas d3 data geo GeoJSON html5 image JavaScript json maps mysql PHP WordPress

Results for tag: d3

Creating and Exporting SVG Graphics with JSON and D3

SVG built from JSON in D3

Recently, I have been playing around with SVG or Scalable Vector Graphics. SVG is a XML-style language for describing two-dimensional vector graphics supported by modern browsers. One of the main advantages of using vector instead of bitmap to serve graphics is that you can be resolution independent (larger scale does not lose quality) but there are other advantages, like smaller size and no HTTP requests (SVG is embedded into html), styling through CSS, animating with JavaScript, and editing. I am not going to get into the basics of SVG as these tutorials have already done a great job explaining SVG in detail:

Read more

Over 1000 D3.js Examples and Demos

D3 data visualization examples

Here is an update with over 2000 D3js examples.

One of the best things that I like about D3 is the ridiculous amount of awesome demos available online and last night I have stumbled on an excel sheet with 1,134 examples of data visualizations with D3. If you are just starting out with D3 you will appreciate the well organized API docs and really great tutorials and cheat sheets but there is nothing like seeing a demo with code. There are many D3 examples online but I have not seen such a big list published anywhere so I am dropping it below, with thumbnail images of each D3 demo on link mouseover. Here are 1,134 D3 examples:
Read more

D3 World Maps: Tooltips, Zooming, and Queue

Mapping with D3

Update: I highly recommend checking out this responsive D3.js framework with pan and zoom limits and the new D3 World Map Template.

D3 has a lot of built in support (a powerful geographic projection system) for creating Maps from GeoJSON. If you have never used D3 for maps, I think you should take a look at this D3 Map Tutorial. It covers the essentials of making a map with D3 and TopoJSON, which I will use below in more advanced examples. TopoJson encodes topology and eliminates redundancy, resulting in a much smaller file and the GeoJSON to TopoJSON converter is built with NodeJS.

Thus, I encourage you all to start using TopoJSON and below, I will go over a couple examples of building a D3 World Map with colors, tooltips, different zooming options, plotting points from geo coordinates, and listening to click events to load new maps. I will also use Mike Bostock’s queue script to load the data asynchronously.

Read more