# Inspiration For User Interactions

## Zooming

<https://www.highcharts.com/demo/bubble>

- you can zoom into a selected area
- the graph readjusts and shows the selected area 

<img src="pictures/inspiration_zooming.png" height="350" border="1px solid #ddd"/>  <img src="pictures/inspiration_zooming2.png" height="350" border="1px solid #ddd"/>

## Sunburst

<https://www.highcharts.com/demo/sunburst>

- clicking on a part of an inner circle, the diagram is readjusted
- it now only shows the parts on the outer circles that stand in relation to the selected one

<img src="pictures/inspiration_sunburst.png" height="500" border="1px solid #ddd"/>  <img src="pictures/inspiration_sunburst2.png" height="500" border="1px solid #ddd"/>

## Dynamic Dashboard

<https://uber.github.io/react-vis/examples/charts/dynamic-dashboard>

- you can select some data in one diagram 
- this data is highlighted in all diagrams 

<img src="pictures/inspiration_dynamicDashboard.png" height="500" border="1px solid #ddd"/>  <img src="pictures/inspiration_dynamicDashboard2.png" height="500" border="1px solid #ddd"/>

## Display data in different ways

<https://www.kiva.org/team/nerdfighters/graphs>

- the same data is displayed in different ways: 
  - different diagram types (pie, line, stacked area, % over time)
  - different units (amount $, count)

<img src="pictures/inspiration_nerdfighters.png" height="400" border="1px solid #ddd"/>  <img src="pictures/inspiration_nerdfighters2.png" height="400" border="1px solid #ddd"/>

## Slicer

<https://vega.github.io/vega-lite/examples/interactive_multi_line_label.html>

- the slicer shows the values of all elements on the x-axis at the same time 

<img src="pictures/inspiration_slicer.png" height="400" border="1px solid #ddd"/>