```javascript
let fieldList = fieldLists[index];
let dataStructure = generateDataStructure(fieldList);
let sourceFields = generateSources(fieldList, true);

// generates columns labels
generateColumnHeader("results", fieldList)

// generates URL in order to make an Ajax call
let url = generateUrl(query, index, from, size);

// defining the function formatting the response of an elasticsearch Ajax call
// into an array of results ready to be displayed by Table
let formatData = function (queryResponse) {
  let results = retrieveResults(queryResponse);
  for (let result of results) {
    let i = 0;
    for (let field of fieldList) {
      // field.name is the key where Table is going to search for the value to
      // fill the cells of one specific column
      // textDisplay() returns the value that is going to be displayed in the cell :
      // - the text correctly formatted (according to the field.properties)
      // - OR no information provided (if there is no value in the result array)
    }
    // selectNodeOfObject() returns the value of the node in the array of result
    // corresponding to string given as first argument
    result field.name = textDisplay(selectNodeOfObject(sourceFields[i], result, field.properties), field.properties, result);
    i++;
  }
  return results;
};

if (generateHeader) {
  // generates a header for the current query
  generateSearchHeader(index, queryTitle, queryTerm);
}

let table = $('#results').Table({
  "AJAX": {
    "url": url, // url on which the query is done
    cache: true, // mandatory in order to send the query without wildly added
                  // parameters
    "dataSrc": formatData // variable containing the function formatting the results
                       // in order to fill the Table
  },
  "columns": dataStructure, // specify where Table will find information associated
                           // with each fields
  });
return url;
}
```
# G.4 Bread crumbs and table editions

## G.4.1 Bread crumbs

The breadcrumbs allows the user to find his way around the front office, it indicates at which level of the site hierarchy they are located. The javascript code to generate them takes as argument the name of the current node, i.e. the name of the page, and it reconstructs the page tree structure to get there.

```javascript
1 // define an array to contain the dependence tree of the current page
2 let nodeTree = [];
3 nodeTree.push(currentNode);
4 let node = currentNode;
5
6 for (nav of nodeTree) {
7   if (navigation[nav]) { // navigation contains all the nodes associated with their parent
8     nodeTree.push(navigation[nav]);
9   }
10 }
11
12 if (! (nodeTree.length ≤ 1)) {
13   // reverse the order of the array to put the greater parent first
14   nodeTree.reverse();
15
16   // create a breadcrumb for each node of the nodeTree object
17   for (let l = 0; l < nodeTree.length; l++) {
18     node = nodeTree[l];
19     // set the pictogram image of the current node
20     let picto = "{{ asset('img/pictograms/'-'INTERFACENAME'~'.png') }}";
21     picto = picto.replace("INTERFACENAME", node);
22
23     if (properties[node] ["path"] != "") {
24       // generate a route for the current node
25       let route = Routing(generate (properties[node] ["path"]));
26     }
27
28   $(".crumbbar Icons").append(’<div class="col-md-1 picto-bundle">
29     <a href="${route}" title="${properties[node] ["hover"]}">
30       <div class="picto-background ${currentNode}">
31         <img class="picto-size"
32           src="${picto}"
33           alt="${properties[node] ["title"]}"
34         </div>
35       </a>
36     </div>
37   </pictogram>
38 </div>’);
39
40 }
41 }
```
## G.4.2 Related table editions

The relation of the edited texts and the original texts are modelled in a graph structure in order to limit aberration and loops (preventing an edition to be based on an edition that is itself based upon this edition), and to display graph visualisations for the editions. With the aim of gathering all the editions that were based on one particular original item, including the *indirect* ones (type B editions), it is necessary to use the graph structure.

DISHAS/src/TAMAS/AstroBundle/Repository/OriginalTextRepository.php

```php
1 /*
2 *лив all edited texts
3 *
4 * this method returns an array of the editions of an original item, including indirect
5 * editions (type B)
6 *
7 * @param \TAMAS\AstroBundle\Entity\OriginalText $originalText
8 * @return array
9 */
10 public functionлив all edited texts(\TAMAS\AstroBundle\Entity\OriginalText $originalText)
11 {
12     if (! $originalText)
13         return [];
14
15     $editedTextRepo = $this->getEntityManager()
16         ->getRepository(\TAMAS\AstroBundle\Entity\EditedText::class);
17
18     $dependanceTree = $editedTextRepo->getDependanceTree();
19
20     $graph = new \TAMAS\AstroBundle\DISHASToolbox\Graph\TAMASGraph();
21
22     $graph->loadJSONTree($dependanceTree);
23
24     $origNodeId = $originalText->getI d();
25
26     $originalId = 'o' . $origNodeId; // the id of the original item is preceded by "o" in the
27     graph tree
28     $original = $graph->getNode($originalId); // find the node corresponding
29     $editedTexts = $original->getAncestors(); // find the edited texts related to this node
30
31     $editions = [];
32     foreach ($editedTexts as $editedText) {
33         // fill the array with all the edited texts corresponding to the id
34         $editions[] = $editedTextRepo->findBy(['id' => str_replace("e", "", $editedText->
35             getLabel())]) [0];
36     }
37
38     return $editions;
39 }
40 }
```
<figure><img src="image_118.png" /></figure>
# Annexe H

## Introduction à la bibliothèque

### AmCharts

This page is a general introduction to the charts javascript library AmCharts in its version V4. An extensive documentation and API can be found here, demos of all the charts that can be made can be found here and tips to customize chart can be found there.

## H.1 Instantiating a chart

### H.1.1 Modules

AmCharts allows to create several kind of charts. Depending on the one you wish to create, you will need to import several modules from the library. In all cases, you will need the main module `am4core` (which should always comes first) and an other module corresponding to the type of chart : either the `am4charts` for all the *regular* charts, or `am4maps` for map visualisations.

Some kind of charts requires additional plugins like force-directed graphs (**force Directed**) or maps that need to import some geodata to display a background map (**worldLow**).

On top of that, you can import modules for setting assets like translations or themes that will define behaviors and color set of the charts.

1. <script src="https://www.amcharts.com/lib/4/core.js"></script>

2. <script src="https://www.amcharts.com/lib/4/charts.js"></script>

3. <script src="https://www.amcharts.com/lib/4/maps.js"></script>

4. <script src="https://www.amcharts.com/lib/4/geodata/worldLow.js"></script>

5. <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
### H.1.2 Creating a chart

The `create()` function is always first used to add new instances to your HTML page. It takes two arguments:

- The **tag id** of the **html** element in which is going to contain the chart (the element must already exist in your DOM, the function will not create it);

- The **type of chart**, i.e. the class reference.

```javascript
1 var chart = am4core.create("chartdiv", am4charts.XYChart);
```

#### Combining multiple charts

Is it possible to put several charts in the same **html** element. To do that you only need to create first a container in which you will create charts instances:

```javascript
1 var container = am4core.create("chartdiv", am4core Container);
```

```javascript
2 var mapChart = container.createChild(am4maps.MapChart);
```

```javascript
3 var XYChart = mapChartchartContainer.createChild(am4charts.XYChart);
```

#### Configuration : object/JSON approaches

There are two way of setting up the parameters and data for the charts : either a **JSON-based** approach, or an **object-based** approach. Object approach is more readable and less prone to bug whereas JSON approach, being fundamentally a string, can be stored in a database or load dynamically with AJAX.

The rest of this introduction will only give examples with the object approach but you can find more information here on the JSON way. Object-based only means that the chart is treated as an object whose properties we're going to change/call.

## H.2 Anatomy of a chart

A chart is mainly composed of two elements : the **"frame"** and the **"shapes"** representing the data :

- The *frame* is, in most cases, composed of two *axes* defining the structure of the chart.

- The data can be displayed in different *shapes* depending on the type of chart : columns, bubbles, points, line, etc. Whatever its shape, data is an instance of one or several *series*.
## H.2.1 Axes

Axes are the structure of the chart; they are specially fundamental to XYChart and some other type of charts. The axes determines how the data is going to be spread out through out the chart.

The axes can be of mainly two types :

- **Category axis**: used to position data items on text-based categories. For example, for a dataset detailing the number of folio per manuscript, the category axis would represent all the manuscripts.

- **Value axis**: used to position data items on a numeric scale. In our previous example, it would represent the total number of folios.

- Other types of axes :

- **Duration axis**

- **Date axis**

And, in the case of XYCharts, axes can be horizontal – or circular in case of some charts like radar – (`xAxes`) or vertical (`yAxes`); any of them can be a category axis or value axis, and both of them can be of the same type.

### Creating axes

To associate axis to a chart, you need to push them to your existing chart like so :

1. `var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());`

2. `var categoryAxis = chart.xAxes.push(new am4charts.categoryAxis());`

### Configuring axes

Most of the appearance parameters and settings can be configured directly on the axis variable or with the ```renderer` variable :

1. // define a title for the value axis

2. `valueAxis.title.text` = "Number of folios";

3. // display the axis one the opposite side than the default one

4. `categoryAxis Blender`. `opposite` = true;

5. // to set the background grid of the value axis to be transparent

6. `valueAxis Blender`. `grid.template.strokeOpacity` = 0;

7. // set the font size of the label from the category axis to 20

8. `categoryAxis Blender`. `labels.template font Size` = 20;
## H.2.2 Series

A series is a collection of similar, logically grouped data points, it gathers the configuration defining how the data is going to be displayed.

One series aggregates data you want to have the same properties. Sometimes one series will be enough to display gigantic datasets, but sometimes you will need to provide each data in its series in order to specify finely the settings for each one in particular. A series, in a column chart for instance, can be either — depending on what you want to show — a group of columns, a single column, a group of cells through out the columns or a single cell.

Each type of chart allows only certain kind of series: a `pieSeries` on a `mapChart` will never be displayed.

Series have two main purposes: - Setting appearance and behavior of a collection of chart items; - Binding individual chart items to source data.

### Creating series

To create a new series for your chart, you must proceed as for the axes:

1. `var series = chart series.push(new am4charts.columnSeries());`

### Configuring series

You can set configuration for a series either directly on the series variable or through its `template` property (more on templates later on):

1. `// setting width of the stroke`

2. `series.strokeWidth = 0;`

3. `// setting text appearing when hovering on columns`

4. `series.columns.template.tooltipText = "Number of folios in manuscript";`

## H.2.3 Additional components

Inside a chart, you can add several type components like **SVG shapes**, **labels**, etc. To create them, you need to push them in your chart container, then you can configure them as you like:

1. `var rectangle = chart chartContainer.createChild(am4core CONTAINER);`

2. `var rectLabel = rectangle.createChild(am4core Label);`
## H.3 Data

### H.3.1 Data structure

All data, in order to be used by your chart, need it to be formatted as an **array of objects** :

```javascript
1 var msData = [
2 {
3   "ms": "Latin 10264",
4   "folios": 3
5 },{
6   "ms": "Bav. Lat. 1374",
7   "folios": 14
8 }
9 ]
```

### H.3.2 Binding data

In order to make your chart use your data, you first need to associate your array to the data property of your chart :

```javascript
1 chart.data = msData;
```

With this line, when we will set data properties to our chart series, it will know automatically where to find the information it needs. You can also bind a dataset to a specific series for complex layouts.

### H.3.3 Using data fields

Now, the axes and the series that have been earlier create needs to be associated with the data from our array. The `dataFields` property is a simple object that binds specific field in series, to a data field in data objects : using `dataField` the series, as well as the category axis, will know what key in the dataset they are binded to.

```javascript
1 series.dataFields.categoryX = "ms";
2 series.dataFields.valueY = "folios";
3 categoryAxis.dataFields.category = "ms";
```

What those lines means is : for each object in the array of data, the numerical value for the series will be found to the "folios" key and the string-based value will be found to the "ms" key. The value axis will generate itself according to the maximal value associated with the series to display, but the category axis needs to know which labels to show.
**NB** : for each kind of chart, the syntax might vary. You will find more details on that in the numerous examples in the demos.

### H.3.4 Using properties fields

The `dataFields` property only holds information that is needed for the chart to be displayed, additional information can be binded to the chart to customize it further : `propertyFields` are the way to tie chart element's properties to data.

Let's say some fields were added to your dataset like that :

```javascript
1 var msData = [
2 {
3   "ms": "Latin 10264",
4   "folios": 3,
5   "color": "#fcba03",
6   "url": "https://archivesetmanuscrits.bnf.fr/ark:/12148/cc71999k"
7 },{
8   "ms": "Bav. Lat. 1374",
9   "folios": 14,
10   "color": "#fc3103",
11   "url": "https://digi.ub.uni-heidelberg.de/diglit/bav_pal_lat_1374"
12 }
13 ];
```

Pretty much any part of your chart can be customize using information from your dataset with the `propertiesField` property :

```javascript
1 // make column labels a link
2 categoryAxis labels.template propertyFields.url = "url";
3 // colour the columns
4 series.columns.template propertyFields.fill = "color";
```

### Using dummy data

You can bind any data of your choice to a chart item using its `dummyData` property : it is a sort of storage container to put anything you want in it, without affecting the overall behavior of your chart.

It can be very useful when you will need to customize your chart creating tailored function using event listeners or adapters : it can become handy if you are dynamically generating data you want to access later on, for instance to bind behavior for two distinct events.
# H.4 Appearance configuration

## H.4.1 Templates

Practically all of the charts components have a `template` property : it is some kind of pattern for the layout and behavior of specific parts of your chart. Using templates, you can, for example, set that all filling colors of columns to be half transparent or for all axis labels to become green when clicked on :

1. // Half transparency of the columns
2. series.columns.template.fillOpacity = 0.5;
3. // Green labels
4. valueAxis labels.template.events.on("hit", function(ev) {
5. valueAxis labels.template.fill = "green";
6. });

Templates can be modified dynamically using DOM events, which is not the case with data values (associated with `dataFields`) : to change the values your chart is using, you will need either to switch datasets or use incremental loading).

AmCharts is an incredibly customisable library : if you would like to change any aspects of your chart, by browsing through the properties of the element you want to modify in the API, you will surely find something to suit your desires.

## H.4.2 Colors, percentage, etc.

To unlock all methods applicable to colors and percentages, you will need to use special Amcharts functions. The `color()` method takes only one argument of color and transform it into an object that can be later on modified. The same is true for `percent()` method. To define the color or the percentage of a property :

1. rectangle.width = am4core_percent(50);
2. rectangle-background.fill = am4core.color("orange");

### Heat rules

Heat rules defines a property of a chart item that will be bind to a numeric value. Any property is usable, as long as you can define a min and max state like so :

1. // The higher the value, the wider the column
2. series.heatRules.push({
3. target: series.columns.template,
4. property: "width",
5. min: 80,
6. max: 160
7 });

### H.4.3 States

Any part of the chart can be associated with a **state** object that holds properties defining how the element will behave when on this particular state. States define alternative properties that will override “normal state” properties on certain occasions.

As many other objects in AmCharts, defining state is a two steps process : first **creating** the state for a specific element, then **configurating** it :

1. `var hoverState = series.columns.template states.create("hover");`

2. `hoverState.properties.fillOpacity = 0.9;`

### H.4.4 Formatting text in labels and tooltips

#### Font styling

Text styling options are always contained in **[square brackets]**. It works like HTML tag so each opening bracket should be closed with a closing bracket (/[/]), but an other opening bracket will act as a closing one for one opened earlier.

Some styling have an already implemented syntax in AmCharts, but you can use any CSS property :

1. `rectLabel.text = "[bold]Work diffusion[/] :\n the example of the [font-style: italic]Table Magne[/]";

#### Accessing data values

Is it possible to display data in labels with the `{curly brackets}` notation. Depending on what you write in your brackets, the parser (or the “formatter” to use AmCharts taxonomy) will try to find matching data in your dataset. You can either use the name of a key in your dataset, or the class reference of the data :

1. `series.columns.template tooltipText = "Numbers of [{color}]folios[/] in {ms} : \n {valueY}";

You can even perform some data computing on your numeric values with the formatter using modifiers such as `sum` or `count`.
### H.5.3 Legends

A legend, when created, will automatically display the series that are associated to your chart. When clicking on the items of the legend, corresponding series disappear, giving possibilities to vary the visualization to the user.

In the case of our manuscript chart, adding a legend is not very insightful, because our data is contained in an unique series representing all the columns, which colors were assigned individually. If we wanted to display a matching legend, we would need to build a custom legend.

```javascript
1 chart.legend = new am4charts.Legend();
```

### H.5.4 Events listeners

Event listeners allows to bind custom functions to any action perform on a chart element. Each part of the chart has a list of events tied to variables that can be accessed and modified when the event is triggered.

Two kind of functions can be associated to the events :

- `on()` : any time the event happens;

- `once()` : the first time the event happens.

```javascript
1 chart cursor.events on("selectended", function(ev) {
2   var range = ev.target.xRange;
3   var axis = ev.target chart.xAxes.getIndex(0);
4   var from = axis.getPositionLabel(axis.toAxisPosition(range.start));
5   var to = axis.getPositionLabel(axis.toAxisPosition(range.end));
6   alert("Selected from " + from + " to " + to);
7 });
```

The syntax for setting custom functions is always the same :

`{chartName}.{elementName}.events.[on/once]("{Name}", function(args) { ... });`

Some events are universal to any type of element, as `hit`, when the user is clicking or tapping on a touch screen.

## H.6 Demos

### H.6.1 Our manuscript chart

Here is the chart that was made during this introduction : Number of folios in manuscript.
<figure><img src="image_119.png" /><figcaption>FIGURE H.1 – Chart made during the AmCharts tutorial</figcaption></figure>

H.6.2 Examples in DISHAS

— Primary source : dynamic bar chart

— Historical sources : historical map
<figure><img src="image_120.png" /></figure>
## Liste des acronymes

ALFA *Alfonsine Astronomy*. 5–9, 43

API *Application Programming Interface*. 7, 42, 43, 77, 90, 98

Ajax *Asynchronous JavaScript and XML*. 97, 101

CHAMA *Commission for the History of Ancient and Medieval Astronomy*. 3

CINES Centre Informatique National de l'Enseignement Supérieur. 75, 76

CMS *Content Management System*. 30

CRUD *Create Read Update Delete*. 77

DH *Digital Humanities*. 87, 89, 90, 107

DISHAS *Digital Information System for the History of Astral Sciences*. xix, xx, 3–10, 13, 17–19, 21–23, 25, 26, 28–32, 34, 35, 40–47, 49, 53–56, 58–60, 62, 63, 66, 68, 70, 74–79, 81, 82, 85, 87, 89, 90, 93–96, 98, 99, 102, 103, 105, 106, 110, 111, 113, 115, 116, 199

DOM *Document Object Model*. 106

DTI *DISHAS Table Interface*. 35, 66, 67, 90

ERC *European Research Council*. 7, 8, 43

FAIR *Findable Accessible Interoperable Reusable*. xviii, xx, 8, 43, 44, 75, 116

FRBR *Functional Requirements for Bibliographic Records*. 22

HAMSI *History of Astronomical Sciences in India*. 5, 6, 9

IIIF *International Image Interoperability Framework*. 8

ISNI *International Standard Name Identifier*. 33, 42

JSON *JavaScript Object Notation*. 31, 35, 42, 77, 78, 98, 100, 104

MVC *Model-View-Controller*. 93–95

NOSQL *Not Only SQL*. 98

ORM *Object-Relational Mapping*. 95, 96, 99, 101, 102

PAL *Ptolemaeus Arabus et Latinus*. 5, 9

RDF *Resource Description Framework*. 7, 10, 76, 98
RGPD Règlement Général sur la Protection des Données. 30, 44

SEO *Search Engine Optimization*. 44

SPARQL *SPARQL Protocol and RDF Query Language*. 76

SQL *Structured Query Language*. 32, 102

SVG *Scalable Vector Graphics*. 106

SYRTE Systèmes de Référence Temps-Espace. 7

UX *User eXperience*. 44, 47, 48, 199

VIAF *Virtual International Authority File*. 33, 42

XML *eXtensible Markup Language*. 31, 87, 98, 104
Table des figures

<table><tr><td>2.1</td><td>BnF, Département des manuscrits – Latin 14481, f. 81v – Équation de la Lune</td><td>18</td></tr><tr><td>3.1</td><td>Modèle conceptuel de la base de données de DISHAS</td><td>22</td></tr><tr><td>3.2</td><td>Visualisation de l'architecture des données de paramètres astronomiques dans la base</td><td>26</td></tr><tr><td>3.3</td><td>Exemple de structuration de modèles mathématiques dans la structure de données</td><td>28</td></tr><tr><td>4.1</td><td>Schéma inspiré du diagramme de l'UX design conçu par J.J. Garrett</td><td>48</td></tr><tr><td>4.2</td><td>Schéma inspiré du livre The Elements of User Experience</td><td>49</td></tr><tr><td>4.3</td><td>Diagramme d'architecture de l'interface publique</td><td>50</td></tr><tr><td>5.1</td><td>Organigramme réalisé avec Google charts lors de phase d'élaboration des interfaces</td><td>57</td></tr><tr><td>5.2</td><td>Diagramme en colonnes conçu avec AmCharts pour les notices d'œuvres</td><td>57</td></tr><tr><td>5.3</td><td>Pictogrammes élaborés pour les principales entités de la plateforme de DISHAS</td><td>59</td></tr><tr><td>5.4</td><td>Exemple de page de notice pour l'œuvre de la Tabule Magne</td><td>60</td></tr><tr><td>6.1</td><td>Barre latérale des métadonnées de l'œuvre de la Tabule Magne</td><td>65</td></tr><tr><td>6.2</td><td>Visualisation du nombre de folios accumulé dans une source primaire</td><td>69</td></tr><tr><td>6.3</td><td>Visualisation de la disposition des folios dans une source primaire</td><td>70</td></tr><tr><td>6.4</td><td>Carte temporelle de la page Historical navigation</td><td>73</td></tr><tr><td>6.5</td><td>Sélection d'une période sur la carte temporelle</td><td>74</td></tr><tr><td>7.1</td><td>Interaction entre la base de données de DISHAS, l'API et ElasticSearch</td><td>77</td></tr><tr><td>7.2</td><td>Différence de syntaxe entre Javascript simple et jQuery</td><td>79</td></tr><tr><td>7.3</td><td>Exemple de commentaires de code intralinéaires</td><td>80</td></tr><tr><td>9.1</td><td>Fonctionnement simplifié de l'architecture logicielle MVC</td><td>93</td></tr><tr><td>9.2</td><td>Étapes pour l'affichage d'une donnée de la base au sein d'une page Web</td><td>95</td></tr><tr><td>9.3</td><td>Formulation dans le langage de requête d'ElasticSearch</td><td>100</td></tr><tr><td>9.4</td><td>Formulation dans le langage de requête du client PHP Elastica</td><td>100</td></tr></table>
<table>
  <tbody>
    <tr>
      <td>9.5</td>
      <td>Processus de requête asynchrone à ElasticSearch pour la page de recherche</td>
      <td>101</td>
    </tr>
    <tr>
      <td>10.1</td>
      <td>Logo de la bibliothèque JavaScript AmCharts</td>
      <td>106</td>
    </tr>
    <tr>
      <td>10.2</td>
      <td>Évolution de la visualisation pour la page de notice de sources primaires</td>
      <td>108</td>
    </tr>
    <tr>
      <td>10.3</td>
      <td>Conséquences visuelles du changement d'échelle d'une visualisation</td>
      <td>112</td>
    </tr>
    <tr>
      <td>A.1</td>
      <td>Schéma de la base de données réalisé avec MySQL Workbench</td>
      <td>120</td>
    </tr>
    <tr>
      <td>C.1</td>
      <td>Page d'accueil de l'interface administrateur</td>
      <td>129</td>
    </tr>
    <tr>
      <td>C.2</td>
      <td>Page de liste des enregistrements des éditions de tables astronomiques</td>
      <td>130</td>
    </tr>
    <tr>
      <td>C.3</td>
      <td>Page de liste des enregistrements des original items</td>
      <td>130</td>
    </tr>
    <tr>
      <td>C.4</td>
      <td>Interface de saisie numérique de tables</td>
      <td>131</td>
    </tr>
    <tr>
      <td>G.1</td>
      <td>Column chart for work visualisation</td>
      <td>168</td>
    </tr>
    <tr>
      <td>G.2</td>
      <td>Bar chart for primary source visualisation : original items stacked</td>
      <td>168</td>
    </tr>
    <tr>
      <td>G.3</td>
      <td>Bar chart for primary source visualisation : original items spread out</td>
      <td>169</td>
    </tr>
    <tr>
      <td>G.4</td>
      <td>Map for historical navigation</td>
      <td>169</td>
    </tr>
    <tr>
      <td>G.5</td>
      <td>Metadata display in the sidebar</td>
      <td>172</td>
    </tr>
    <tr>
      <td>G.6</td>
      <td>Pie chart at the bottom of the sidebar</td>
      <td>175</td>
    </tr>
    <tr>
      <td>H.1</td>
      <td>Chart made during the AmCharts tutorial</td>
      <td>195</td>
    </tr>
  </tbody>
</table>
# Table des matières

Résumé iii

Remerciements v

Introduction xvii

## I Production, nature et méthode d'acquisition de la donnée 1

### 1 Le projet DISHAS 3

1.1 Présentation du projet 3

1.1.1 Objectifs du projet 3

1.1.2 Collaboration au sein du projet 5

1.2 Projets de recherche en histoire de l'astronomie 7

1.2.1 Le projet ALFA 7

1.2.2 Autres projets : description des ressources en ligne 9

### 2 Corpus de recherche 13

2.1 Bornes historiques du corpus 13

2.1.1 Ptolémée et l'Almageste 13

2.1.2 Propagation du modèle ptoléméen 14

2.2 Nature documentaire du corpus 16

2.2.1 Les sources primaires astronomiques 16

2.2.2 Les paramètres 18

### 3 Numérisation et accueil de la donnée 21

3.1 Modélisation de la donnée 21

3.1.1 Les sources historiques 23

3.1.2 Structuration des données d'édition 24

3.1.3 Développements futurs de la base de donnée 28

3.2 Données de gestion et encodage de l'information 29

3.2.1 Données structurelles 29
<table><tbody><tr><td>3.2.2</td><td>Encodage et typologie de la donnée</td><td>30</td></tr><tr><td>3.3</td><td>Saisie de la donnée</td><td>32</td></tr><tr><td>3.3.1</td><td>Interface administrateur</td><td>32</td></tr><tr><td>3.3.2</td><td>Saisie assistée de tables astronomiques : présentation de DTI</td><td>34</td></tr><tr><td colspan="2">II Modalités d'exposition de la donnée</td><td>37</td></tr><tr><td>4</td><td>Analyse des besoins</td><td>39</td></tr><tr><td>4.1</td><td>Définition des publics</td><td>39</td></tr><tr><td>4.1.1</td><td>Chercheurs</td><td>39</td></tr><tr><td>4.1.2</td><td>Non-spécialistes</td><td>41</td></tr><tr><td>4.1.3</td><td>Ingénieurs numériques</td><td>42</td></tr><tr><td>4.2</td><td>Enjeux liés à la donnée</td><td>43</td></tr><tr><td>4.2.1</td><td>Contraintes qualitatives</td><td>43</td></tr><tr><td>4.2.2</td><td>Spécificités des données de DISHAS</td><td>44</td></tr><tr><td>4.3</td><td>Constitution d'une interface publique</td><td>46</td></tr><tr><td>4.3.1</td><td>Objectifs d'une interface publique</td><td>46</td></tr><tr><td>4.3.2</td><td>Notions d'expérience utilisateur</td><td>47</td></tr><tr><td>4.3.3</td><td>Constitution d'un parcours de navigation</td><td>48</td></tr><tr><td>5</td><td>Médiation pour les publics non-spécialistes</td><td>53</td></tr><tr><td>5.1</td><td>Garantir l'ouverture à des publics non-spécialistes</td><td>53</td></tr><tr><td>5.1.1</td><td>Organisation de l'information comme vecteur de compréhension</td><td>53</td></tr><tr><td>5.1.2</td><td>Nécessité du contenu éditorialisé</td><td>55</td></tr><tr><td>5.2</td><td>Attractivité des contenus</td><td>58</td></tr><tr><td>5.2.1</td><td>Cohérence des interfaces</td><td>58</td></tr><tr><td>5.2.2</td><td>Intégration de modules interactifs</td><td>60</td></tr><tr><td>6</td><td>Participation au travail de recherche</td><td>63</td></tr><tr><td>6.1</td><td>Décloisonnement des corpus spécialisés</td><td>64</td></tr><tr><td>6.1.1</td><td>Enrichir les données par l'interconnexion</td><td>64</td></tr><tr><td>6.1.2</td><td>Constitution d'une interface spécialisée : le cas des éditions de tables</td><td>66</td></tr><tr><td>6.2</td><td>Analyse par la visualisation</td><td>68</td></tr><tr><td>6.2.1</td><td>Des manuscrits composites : montrer l'agencement d'un source primaire</td><td>68</td></tr><tr><td>6.2.2</td><td>Représenter un milieu intellectuel : le cas de la carte historique</td><td>70</td></tr><tr><td>7</td><td>Assurer la réutilisation du corpus numérique</td><td>75</td></tr><tr><td>7.1</td><td>Accessibilité des données brutes</td><td>75</td></tr><tr><td>7.1.1</td><td>Modalités d'accès à la donnée</td><td>75</td></tr></tbody></table>
<table><tr><td>7.1.2</td><td>Fonctionnalités implémentées dans l'interface publique</td><td>78</td></tr><tr><td>7.2</td><td>Exposer les méthodes : documentation et maintien de code</td><td>78</td></tr><tr><td>7.2.1</td><td>Lisibilité et documentation</td><td>79</td></tr><tr><td>7.2.2</td><td>Gestion de bugs</td><td>80</td></tr></table>

# III Traitement technique de la donnée et management des interactions 83

## 8 Gestion de projet 85

<table><tr><td>8.1</td><td>Dialogue entre recherche et ingénierie</td><td>85</td></tr><tr><td>8.1.1</td><td>Coopération dans le domaine des humanités numériques</td><td>85</td></tr><tr><td>8.1.2</td><td>Processus de conception des interfaces</td><td>87</td></tr><tr><td>8.2</td><td>Organisation du travail intra-équipe</td><td>89</td></tr><tr><td>8.2.1</td><td>Instruments de gestion du travail</td><td>89</td></tr><tr><td>8.2.2</td><td>Méthodes de développement</td><td>91</td></tr></table>

## 9 Environnement technique 93

<table><tr><td>9.1</td><td>Architecture de l'application Web</td><td>93</td></tr><tr><td>9.1.1</td><td>Modèle-Vue-Contrôleur</td><td>93</td></tr><tr><td>9.1.2</td><td>Le paradigme client/serveur</td><td>96</td></tr><tr><td>9.2</td><td>Implémentation d'ElasticSearch</td><td>98</td></tr><tr><td>9.2.1</td><td>Présentation d'ElasticSearch</td><td>98</td></tr><tr><td>9.2.2</td><td>Utilisation dans le front office</td><td>99</td></tr></table>

## 10 De la conception à l'implémentation 103

<table><tr><td>10.1</td><td>Technologies de visualisation de données</td><td>103</td></tr><tr><td>10.1.1</td><td>Choix du moyen de réalisation</td><td>103</td></tr><tr><td>10.1.2</td><td>Choix d'une bibliothèque JavaScript</td><td>105</td></tr><tr><td>10.2</td><td>Constitution d'une visualisation</td><td>107</td></tr><tr><td>10.2.1</td><td>Dialogue entre conception et réalisation</td><td>107</td></tr><tr><td>10.2.2</td><td>Anticiper les obstacles à la visualisation</td><td>108</td></tr><tr><td>10.2.3</td><td>Limites de la visualisation</td><td>111</td></tr></table>

## Conclusion 115

## Annexes 119

### A Base de données du projet 119
<table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td>B Glossaire</td><td>121</td></tr><tr><td>B.1 Astronomical object</td><td>121</td></tr><tr><td>B.2 Astronomical parameter set</td><td>121</td></tr><tr><td>B.3 Edited text</td><td>121</td></tr><tr><td>B.4 Historical actor</td><td>122</td></tr><tr><td>B.5 Intellectual author</td><td>122</td></tr><tr><td>B.6 Journal</td><td>123</td></tr><tr><td>B.7 Library</td><td>123</td></tr><tr><td>B.8 Mathematical parameter</td><td>123</td></tr><tr><td>B.9 Original text</td><td>123</td></tr><tr><td>B.10 Place</td><td>124</td></tr><tr><td>B.11 Primary source</td><td>124</td></tr><tr><td>B.12 Secondary source</td><td>124</td></tr><tr><td>B.13 Table content</td><td>125</td></tr><tr><td>B.14 Table type</td><td>125</td></tr><tr><td>B.15 Type of edition</td><td>125</td></tr><tr><td>B.16 Work</td><td>127</td></tr><tr><td>C Captures d'écrans de l'interface administrateur</td><td>129</td></tr><tr><td>D Présentation du front office</td><td>133</td></tr><tr><td>E Cahier des charges fonctionnel des visualisations pour l'interface administrateur</td><td>151</td></tr><tr><td>F Exemples de requêtes avec ElasticSearch</td><td>159</td></tr><tr><td>F.1 ElasticSearch query language</td><td>159</td></tr><tr><td>F.1.1 Anatomy of a query</td><td>159</td></tr><tr><td>F.1.2 Get all records</td><td>160</td></tr><tr><td>F.1.3 Simple matching query</td><td>160</td></tr><tr><td>F.1.4 Adding some margin of error</td><td>161</td></tr><tr><td>F.1.5 Defining the source</td><td>163</td></tr><tr><td>F.1.6 Special queries</td><td>164</td></tr><tr><td>F.1.7 Combining multiple clauses</td><td>165</td></tr><tr><td>G Description des développements réalisés pendant le stage</td><td>167</td></tr><tr><td>G.1 Data visualisation</td><td>167</td></tr><tr><td>G.1.1 Visualisation description</td><td>167</td></tr><tr><td>G.1.2 Function explanation</td><td>170</td></tr><tr><td>G.2 Sidebar of metadata</td><td>172</td></tr><tr><td>G.2.1 Data structure</td><td>172</td></tr></tbody></table>
<table><tbody><tr><td>G.2.2</td><td>Sidebar template</td><td>176</td></tr><tr><td>G.3</td><td>Search interface</td><td>176</td></tr><tr><td>G.3.1</td><td>Data structure : TAMASListTableTemplate</td><td>177</td></tr><tr><td>G.3.2</td><td>Specific functions</td><td>178</td></tr><tr><td>G.4</td><td>Bread crumbs and table editions</td><td>182</td></tr><tr><td>G.4.1</td><td>Bread crumbs</td><td>182</td></tr><tr><td>G.4.2</td><td>Related table editions</td><td>183</td></tr><tr><td><b>H</b></td><td><b>Introduction à la bibliothèque AmCharts</b></td><td><b>185</b></td></tr><tr><td>H.1</td><td>Instantiating a chart</td><td>185</td></tr><tr><td>H.1.1</td><td>Modules</td><td>185</td></tr><tr><td>H.1.2</td><td>Creating a chart</td><td>186</td></tr><tr><td>H.2</td><td>Anatomy of a chart</td><td>186</td></tr><tr><td>H.2.1</td><td>Axes</td><td>187</td></tr><tr><td>H.2.2</td><td>Series</td><td>188</td></tr><tr><td>H.2.3</td><td>Additionnal components</td><td>188</td></tr><tr><td>H.3</td><td>Data</td><td>189</td></tr><tr><td>H.3.1</td><td>Data structure</td><td>189</td></tr><tr><td>H.3.2</td><td>Binding data</td><td>189</td></tr><tr><td>H.3.3</td><td>Using data fields</td><td>189</td></tr><tr><td>H.3.4</td><td>Using properties fields</td><td>190</td></tr><tr><td>H.4</td><td>Appearance configuration</td><td>191</td></tr><tr><td>H.4.1</td><td>Templates</td><td>191</td></tr><tr><td>H.4.2</td><td>Colors, percentage, etc.</td><td>191</td></tr><tr><td>H.4.3</td><td>States</td><td>192</td></tr><tr><td>H.4.4</td><td>Formatting text in labels and tooltips</td><td>192</td></tr><tr><td>H.5</td><td>Additionnal features</td><td>193</td></tr><tr><td>H.5.1</td><td>Cursors</td><td>193</td></tr><tr><td>H.5.2</td><td>Scrollbar</td><td>193</td></tr><tr><td>H.5.3</td><td>Legends</td><td>194</td></tr><tr><td>H.5.4</td><td>Events listeners</td><td>194</td></tr><tr><td>H.6</td><td>Demos</td><td>194</td></tr><tr><td>H.6.1</td><td>Our manuscript chart</td><td>194</td></tr><tr><td>H.6.2</td><td>Examples in DISHAS</td><td>195</td></tr></tbody></table>

Acronymes 197

Table des figures 199

Table des matières 201