User:ClemRutter/training

Tables

{|style="width: 80%; margin-top: 8px; font-size: +1.1em; margin-left: auto; margin-right: auto; background-color:#cedff2; padding: 20px; border-radius: 9px;" 
|+style="background: darkblue; color: white; font-size: +2.1em"| LCC Cottage estates 1918-1939
! Estate name
! Area
! No of dwellings
! Population 1938
! Population density
|-
! Pre 1914
|-
| [[Norbury Estate|Norbury]]||11||218||867||{{convert|{{#expr: 218/11 round 1}}|/acre|/ha}}
|-
| [[Old Oak and Wormholt|Old Oak]]||32||736||3519||{{convert|{{#expr: 736/32 round 1}}|/acre|/ha}}
|-
| [[Totterdown Fields]] || 39  || 1262 ||-||{{convert|{{#expr: 1262/39 round 1}}|/acre|/ha}}
|-
| [[White Hart Lane Estate|White Hart Lane]] </br>''Tower Gardens''|| 98||783||5936||{{convert|{{#expr: 783/98 round 1}}|/acre|/ha}}
|-
! 1919-1923
|-
| [[Becontree]]||2770||25760{{efn|Source says 2589- transcription error}}||115652||{{convert|{{#expr:25760/2770 round 1}}|/acre|/ha}}
|-
| [[Bellingham, London|Bellingham]]||252||2673||12004||{{convert|{{#expr: 2673/252 round 1}}|/acre|/ha}}
|-
| [[Castelnau, London|Castelnau]]||51||644||2851||{{convert|{{#expr: 644/51 round 1}}|/acre|/ha}}
|-
| [[Roehampton|Roehampton]] </br>''Dover House Road Estate''|| 147||1212||5383||{{convert|{{#expr: 1212/147 round 1}}|/acre|/ha}}
|-
||| colspan=4 style=background-color:lightgreen|Source: Yelling {{sfn|Yelling|1995|p=170}}
|}

;Collapsible wikitable format
{| class="wikitable collapsible collapsed"
|+Dwellings completed 1945-80
|-
! Year !! England and Wales !! Scotland
|-
| 1945-50 (annual average) || 96.3 || 14.3
|-
| 1951-55 (annual average) || 188.1 || 30.9
|-
| 1956-60 (annual average) || 124.4 || 25.9
|-
| 1961 || 98.5 || 20.1
|-
| 1962 || 111.7 || 19.0
|-
| 1963 || 102.4 || 21.6
|-
| 1964 || 126.1 || 29.5
|-
| 1965 || 140.9 || 27.6
|-
| 1966 || 142.4  || 28.2
|-
| 1967 || 159.3 || 34.0
|-
| 1968 || 148.0 || 33.3
|-
| 1969 || 139.9 || 34.3
|-
| 1970 || 134.9 || 34.4
|}

Graphs

• {{Bar chart}} 4 data series (columns) 25 values
• {{Bar box}}, shows bar chart with a text column after the bars or bar-pairs uses {{bar percent}} and {{bar pixel}}
• {{Bartable}} adds a composition bar within a wikitable
• {{Composition bar}} for 1 data item between 0 and 100
• {{Pie chart}}, shows upto 15 pie wedges in a circular pie chart
• {{Brick chart}}, 9 blocks- shows brick segments in a rectangular "pie chart"- useful for seats in a council
• {{Vertical bar chart}} 20 bars- with legend (does not meet accessibility guidelines due to the lack of alternative text)
• {{Line chart}} 10 data series- 25 values

Example

The following code:

{{Graph:Chart|type=line
|width=500
|height=350
|showSymbols=yes|yAxisMin=1000|yAxisMax=3000
|colors=red,blue,green
|yGrid =
|x=Val. 1,Val. 2,Val. 3,Val. 4,Val. 5,Val. 6,Val. 7,Val. 8,Val. 9,Val. 10
| y1 = ,2200,2400,2500,2600,2500
| y2 = 1400,2000,1600,1800,2400,2400,2500,2000,1600,1800
| y3 = 1800,,,2000,1600,1800,2400,,2400
}}
{{legend|red|Series 1}}
{{legend|blue|Series 2}}
{{legend|green|series 3}}

renders:

This graph was using the legacy Graph extension, which is no longer supported. It needs to be converted to the new Chart extension.

  Series 1

  Series 2

  Series 3

Images and maps

Easy method to add a map to the infobox of an article is to use this code.

| module = {{OSM Location map
 | float = centre
 | width = 250
 | coord = {{coord}} <!-- Map centred -->
 | mark-coord = {{coord}} <!-- Marking the school-->
  | label = Hundred of Hoo Academy
  | label-pos = bottom <!-- top, bottom, right or left -->
  | zoom = 12 <!-- usually 10, 11 or 12-->
 }}

To add a map of any point, we must define the centre of the map, then say where to place the marker. This was done automatically in the example above

1km
0.6miles

Hundred of Hoo Academy

   

{{OSM Location map
 | float = left
 | width = 250
 | coord = {{coord|51.41872|0.53518}} <!-- Centred -->
 | mark-coord = {{coord|51.42172|0.55018}} 
  | label = Hundred of Hoo Academy 
  | label-pos = bottom
 | zoom = 12}} <!-- marking the school-->

Chloropleth

A map with a complex caption

[[File:Schengen Area participation.svg|thumb|{{legend|#0088cc|EU member states participating}} 
      {{legend|#ffff00|EU member states not participating but obliged to join}} 
      {{legend|#ff6666|EU member states with an opt-out}} 
      {{legend|#7CFC00|non-EU member states participating}} 
      {{legend|#FFA500|non-EU member states de facto participating}} 
      {{legend|#4B0082|non-EU member states with an open border}}
]]

This map is a chloropleth meaning it displays the data relating to an area by means of a colour. It is best to use ColorBrewer to choose the colours needed.

Embedded raw code

This graph was using the legacy Graph extension, which is no longer supported. It needs to be converted to the new Chart extension.

Taken from Media wiki

<graph>
{
  "version": 2, "width": 400, "height": 400,
  "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10},
  "data": [
    {
      "name": "table",
      "values": [
        {"t": "a", "v": 28}, {"t": "b", "v": 55},
        {"t": "c", "v": 43}, {"t": "d", "v": 91},
        {"t": "e", "v": 81}, {"t": "f", "v": 53},
        {"t": "g", "v": 19}, {"t": "h", "v": 87},
        {"t": "i", "v": 52}, {"t": "j", "v": 48},
        {"t": "k", "v": 24}, {"t": "l", "v": 49},
        {"t": "m", "v": 87}, {"t": "n", "v": 66},
        {"t": "o", "v": 17}, {"t": "p", "v": 27},
        {"t": "q", "v": 68}, {"t": "r", "v": 16},
        {"t": "s", "v": 49}, {"t": "t", "v": 15}
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "range": "width",
      "domain": {"data": "table", "field": "v"}
    },
    {
      "name": "y",
      "range": "height",
      "type": "ordinal",
      "domain": {"data": "table", "field": "t"}
    }
  ],
  "axes": [
    {"type": "x", "scale": "x"},
    {"type": "y", "scale": "y"}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "properties": {
        "enter": {
          "y": {"scale": "y", "field": "t"},
          "height": {"scale": "y", "band": true, "offset": -1},
          "x": {"scale": "x", "value": 0},
          "x2": {"scale": "x", "field": "v"}
        },
        "update": {
          "fill": {"value": "steelblue"}
        },
        "hover": {
          "fill": {"value": "red"}
        }
      }
    }
  ]
}
</graph>

References the ultimate aim