> For the complete documentation index, see [llms.txt](https://measures.gitbook.io/multiple-measures/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://measures.gitbook.io/multiple-measures/progress/untitled.md).

# Week 2

Interface design.

## Meeting

* when stuck, maybe try coding and see what we get from data and how we could improve
* think about what could be interesting and make some sketch
* for the calculator, use some examples to think how to develop the interface

## Issue

I think I am putting so many interactions together and lack a solid innovative point.

## Design Walking through

### Tasks

* Provide an overview to the dynamic process
  * hints to discover a "turning point".
* Help to gain insights from the dynamic network.
  * support comparisons between different periods

### Problems & Approaches

* How to explore the measures?
  * (simple) a line chart list
    * thumbnail: area chart
    * (click to expand) detail: line chart with hint dots on sudden changes
  * (for hd feature, maybe consider later) a connected scatter plot
* How to assure the aggregation level?
  * provide daily, weekly, monthly, annually, ... aggregation (checkbox)
    * a slider for user specified period length
  * highlight breakpoints, local minimum/maximum
  * drop unnecessary hints
* How to compare one graph in different periods or two graphs?
  * align the node link diagram and timeline together.

## Pipeline

{% tabs %}
{% tab title="Basic" %}

1. Data selection (upload, choose from existed ones)
2. View timeline

   compare measures, view hints
3. Brush interested places

   it may be a dynamic process to see how the graph grows
4. View the node link diagram.
5. Iteration
6. Click on the interested node and expand another node-centered view.
   {% endtab %}

{% tab title="Enhance" %}

* Measure Configuration
  * delete
  * add new measures through calculator
* Details
  * brush/select a subgraph and view according measures
* Comparison
  * different graphs
  * different periods
    {% endtab %}

{% tab title="Node" %}

1. View the local measures of the specified node.
   * maybe show in a smaller scale
2. Highlight nodes tightly connected to the node.
   * many connections
   * similar behaviors
3. Use a connected scatter plot for comparison
   {% endtab %}
   {% endtabs %}

## Others

### Interactive Graph Calculator

* Motivation: There are several graph libraries with convenient functions for graph manipulation. However, for inexperienced users from domains like history, it remains hard for them to learn a programming language and solve problems from APIs. Based on the observation that most graph measures follow a simple scheme, typically by counting nodes satisfying certain properties, we would like to see how could we simplify the process with a user-friendly interface. And we hope to enhance the usability of an exploratory graph data analysis interface with such an interactive calculator.

#### Potential Function List

* built-in functions: well-established metrics
  * a search bar with a drop-down function list
* calculator: maybe something like a children coding block such as "[scratch](https://scratch.mit.edu/)"
  * **mask** (filter, map to a subgraph) and **grouper** (binning the graph)
    *  $$M(G)= { v, l \in G| S(v)\ is \  true \wedge K(l) \ is \ true}$$ 
      * node, link selection in multivariate graph
    * $$B(G)= \[ { M\_i(G) }]$$
      * slicing the time or grouping according to some ordinal attributes
        * may be combined with a timeline / value bar chart
      * require an aggregation further
  * **selector**
    * masked neighborhood (n-hop)
  * **unitary operator** $$f(Graph) = value$$ 
    * count
      * node, link, unique link, weighted sum, motif (created from sketch)
    * return a list of values when given a list of graphs
  * **binary operator** $$\circ  := + - \times \div \delta$$ 
    *  $$f = f\_1(G)  \circ f\_2(G) \circ ... \circ f\_n(G)$$ 
  * **aggregation operator** (based on a list of values)
    * average, extreme, standard deviance ...

#### Examples & Thoughts

Pending!

* **diameter**: the longest distance of two nodes in a graph
  * oops! distance pair is undefined!
* **clustering coefficient**
*