Select Page

D3.js Order Map

Project done using D3.js (Data Driven Documents). We had a mini hackathon at work and the prompt was to create a way to visualize data that could be useful.  We were given complete creative freedom.  I decided to come up with a way to visualize where our orders were being shipped and the amount spent on each order.  Using the collected data, I was able to get the latitude/longitude coordinates of each order via the shipping address, the dollar amount spent per order, and order ID.  I plotted the latitude/longitude coordinates on the X and Y axis, and set the radius of each circle (representing an order) to a ratio of pixels to dollar amount.  The result was this map visualization showing where orders had been shipped and how large the order.  I dropped the opacity of each circle to show orders which overlapped by location.  This way, the opacity corresponds to the quantity of orders placed in a geographical location.  Hovering over individual circles will display the order’s ID and dollar amount spent. This project was done for fun, but could easily be functional in a dashboard or other applications.