Christopher Ciufo (he/him)�Senior Product Manager��📍Toronto, Canada

Szymon Grabarczuk (he/him)�Lead Movement Communications Specialist�📍Warsaw, Poland

Hello 👋

​

Charts, the successor to Graphs�A secure and extensible tool for data visualization

Christopher Ciufo & �Szymon Grabarczuk

Agenda

​

• Background
• Live Demo :(
• Roadmap
• Q&A

Graphs

Graphs

Graphs

https://en.wikipedia.org/wiki/Demographics_of_Estonia

{{GraphChart

| width = 500

| height = 150

| xAxisTitle = year

| yAxisTitle = ‰

| yAxisMin = -30

| yAxisMax = 30

| yGrid = 0,1

| xGrid = 10

| hAnnotatonsLine = 0

| hAnnotatonsLabel =

| legend =

| type = line

| x = 1914,1915,1916,1917,1918,1919,1920,1921,1922,1923,1924,1925,1926,1927,1928,1929,1930,1931,1932,1933,1934,1935,1936,1937,1938,1939,1940,1941,1942,1943,1944,1945,1946,1947,1948,1949,1950,1951,1952,1953,1954,1955,1956,1957,1958,1959,1960,1961,1962,1963,1964,1965,1966,1967,1968,1969,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020, 2021, 2022

​

|y1 = 5.0, 2.4, -3.6, -8.0, -10.0, -9.7, -1.6, 4.5, 3.5, 5.1, 4.1, 3.4, 1.7, 0.4, 2.0, -1.0, 2.6, 1.3, 2.8, 1.5, 1.3, 0.9, 0.6, 1.4, 1.7, 1.2, -0.6, -4.0, -1.0, -2.1 , -9.6, -6.5, -0.6, 1.3, 4.1, 4.7, 4.1, 4.8, 4.7, 5.0, 6.0, 6.2, 5.9, 5.5, 5.6, 5.7, 6.1, 5.9, 5.2, 4.8, 5.4, 4.2, 3.7, 3.8, 4.2, 4.2, 4.7, 5.1, 4.5, 4.0, 4.3, 3.4, 3.1, 3.4, 2.8, 2.6, 2.7, 3.1, 3.5, 4.0, 3.4, 2.8, 4.0, 4.4, 4.2, 3.7, 1.8, -0.2, -1.4, -4.0, -5.5, -5.1, -4.1, -4.3, -5.3, -4.4, -3.8, -4.2, -3.9, -3.7, -2.7, -2.2, -1.8, -1.2, -0.5, -0.2, -0.0, -0.4, -1.1, -1.3, -1.5, -1.0, -1.0, -1.3, -1.0, -1.0, -2.0, -4.0, -4.2

​

|y2 =,-10,-25.9,-22.3,-21.3,-11,5.4,12.9,10.1,3,0.4,-2.5,-1.7,-1.2,-2,1,-2.6,0.5,0.8,0.2,0.5,1.7,0.3,-0.5,0,-5.7,-28.6,-45.9,-25.5,-8.8,-6.5,-119.7,53.4,48.9,43.6,40,20.5,6.8,6,5.5,3.5,3.3,3.5,3,3.7,3.5,4.6,4.7,6.1,7.1,8.7,7.4,5.5,4.6,5.6,9.2,6.3,7.2,7,5.2,4.2,4.3,4.5,3.5,4.1,2.8,3.4,4.3,3.2,3.3,3.2,3.7,3.2,3.3,2.2,0.1,-1.1,-4.9,-16.9,-22.1,-15.7,-13,-10.8,-7.1,-4.8,-2.9,18.9,-2.2,-2.6,-2.1,-3.2,-3.7,-4.1,-3.3,-2.5,-1.3,-2.3,-3.3,-2,-2.5,-1.6,1,2.5,2.1,4.8,4.7,3.5,5.5,14.6

​

| y1Title = Natural change (per 1000)

| y2Title = Crude migration change (per 1000)

}}

Graphs

Graphs

Graphs

Graphs were…

• A flexible way to visualize data on the wikis
• Editable like any other type of content
• Added to articles using templates
• Interactive (sometimes)

Charts

Charts Project

Enhancing encyclopedic content on Wikipedia through data visualization

Charts are…

• A flexible way to visualize data on the wikis
• Editable like any other type of content
• Added to articles using a parser tag
• Interactive ready

Charts are also…

• Easily shared across wikis
• Secure by design
• Translatable
• Accessible

Demo

​

Charts

{

"license": "CC0-1.0",

"version": 1,

"source": "1993 Canadian federal election.tab",

"type": "line",

"width": 600,

"height": 400,

"xAxis": {

"type": "date"

},

"yAxis": {

"title": {

"en": "% Support",

"fr": "% Soutien"

}

},

"legend": {

"en": "Party",

"fr": "Parti"

},

"showSymbols": true

}

​

Canadian election results.chart

{{#chart:format=1993 Canadian federal election.chart}}

Article Page

What’s next

• Data filtering
• Chart customization
• Translation support
• Light interactivity
• More chart types

Milestones

• Aug: Beta deployment
• Sept: Production ready
• Oct-Dec: Iterating with volunteers and find ways to support migrating from graphs to charts

Christopher Ciufo�Product Manager

People

Roan Kattouw�Tech Lead

Brooke Vibber�Engineer

Katie Filbert�Engineer

Nat Baca�Engineering Director

Lani Goto�Program Manager

Szymon Grabarczuk�Movement Comms

Derek Torsani�Design

Recap

What we ask of you:

• Show us what you want to be able to visualize
• Talk to us about your data workflow
• Follow along on wiki and in Phabricator

What we ask of you:

• Show us what you want to be able to visualize
• Talk to us about your data workflow
• Follow along on wiki and in Phabricator

mediawiki.org/wiki/Extension:Chart/Project��phabricator.wikimedia.org/tag/charts

Thank you!