Working with Christian from MUSA creative in Miami, this project for Urban.US graphs some of the leading startups in the technology space. Using a circular plot, companies are positioned according to their customers (consumers, businesses, or government) and their focus area. This graph was built using d3js and open-source web technologies.
After setting up my digital workspace, I began constructing the graph. Using SVG for its ease in setting up circular graph coordinates, I drew each pie-wedge arc with its labels and decorative elements.
In the supplied data, some companies belonged to more than one segment of the graph (Business to Business, Business to Consumer, Business to Government), and some others belong to more than one focus "orbit."
With this in mind, I placed companies that spanned multiple segments along the edge between the two segments (only one company belonged to all three segments). The first segment used to identify the company takes precedence, the second merely positions it closer to the adjacent border.
My second task in plotting these companies was their distribution from the center point of the graph. I wanted to space the companies evenly actoss the arc, but vary their radius from the center of the circle for visual interest.
Using random placement presented a few problems. First, the companies would appear in a completely different location on every page load. This is disadvantageous for repeat visits. Second, random distribution presents the possibility of overlap and unappealing clustering of points. I wanted the distribution to appear organic, but maintain a sensible sort of spacing.
Being familiar with some basic sound wave synthesis, I looked to sine and cosine waves to place the dots. By progressing through a sin wave oscillation and using irregularly-spaced intervals, a visually interesting oscillation can occur. In this case, I'm using the index of the company within the overall array of companies, combined with custom divisions of 2Π as an increment. The effect provides a visually interesting distribution that will persist with the data set. Even segmenting or subsecting the data will persist the companies' positions.
Using Twitter's typeahead plugin and a visual list of tags supplied in the data, users can filter the companies on the plot to see and explore a smaller subset. After setting up the d3 code to render a collection of companies, this task was as simple as sending a smaller set of data through the visualization code.