Aiuto:Grafici

Questa pagina o sezione non ha ancora ricevuto il consenso della comunità.

---

È quindi da considerarsi soltanto una bozza in fase di elaborazione.

Questa pagina di aiuto rappresenta una guida generale all'inserimento, all'utilizzo e alla gestione dei grafici su it.wiki.

È possibile inserire un grafico utilizzando il tag <graph>, fornito dall'estensione Graph di MediaWiki, che a sua volta si appoggia sulla libreria grafica Vega. Per agevolarne l'utilizzo, nella Teknopedia in italiano è disponibile il template {{Grafico}}, che ha delle funzionalità molto più limitate ma una sintassi più semplice.

Prima dell'introduzione dell'estensione Graph, tipicamente i grafici venivano creati utilizzando l'estensione EasyTimeline (e quindi il tag <timeline>), originariamente pensata appunto per le cronologie.

Il modo più semplice per inserire un grafico è utilizzare il template {{Grafico}}, che permette di creare grafici a linee, ad area e istogrammi, normali e cumulativi. Le istruzioni su come usarlo si trovano nella pagina del template.

Un grafico è un JSON delimitato dai tag <graph> e </graph>. Un esempio di grafico a barre è il seguente:

Questo grafico non è disponibile a causa di un problema tecnico.
Si prega di non rimuoverlo.

Il cui sorgente è il seguente:

{
  "version": 2,
  "width": 400, "height": 300,
  "padding": {"top": 10, "left": 30, "bottom": 20, "right": 10},
  "data": [
    {
      "name": "table",
      "values": [
        {"x":"1999", "y":28}, {"x":"2000", "y":55}, {"x":"2001", "y":43},
        {"x":"2002", "y":91}, {"x":"2003", "y":81}, {"x":"2004", "y":53},
        {"x":"2005", "y":19}, {"x":"2006", "y":87}, {"x":"2007", "y":52}
      ]
    }
  ],
  "scales": [
    {"name":"x", "type":"ordinal", "range":"width", "domain":{"data":"table", "field":"x"}},
    {"name":"y", "range":"height", "nice":true, "domain":{"data":"table", "field":"y"}}
  ],
  "axes": [
    {"type":"x", "scale":"x"},
    {"type":"y", "scale":"y"}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data":"table"},
      "properties": {
        "enter": {
          "x": {"scale":"x", "field":"x"},
          "width": {"scale":"x", "band":true, "offset":-1},
          "y": {"scale":"y", "field":"y"},
          "y2": {"scale":"y", "value":0}
        },
        "update": { "fill": {"value":"steelblue"} }
      }
    }
  ]
}

Un grafico può utilizzare file JSON esterni, come nel caso della seguente mappa:

Questo grafico non è disponibile a causa di un problema tecnico.
Si prega di non rimuoverlo.

Un grafico può essere incluso.

Le dimensioni sono opzionali: le proprietà width e height regolano la larghezza e l'altezza del grafico, mentre padding permette di creare dei margini.

I dati sono contenuti nell'array data. Ogni elemento ha un nome univoco, assegnato tramite name, e i valori sono memorizzati in values. È possibile utilizzare dati esterni utilizzando url. Un esempio possibile di dati è il seguente:

  "data": [
    {
      "name": "table",
      "values": [12, 23, 47, 6, 52, 19]
    },
    {
      "name": "points",
      "url": "data/points.json"
    }
  ],

L'array marks definisce alcune caratteristiche visive del grafico. Ogni mark possiede la proprietà type che può assumere come valore stringhe, alcune delle quali sono le seguenti:

• "rect": visualizza rettangoli, serve a costruire grafici a barre
• "arc": visualizza archi circolari, serve a costruire grafici a torta
• "path": visualizza poligoni, serve a generare mappe
• "symbol": visualizza differenti figure geometriche
• "text": visualizza testo

La proprietà from serve ad indicare la sorgente dei dati del mark. Il mark possiede inoltre delle properties. Le principali sono enter, exit e update, più una opzionale hover. All'interno di ogni proprietà si definiscono i valori di x e y e il colore di riempimento utilizzando fill.

• Aiuto:Immagini
• Aiuto:Markup immagini
• Aiuto:Timeline
• Template:Grafico

• (EN) Extension:Graph su MediaWiki
• (EN) Tutorial sull'uso di Vega
• (EN) Vega live editor