This Male to Female Rank chart is inspired by Piazza Insights 2015 "Men to Women" chart. Since this is a comparison between ranks in two genders, not a gradual change, I think color coded dots work better than arrows. Click on "sort by female" and "sort by male" to look into the trend within each gender. Company names and their respective ranks are completely artificial and random.
Mouse over each square to move it to the very bottom, a reverse of the previous example.
Mouse over each square to move it to the very front. This is helpful when you have svg shapes on top of each other and you need to see one of them.
This tooltip is implemented as a div element. The difference from svg:rect, while cannot be seen here, is that the tooltip will not be cut off by the borders of the svg. This text in the tooltip shows the tooltip's relative position to the blue rectangle and the absolute position in the window. I also observed that margin works differently in Chrome and in Firefox. Something to note when positioning the text.
This tooltip is implemented as an svg:rect element. The limitation is that the tooltip will be cut off by the borders of the svg. This text in the tooltip shows the tooltip's relative position to the blue rectangle and the absolute position in the window.
With a 2D brush, the extent is an array of two arrays, which looks like [[x0, y0], [x1, y1]]. Each sub-array [x,y] is a point on the scale. From this visualization we can tell that e0 = [x0, y0] is always the point closer to the origin.
This is a collapsible list, with no svg elements at all. This is to show the data binding part of D3, which works very well even without visuals. Click on the items in the list to expand or collapse the sublist.
Same clock, same color scheme. Now there is a more elegant way to pass data from child element to parent element.
A clock. Blue is seconds, green is minutes, red is hours. For all three units, "zero" is at x = 300 (middle of canvas), but the y coordinates varies. With "select," the data stored in parent node pass onto child nodes. However, in order to pass data to the parent node, selection had to start over from "d3." Is there a more concise and universal way to do this?