The mappings from a bar chart built using D3 before (left column) and after (right column) deconstruction and restyling with our tools. Deconstructed mappings are shown to the right of the original visualization, and the mappings after restyling are shown to the right of the restyled result along with any unmapped attributes that were changed in the restyling. We use the arrow notation to indicate linear and categorical mappings. Mappings removed and added during restyling are highlighted in red and and green respectively. Changed mappings and attributes are highlighted in blue.
The original bar chart shows the 20 countries with the highest unemployment rates sorted by unemployment rate along the y-axis. We restyle the chart into a dot plot. Original visualization by Leon du Toit (http://bl.ocks.org/leondutoit/6436923/).
D3 Deconstructor Chrome extension with source code
Deconstructing and Restyling D3 Visualizations
UIST 2014, October 2014. pp. 253-262.