Updated the tutorial on data preparation and DDG

_docs/01_getting_started.md

@@ -60,7 +60,10 @@ Click the help icon in the top right corner to reveal links to several resources
 
 <h2 id="preparing-data">Preparing Data</h2>
 
-Charticulator supports datasets in <a href="https://en.wikipedia.org/wiki/Comma-separated_values">**CSV**</a> format and expects that **the first row contains the column names**. Charticulator is disigned to supports mainly the <a href="https://en.wikipedia.org/wiki/Wide_and_narrow_data">"long format" or "narrow format"</a> of a data table. For example, the table below shows (in long form) the maket share of mobile operating systems from one year to the next.
+Charticulator supports datasets in <a href="https://en.wikipedia.org/wiki/Comma-separated_values">**CSV**</a> format and expects that **the first row contains the column names**. Charticulator is disigned to support both the <a href="https://en.wikipedia.org/wiki/Wide_and_narrow_data">wide and narrow</a> format of a data table. 
+
+<h3>Narrow</h3>
+The table below shows (in narrow form) the maket share of mobile operating systems from one year to the next.
 
 <table>
 <thead>
@@ -72,19 +75,35 @@ Charticulator supports datasets in <a href="https://en.wikipedia.org/wiki/Comma-
 <tr><td>2009</td><td>Symbian</td><td>2.5</td></tr>
 <tr><td>2010</td><td>iOS</td><td>40.77</td></tr>
 <tr><td>2010</td><td>Android</td><td>16.97</td></tr>
-<tr><td>2010</td><td>Symbian</td><td>1.19</td></tr>
+<tr><td>...</td><td>...</td><td>...</td></tr>
+</tbody>
+</table>
+
+
+<h3>Wide</h3>
+The table below shows (in wide form) the world population by gender and age. Becuase a glyph represents one data row, you need to use a <a href="{{ '/docs/user-interaction.html#data-driven-guides' | relativize_url }}">data-driven guide</a> to position multiple marks based on numerical data values in a glyph.
+
+<table>
+<thead>
+<tr><th>Age</th><th>Female</th><th>Male</th></tr>
+</thead>
+<tbody>
+<tr><td>0-4</td><td>327.601</td><td>350.321</td></tr>
+<tr><td>5-9</td><td>316.714</td><td>338.892</td></tr>
+<tr><td>10-14</td><td>301.011</td><td>322.363</td></tr>
+<tr><td>15-19</td><td>288.482</td><td>308.333</td></tr>
+<tr><td>20-24</td><td>287.820</td><td>306.100</td></tr>
 <tr><td>...</td><td>...</td><td>...</td></tr>
 </tbody>
 </table>
 
 
 <h3>Data for Links</h3>
-
 To draw charts with the links between glyphs, you will need two data tables: one for nodes/entities and another for links/relationships between nodes. For example, to draw the arc chart below (character co-ocurrence in Les Miserables), you will need one table for the characters and another for their co-occurrences.
 
 {% include image.html src="/images/gallery/les_miserables_linear.png" alt="Les Miserables Chart" %}
 
-Charticulator expects the nodes table to contain an `id` column and the links table to contain `source_id` and `target_id` columns, which refer to the `id`s in the nodes table, as illustrated below.
+Charticulator expects the nodes table to contain an `id` column and the links table to contain `source_id` and `target_id` columns, which refer to the `id`s in the nodes table, as illustrated below. Note that these column names are **case sensitive**.
 
 <table>
 <thead>
@@ -111,6 +130,7 @@ Charticulator expects the nodes table to contain an `id` column and the links ta
 </tbody>
 </table>
 
+
 <h2 id="loading-data">Loading Data</h2>
 
 When you launch Charticulator, it automatically invokes the "New" chart command. Because you need to load data in order to create a chart, the New chart panel lets you select data files. You can click the button or drag a CSV file into the button area to open the data file. 

_docs/02_user_interaction.md

@@ -21,18 +21,15 @@ Charticulator supports five types of marks: a Shape, a Symbol, a Line, a Text, a
 
 {% include image.html src="/images/docs/marks-toolbar.png" alt="Marks Toolbar" width="400px" center="1" %}
 
-Charticulator now supports three types of shapes: rectangle, oval, and triangle. You can change the shape type from the *Attributes Panel*. ({% include videocallout.html src="/videos/tutorials/tutorial7.mp4" timeRange="20.45,22.09" openTutorial="tutorial7" %})
+Charticulator supports three types of shapes: rectangle, oval, and triangle, as well as seven types of symbols: a circle, a cross, a diamond, a square, a star, a triangle, and a wye. You can change the shape type and symbol type from the *Attributes Panel*. ({% include videocallout.html src="/videos/tutorials/tutorial7.mp4" timeRange="20.45,22.09" openTutorial="tutorial7" %})
 
-{% include image.html src="/images/docs/shapes.png" alt="Shapes" width="400px" center="1" %}
+{% include image.html src="/images/docs/shapes-symbols.png" alt="Shapes" width="700px" center="1" %}
 
 To place the mark at a specific location, you can click the mark to activate it and click or drag within the *Glyph Editor*, depending on the mark type. ({% include videocallout.html src="/videos/tutorials/tutorial3.mp4" timeRange="18.00,21.09" openTutorial="tutorial3" %})
 
 Guides can be added to a glyph from the *Toolbar* via the same interaction. ({% include videocallout.html src="/videos/tutorials/tutorial5.mp4" timeRange="13.00,14.99" openTutorial="tutorial5" %})
 
 
-<h3>Changing a Symbol</h3>
-Charticulator supports seven types of symbols: a circle, a cross, a diamond, a square, a star, a triangle, and a wye. You can change the symbol type **after** you added the symbol mark to the *Glyph Editor*.
-{% include image.html src="/images/docs/symbols.png" alt="Makrs and Symbols" width="200px" center="1" %}
 
 
 <h3>Binding Data</h3>
@@ -51,7 +48,7 @@ You can specify the layout relationship between two objects using anchors and/or
 To reuse a chart design in Power BI, it is crucial to anchor visual elements to appropriate guides (for both directions). Each of the four corners for the default plot segment is anchored to the intersection of two default guides. When you add additional plot segment or adjust the existing one, do not forget to anchor their four corners to the intersection of two guides.
 
 
-<h3>Creaing a Guide</h3>
+<h3>Creating a Guide</h3>
 You can create your own guides to facilitate the alignment of elements. To create a guide, click the desired guide (horizontal or vertical) in the *Toolbar* to activate it; subsequently clicking on the *Glyph Editor* or *Chart Canvas* will add the new guide.
 
 {% include image.html src="/images/docs/new-guide.png" width="400px" alt="New Guide" center="true" %}
@@ -78,7 +75,7 @@ For the image field of the icon mark, you can assign an image for each unique da
 <h4>Adding a legend</h4>{: style="color: darkblue; line-height: 0pt;" }
 Legends visualize the scales used in a chart. Charticulator currently uses a predefined legend for each scale type: color legend for categorical data; color legend for numerical data; and range legend for numerical data. You can add a lenged to the chart by clicking on the "Add Legend" button from a scale view. ({% include videocallout.html src="/videos/tutorials/tutorial4.mp4" timeRange="13.27,14.90" openTutorial="tutorial4" %})
 
-As for categorical data, you can create a scale and a corresponding legend in two ways. As described above, when you bind a data column to a visual properly, Charticulator automatically creates a scale using data values from the column and allows you to add its legend to the chart. In addition, you can a scale and a corresponding legend using data column names: in this case, the legend is automatically added to the canvas. ({% include videocallout.html src="/videos/tutorials/tutorial12.mp4" timeRange="0.55,5.30" openTutorial="tutorial12" %}) You can edit the color mapping by toggling a scale view from the *Attributes Panel*. ({% include videocallout.html src="/videos/tutorials/tutorial12.mp4" timeRange="6.55,16.05" openTutorial="tutorial12" %})
+As for categorical data, you can create a scale and a corresponding legend in two ways. As described above, when you bind a data column to a visual property, Charticulator automatically creates a scale using data values from the column and allows you to add its legend to the chart. In addition, you can a scale and a corresponding legend using data column names: in this case, the legend is automatically added to the canvas. ({% include videocallout.html src="/videos/tutorials/tutorial12.mp4" timeRange="0.55,5.30" openTutorial="tutorial12" %}) You can edit the color mapping by toggling a scale view from the *Attributes Panel*. ({% include videocallout.html src="/videos/tutorials/tutorial12.mp4" timeRange="6.55,16.05" openTutorial="tutorial12" %})
 
 {% include image.html src="/images/docs/legend-column-names.png" alt="Creating a Legend using Column Names" width="700px" center="1" %}
 
@@ -100,7 +97,7 @@ For numberical variables, you can specify a simple boolean query (e.g., Count >
 
 
 <h3>Sorting an Axis</h3>
-Charticualtor allows you to chanage the order of the X and Y axes labels. You can manually reorder them with a drag-and-drop interaction. You can also reverse the current order of the labels.
+As Charticulator by default handles the data in the order they appear in the table, the default order of the axes labels is determined by how the data is ordered in the table. Therefore, Charticualtor allows you to chanage the order of the X and Y axes labels. You can either automatically order them by data values or manually reorder them with a drag-and-drop interaction. In addition, you can reverse the current order of the labels, or reset to the default order.
 
 {% include image.html src="/images/docs/axis-sort.png" alt="Axis Sort" width="400px" center="true" %}
 
@@ -129,9 +126,13 @@ Charticulator suppors three coordinate systems: Cartesian, Polar, and Custom cur
 
 <h2 id="data-driven-guides">Data-Driven Guides</h2>
 
-A <a href="http://ddg.namwkim.org/" target="_blank">data-driven guide</a> provides data-driven anchor points from data columns sharing the same numerical unit (e.g., min and max temperature values). A Data-driven guide can be displayed as an axis, though to avoid duplicated axes, Charticulator shows only the first instance. To learn more about data-driven guides, please refer to <a href="http://ddg.namwkim.org/" target="_blank">the work of Kim et al (2016)</a>. ({% include videocallout.html src="/videos/tutorials/tutorial5.mp4" timeRange="0.00,8.09" openTutorial="tutorial5" %})
+A <a href="http://ddg.namwkim.org/" target="_blank">data-driven guide</a> provides data-driven anchor points from data columns sharing the same numerical unit (e.g., min and max temperature values). ({% include videocallout.html src="/videos/tutorials/tutorial5.mp4" timeRange="0.00,8.09" openTutorial="tutorial5" %}) It can be displayed as an axis, though to avoid duplicated axes, Charticulator shows only the first instance. Glyph elements can be snapped to these anchor points by adding layout constraints (e.g., placing the circle mark at the anchor point of the “Avg. Temperature” data column). ({% include videocallout.html src="/videos/tutorials/tutorial5.mp4" timeRange="35.07,45.09" openTutorial="tutorial5" %})
 
-Glyph elements can be snapped to these anchor points by adding layout constraints (e.g., placing the circle mark at the anchor point of the “Avg. Temperature” data column). ({% include videocallout.html src="/videos/tutorials/tutorial5.mp4" timeRange="35.07,45.09" openTutorial="tutorial5" %})
+A glyph can have multiple data-driven guides. For example, a diverging bar chart has the mark for one data column pointing right or up, and the mark for another data column pointing in the opposite direction (i.e., left or down, respectively). You can create a diverging bar chart by adding two data-driven guides, facing each other
+
+{% include image.html src="/images/docs/data-driven-guides.png" alt="Data-Driven Guides" width="450px" center="true" %}
+
+To learn more about data-driven guides, please refer to <a href="http://ddg.namwkim.org/" target="_blank">the work of Kim et al. (2016)</a>.
 
 
 <h2 id="text-formatting">Text Formatting</h2>

_gallery/world_greenhouse_gas_emissions.md

@@ -8,8 +8,8 @@ dataset: world_greenhouse_gas_emissions
 order: 2
 ---
 
-A [Sankey chart](https://en.wikipedia.org/wiki/Sankey_diagram) displaying the percentage of greenhouse gas emissions from different sectors and end-user areas.
-The flow begins from the left, where we characterize the sources as either "Energy" or "Non-energy". The second column indicates the industrial sector, the third column indicates end-user areas, and the last column indicates the final emissions in the form of different types of greenhouse gas. For facilitate comparison, the emission values are all converted to CO<sub>2</sub> equivalents.
+A [Parallel Sets](https://datavizcatalogue.com/methods/parallel_sets.html) displaying the percentage of greenhouse gas emissions from different sectors and end-user areas.
+In the first column, the sources are characterized either as "Energy" or as "Non-energy." The second column indicates the industrial sector, the third column indicates end-user areas, and the last column indicates the final emissions in the form of different types of greenhouse gas. To facilitate comparison, the emission values are all converted to CO<sub>2</sub> equivalents.
 
 Based on a [chart](http://www.wri.org/resources/charts-graphs/world-greenhouse-gas-emissions-2005) produced by the [World Resources Institute](http://www.wri.org/).
 

about.md

@@ -65,19 +65,15 @@ Charticulator is a project from [Microsoft Research](https://www.microsoft.com/e
 
 <div class="author-list">
     <div class="author-list-item">
-        <a href="https://donghaoren.org/">
+        <a href="https://www.linkedin.com/in/donghaoren/">
             <div class="el-image"><img src="{{ '/images/authors/author_donghao.jpg' | relativize_url }}" alt="Donghao Ren" /></div>
             <div class="el-name">Donghao Ren</div>
-            <div class="el-affiliation"><strike>UCSB</strike></div>
-            <div class="el-affiliation">Apple</div>
         </a>
     </div>
     <div class="author-list-item">
-        <a href="https://mattbrehmer.github.io/">
+        <a href="https://www.linkedin.com/in/matthewbrehmer/">
             <div class="el-image"><img src="{{ '/images/authors/author_matt.jpg' | relativize_url }}" alt="Matthew Brehmer" /></div>
             <div class="el-name">Matthew Brehmer</div>
-            <div class="el-affiliation"><strike>Microsoft Research</strike></div>
-            <div class="el-affiliation">Tableau Research</div>
         </a>
     </div>
     <div class="author-list-item">