Interactive data visualization user interface with hierarchical filtering based on gesture location on a chart
The various embodiments described herein include methods and devices for interactive data visualization. In one aspect, a method is performed at a device with a touch-sensitive surface and a display. The method includes (i) displaying a first chart, where the first chart concurrently displays a first set of categories in a first region and a second set of categories in a second region; and (ii) displaying a respective visual mark in the first chart corresponding to each respective pair of categories. The method further includes: (i) detecting a touch input that corresponds to a location on the display of the first chart; (ii) determining whether the location is in the first region, the second region, or neither; (iii) removing, via an animated transition, one or more visual marks based on the determination; and (iv) updating display of the first chart.
1. A method, comprising:
at an electronic device with a touch-sensitive surface and a display:
displaying a first chart on the display, wherein the first chart represents a plurality of data records from a data set, and the first chart concurrently displays a first set of categories in a first region and a second set of categories in a second region;
displaying in the first chart, for each respective pair of categories comprising a respective first category from the first set of categories and a respective second category from the second set of categories, a respective visual mark representing data records in the plurality of data records that correspond to the respective pair of categories;
displaying a first indicium that specifies how many of the plurality of data records are represented in the first chart;
detecting a first touch input at a location on the touch-sensitive surface that corresponds to a location on the display of the first chart;
determining whether the location is in the first region, the second region, or neither the first region nor the second region;
removing from the first chart, via an animated transition, one or more visual marks based on the determination, wherein the one or more visual marks move in concert with movement of the first touch input during at least a portion of the animated transition, including:
in accordance with a determination that the location is in the first region and a determination that the location corresponds to a label for a first category from the first set of categories, removing all of the visual marks in the first chart that correspond to the first category;
in accordance with a determination that the location is in the second region and a determination that the location corresponds to a label for a second category from the second set of categories, removing all of the visual marks in the first chart that correspond to the second category; and
in accordance with a determination that the location is in neither the first region nor the second region and a determination that the location corresponds to a first visual mark, removing the first visual mark from the first chart; and
updating display of the first chart, including:
continuing to display the first indicium;
displaying a second indicium that the one or more visual marks have been removed; and
displaying a third indicium that specifies how many of the plurality of data records are represented in the first chart after the one or more visual marks have been removed.
2. The method of claim 1 , wherein the first touch input is a drag gesture or a swipe gesture that moves in a first predefined direction on the touch-sensitive surface.
3. The method of claim 1 , further comprising:
after removing the one or more visual marks from the first chart, detecting a second touch input at a second location on the touch-sensitive surface that corresponds to a second location on the display of the first chart; and
in response to detecting the second touch input, adding the one or more visual marks to the first chart.
4. The method of claim 3 , wherein the second location on the display of the first chart corresponds to display of an indicium that the one or more visual marks have been removed.
5. The method of claim 1 , wherein displaying the first chart includes displaying a plurality of visual marks, and the method further comprises:
detecting a second touch input at a second location on the touch-sensitive surface that corresponds to a second location on the display of the first chart;
determining that the second touch input corresponds to a subset of the plurality of visual marks; and
removing from the first chart, via a second animated transition, all of the visual marks in the first chart except the subset of visual marks in accordance with at least one characteristic of the second touch input.
6. An electronic device, comprising:
a display;
a touch-sensitive surface;
one or more processors;
memory; and
one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs including instructions for:
displaying a first chart on the display, wherein the first chart represents a plurality of data records from a data set, and the first chart concurrently displays a first set of categories in a first region and a second set of categories in a second region; and
displaying in the first chart, for each respective pair of categories comprising a respective first category from the first set of categories and a respective second category from the second set of categories, a respective visual mark representing data records in the plurality of data records that correspond to the respective pair of categories;
displaying a first indicium that specifies how many of the plurality of data records are represented in the first chart;
detecting a first touch input at a location on the touch-sensitive surface that corresponds to a location on the display of the first chart;
determining whether the location is in the first region, the second region, or neither the first region nor the second region;
removing from the first chart, via an animated transition, one or more visual marks based on the determination, wherein the one or more visual marks move in concert with movement of the first touch input during at least a portion of the animated transition, including:
in accordance with a determination that the location is in the first region and a determination that the location corresponds to a label for a first category from the first set of categories, removing all of the visual marks in the first chart that correspond to the first category;
in accordance with a determination that the location is in the second region and a determination that the location corresponds to a label for a second category from the second set of categories, removing all of the visual marks in the first chart that correspond to the second category; and
in accordance with a determination that the location is in neither the first region nor the second region and a determination that the location corresponds to a first visual mark, removing the first visual mark from the first chart; and
updating display of the first chart, including:
continuing to display the first indicium;
displaying a second indicium that the one or more visual marks have been removed; and
displaying a third indicium that specifies how many of the plurality of data records are represented in the first chart after the one or more visual marks have been removed.
7. The electronic device of claim 6 , wherein the first touch input is a drag gesture or a swipe gesture that moves in a first predefined direction on the touch-sensitive surface.
8. The electronic device of claim 6 , wherein the one or more programs further comprise instructions for:
after removing the one or more visual marks from the first chart, detecting a second touch input at a second location on the touch-sensitive surface that corresponds to a second location on the display of the first chart; and
in response to detecting the second touch input, adding the one or more visual marks to the first chart.
9. The electronic device of claim 8 , wherein the second location on the display of the first chart corresponds to display of an indicium that the one or more visual marks have been removed.
10. The electronic device of claim 6 , wherein displaying the first chart includes displaying a plurality of visual marks, and the one or more programs further comprise instructions for:
detecting a second touch input at a second location on the touch-sensitive surface that corresponds to a second location on the display of the first chart;
determining that the second touch input corresponds to a subset of the plurality of visual marks; and
removing from the first chart, via a second animated transition, all of the visual marks in the first chart except the subset of visual marks in accordance with at least one characteristic of the second touch input.
11. A non-transitory computer-readable storage medium storing one or more programs, configured for execution by an electronic device with a display and a touch-sensitive surface, the one or more programs comprising instructions for:
displaying a first chart on the display, wherein the first chart represents a plurality of data records from a data set, and the first chart concurrently displays a first set of categories in a first region and a second set of categories in a second region; and
displaying in the first chart, for each respective pair of categories comprising a respective first category from the first set of categories and a respective second category from the second set of categories, a respective visual mark representing data records in the plurality of data records that correspond to the respective pair of categories;
displaying a first indicium that specifies how many of the plurality of data records are represented in the first chart;
detecting a first touch input at a location on the touch-sensitive surface that corresponds to a location on the display of the first chart;
determining whether the location is in the first region, the second region, or neither the first region nor the second region;
removing from the first chart, via an animated transition, one or more visual marks based on the determination, wherein the one or more visual marks move in concert with movement of the first touch input during at least a portion of the animated transition, including:
in accordance with a determination that the location is in the first region and a determination that the location corresponds to a label for a first category from the first set of categories, removing all of the visual marks in the first chart that correspond to the first category;
in accordance with a determination that the location is in the second region and a determination that the location corresponds to a label for a second category from the second set of categories, removing all of the visual marks in the first chart that correspond to the second category; and
in accordance with a determination that the location is in neither the first region nor the second region and a determination that the location corresponds to a first visual mark, removing the first visual mark from the first chart; and
updating display of the first chart, including:
continuing to display the first indicium;
displaying a second indicium that the one or more visual marks have been removed; and
displaying a third indicium that specifies how many of the plurality of data records are represented in the first chart after the one or more visual marks have been removed.
12. The computer-readable storage medium of claim 11 , wherein the first touch input is a drag gesture or a swipe gesture that moves in a first predefined direction on the touch-sensitive surface.
13. The computer-readable storage medium of claim 11 , wherein the one or more programs further comprise instructions for:
after removing the one or more visual marks from the first chart, detecting a second touch input at a second location on the touch-sensitive surface that corresponds to a second location on the display of the first chart; and
in response to detecting the second touch input, adding the one or more visual marks to the first chart.
14. The computer-readable storage medium of claim 13 , wherein the second location on the display of the first chart corresponds to display of an indicium that the one or more visual marks have been removed.
15. The computer-readable storage medium of claim 11 , wherein displaying the first chart includes displaying a plurality of visual marks, and the one or more programs further comprise instructions for:
detecting a second touch input at a second location on the touch-sensitive surface that corresponds to a second location on the display of the first chart;
determining that the second touch input corresponds to a subset of the plurality of visual marks; and
removing from the first chart, via a second animated transition, all of the visual marks in the first chart except the subset of visual marks in accordance with at least one characteristic of the second touch input.