Wikipedia:Graphs and charts: Difference between revisions
Kwamikagami (talk | contribs) |
m →Pie chart: <syntaxhighlight lang="wikitext"> |
||
(13 intermediate revisions by 9 users not shown) | |||
Line 3: | Line 3: | ||
{{For|instructions on how to make a graph in Wikitext|Help:Graph}} |
{{For|instructions on how to make a graph in Wikitext|Help:Graph}} |
||
{{Wikipedia how-to|WP:GRAPHS}} |
{{Wikipedia how-to|WP:GRAPHS}} |
||
{{Graphs disabled}} |
|||
A '''[[graph]]''' or '''[[chart]]''' or '''[[diagram]]''' is a diagrammatical illustration of a set of [[data]]. If the graph is uploaded as an image file, it can be placed within articles [[Wikipedia:Picture tutorial|just like any other image]]. |
A '''[[graph]]''' or '''[[chart]]''' or '''[[diagram]]''' is a diagrammatical illustration of a set of [[data]]. If the graph is uploaded as an image file, it can be placed within articles [[Wikipedia:Picture tutorial|just like any other image]]. |
||
Line 22: | Line 23: | ||
===Vega=== |
===Vega=== |
||
A graph-making tool called Vega was introduced in May 2015. You can use it to make [[mw:Extension:Graph/Demo|charts and maps]]. If you have an old browser, you will see images instead. You can [https://github.com/vega/vega/wiki learn how to use it] and write help pages for your wiki. You can use the [ |
A graph-making tool called Vega was introduced in May 2015. You can use it to make [[mw:Extension:Graph/Demo|charts and maps]]. If you have an old browser, you will see images instead. You can [https://github.com/vega/vega/wiki learn how to use it] and write help pages for your wiki. You can use the [https://vega.github.io/editor/ Vega v2 edit tool] to make charts and copy the code to your wiki. Note that only Vega 2 is supported at the moment. Charts and maps use complex code, and you should put them into templates. |
||
===Methods using Wikipedia templates=== |
===Methods using Wikipedia templates=== |
||
Line 35: | Line 36: | ||
====Single statistic==== |
====Single statistic==== |
||
⚫ | |||
{| class="infobox" style="width: 10em;" |
|||
|- |
|||
⚫ | |||
|- |
|||
| class="thumbcaption" | 70% of women with breast cancer have no known risk factors |
|||
|} |
|||
{{tl|Composition bar}} can be used to provide a single statistic. |
{{tl|Composition bar}} can be used to provide a single statistic. |
||
This example shows 70% (70 out of 100), but the template is flexible and can show any positive integer out of any (equal or larger) integer. The template is 100 pixels wide, so the results are rounded to 1%. |
This example shows 70% (70 out of 100), but the template is flexible and can show any positive integer out of any (equal or larger) integer. The template is 100 pixels wide, so the results are rounded to 1%. |
||
The code for producing this, set in a one-column, two-row table with a caption in the second row, is shown here: |
|||
:<code><nowiki>{| class="infobox" style="width: 10em;" </nowiki></code> |
|||
:<code><nowiki>|-</nowiki></code> |
|||
:<code><nowiki>| {{Composition bar|70|100|hex=pink}}</nowiki></code> |
|||
:<code><nowiki>|-</nowiki></code> |
|||
:<code><nowiki>| class="thumbcaption" | 70% of women with breast cancer have no known risk factors</nowiki></code> |
|||
:<code><nowiki>|}</nowiki></code> |
|||
To use this, copy the above and replace the values ("70" and "100" in the middle line) and the caption ("70% of women...") with your data. The color can also be changed, from "red" in this example to "blue", "green", or any [[hex color]]. |
To use this, copy the above and replace the values ("70" and "100" in the middle line) and the caption ("70% of women...") with your data. The color can also be changed, from "red" in this example to "blue", "green", or any [[hex color]]. |
||
Line 61: | Line 49: | ||
{{Pie chart |
{{Pie chart |
||
|other = yes |
|other = yes |
||
|value1 = |
|value1 = 40 |
||
|label1 = One |
|label1 = One |
||
|value2 = 32 |
|value2 = 32 |
||
Line 70: | Line 58: | ||
|label4 = Four}} |
|label4 = Four}} |
||
{{tl|Pie chart}} is an ''experimental'' graph-drawing template that produces a [[pie chart]] 200 pixels wide in the article. |
{{tl|Pie chart}} is an ''experimental'' graph-drawing template that produces a [[pie chart]] 200 pixels wide in the article. When making a pie chart, ensure that the segments are ordered by size (largest to smallest) and in a clockwise direction.{{Clarification needed|date=November 2023|reason=Clockwise? Could someone explain or add a note linking to a discussion on this? I have seen counter-clockwise pie charts before. (Or clockwise with increasing slices.)<!-- Tagged by User:BucketOfSquirrels. Original text added by User:Moxy on 6 February 2023 in edit with oldid=1137753013. -->}} |
||
Setting the <code>other</code> parameter to <code>yes</code> will pad the chart so that the values total to 100. |
Setting the <code>other</code> parameter to <code>yes</code> will pad the chart so that the values total to 100. |
||
This example was created by typing the following code: |
This example was created by typing the following code: |
||
<syntaxhighlight lang="wikitext"> |
|||
{{Pie chart |
|||
|other = yes |
|||
|value1 = 40 |
|||
|label1 = One |
|||
|value2 = 32 |
|||
|label2 = Two |
|||
|value3 = 12 |
|||
|label3 = Three |
|||
|value4 = 9 |
|||
|label4 = Four}} |
|||
</syntaxhighlight> |
|||
Up to 30 slices can be included. |
Up to 30 slices can be included. |
||
Line 223: | Line 211: | ||
The default colors are created by [[Module:ChartColors]]. The basic 20 are: |
The default colors are created by [[Module:ChartColors]]. The basic 20 are: |
||
:{{ChartColors|Categ20|20}} |
:{{ChartColors|Categ20|20}} |
||
If a chart plots 10 colors or fewer, then by default it uses every other one: |
|||
⚫ | |||
:{{ChartColors|Categ20|10}} |
|||
⚫ | |||
:colors=#1f77b4,#aec7e8,#ff7f0e,#ffbb78,#2ca02c,#98df8a,#d62728,#ff9896,#9467bd,#c5b0d5,#8c564b,#c49c94,#e377c2,#f7b6d2,#7f7f7f,#c7c7c7,#bcbd22,#dbdb8d,#17becf,#9edae5 |
:colors=#1f77b4,#aec7e8,#ff7f0e,#ffbb78,#2ca02c,#98df8a,#d62728,#ff9896,#9467bd,#c5b0d5,#8c564b,#c49c94,#e377c2,#f7b6d2,#7f7f7f,#c7c7c7,#bcbd22,#dbdb8d,#17becf,#9edae5 |
||
Similarly if one chart plotted fewer than 10 colors and you wanted it to use the same colors as another that had more than 10. |
|||
See also [[Template:ChartColors]]. |
|||
===Methods outside Wikipedia=== |
===Methods outside Wikipedia=== |
||
:''[[Scalable Vector Graphics]] (SVG) is the recommended format.'' |
:''[[Scalable Vector Graphics]] (SVG) is the recommended format.'' |
||
* '''[[Module:Chart]]''' creates bar and pie charts on Wikipedia without need for external tools |
* '''[[Module:Chart]]''' creates bar and pie charts on Wikipedia without need for external tools |
||
⚫ | * Many [[List of spreadsheet software|spreadsheet]], [[Graphic art software|drawing]], and [[List of desktop publishing software|desktop publishing]] programs allow you to create graphs and export them as images.[http://stackoverflow.com/questions/7485835/how-can-i-export-an-excel-openoffice-libreoffice-chart-to-svg][http://superuser.com/questions/415707/export-excel-graphs-as-vector-graphics-files-e-g-svgs] |
||
⚫ | |||
* Many spreadsheet, drawing, and [[desktop publishing]] programs allow you to create graphs and export them as images. |
|||
⚫ | |||
* [[Wikipedia:How_to_create_charts_for_Wikipedia_articles#gnuplot|gnuplot]] can produce a wide variety of charts and graphs; see [[:commons:Category:Images with Gnuplot source code|samples with source code at Commons]]. |
* [[Wikipedia:How_to_create_charts_for_Wikipedia_articles#gnuplot|gnuplot]] can produce a wide variety of charts and graphs; see [[:commons:Category:Images with Gnuplot source code|samples with source code at Commons]]. |
||
* In Python using [[matplotlib]] ([[:commons:Category:Created_with_Matplotlib|examples]]) |
* In Python using [[matplotlib]] ([[:commons:Category:Created_with_Matplotlib|examples]]) |
||
* The [[R (programming language)|R programming language]] can be used for creating Wikipedia graphs. |
* The [[R (programming language)|R programming language]] can be used for creating Wikipedia graphs. |
||
* |
* The [[Google Chart API]] allows a variety of graphs to be created. |
||
⚫ | |||
* [https://veusz.github.io/ Veusz] is a free scientific graphing tool that can produce 2D and 3D plots. Users can use it as a module in Python. |
* [https://veusz.github.io/ Veusz] is a free scientific graphing tool that can produce 2D and 3D plots. Users can use it as a module in Python. |
||
* [https://www.geogebra.org/ GeoGebra] is open-source graphing calculator and is freely available for non-commercial users. |
* [https://www.geogebra.org/ GeoGebra] is open-source graphing calculator and is freely available for non-commercial users. |
||
Line 256: | Line 246: | ||
*[[Wikipedia:Coloring cartographic maps#Preparing the code from the legend of the map|BrewerColorLegends]] |
*[[Wikipedia:Coloring cartographic maps#Preparing the code from the legend of the map|BrewerColorLegends]] |
||
*[[mw:Extension:Graph/Interactive Graph Tutorial]] |
*[[mw:Extension:Graph/Interactive Graph Tutorial]] |
||
*[[Special:GraphSandbox]] |
|||
{{Wikipedia technical help|collapsed}} |
{{Wikipedia technical help|collapsed}} |
Latest revision as of 15:59, 1 May 2024
This help page is a how-to guide. It explains concepts or processes used by the Wikipedia community. It is not one of Wikipedia's policies or guidelines, and may reflect varying levels of consensus. |
Graphs are currently disabled Graphs are unavailable due to a known technical issue. Updates on reimplementing the Graph extension can be found on Phabricator and on MediaWiki.org. |
A graph or chart or diagram is a diagrammatical illustration of a set of data. If the graph is uploaded as an image file, it can be placed within articles just like any other image.
Graphs must be accurate and convey information efficiently. They should be viewable at different computer screen resolutions. Ideally, graphs will also be aesthetically pleasing.
Please note that "graph", "chart" and "diagram" are ambiguous terms, sometimes used interchangeably.
Accuracy
[edit]Graphs that show a trend of data should illustrate the trend accurately in its context, rather than illustrating the trend in an exaggerated or sensationalized way. In short, don't draw misleading graphs.
Choose a type of graph that is appropriate for the data you are illustrating.
- Cartesian coordinates
- Pie chart — good for showing how a whole is divided up (e.g., how much money is spent on each thing in a budget)
- Bar graph — good for showing how things compare to each other (e.g., whether foo or bar is bigger) or how it has changed (e.g., sales of foo each year)
Creating graphs for Wikipedia
[edit]Vega
[edit]A graph-making tool called Vega was introduced in May 2015. You can use it to make charts and maps. If you have an old browser, you will see images instead. You can learn how to use it and write help pages for your wiki. You can use the Vega v2 edit tool to make charts and copy the code to your wiki. Note that only Vega 2 is supported at the moment. Charts and maps use complex code, and you should put them into templates.
Methods using Wikipedia templates
[edit]Timeline
[edit]A variety of templates and styles are available to create timelines.
- The {{Graphical timeline}} template allows representations of extensive timelines. The template offers complex formatting and labeling options to control the output. Typically, each use is made into its own template, and the template is then transcluded into the article. See an example here, and an example of it being used in an article here.
- The use of fixed images, such as File:Narnia Timeline.svg, was common in the past. However, these are difficult or impossible to adjust later, so this approach is frequently not the best option.
- In other cases, whole articles or sections present timelines in text as association (definition) lists. Timeline of chemistry is a featured list that uses this style to good effect.
Single statistic
[edit]{{Composition bar}} can be used to provide a single statistic.
This example shows 70% (70 out of 100), but the template is flexible and can show any positive integer out of any (equal or larger) integer. The template is 100 pixels wide, so the results are rounded to 1%.
To use this, copy the above and replace the values ("70" and "100" in the middle line) and the caption ("70% of women...") with your data. The color can also be changed, from "red" in this example to "blue", "green", or any hex color.
If you want to present multiple statistics, you can stack multiple copies of the template inside the first cell of the table.
Pie chart
[edit]{{Pie chart}} is an experimental graph-drawing template that produces a pie chart 200 pixels wide in the article. When making a pie chart, ensure that the segments are ordered by size (largest to smallest) and in a clockwise direction.[clarification needed]
Setting the other
parameter to yes
will pad the chart so that the values total to 100.
This example was created by typing the following code:
{{Pie chart
|other = yes
|value1 = 40
|label1 = One
|value2 = 32
|label2 = Two
|value3 = 12
|label3 = Three
|value4 = 9
|label4 = Four}}
Up to 30 slices can be included.
Horizontal bar graph
[edit]Bar chart
[edit]{{Bar chart}} is a template that displays the data as a horizontal bar chart. The width of the graph can be changed.
Country | Predicted median age at death |
---|---|
China | |
India | |
USA | |
Indonesia | |
Brazil |
Bar box
[edit]{{Bar box}} is a template that displays the data as a horizontal bar chart. The width of the chart can be changed, but care must be taken to make sure the bars stay within the box on many browsers.
Stacked bar
[edit]{{Stacked bar}} is a template that displays a set of data as a single bar of a stacked bar chart. The template supports up to 12 segments in their proportional lengths compared to a total, along with captions for each section. Care must be taken that the captions do not overlap excessively in smaller resolutions, and in many cases you may not be able to include captions if the segment(s) is too small.
- Number of video game articles in the 1970s and earlier by year
|
Vertical bar graph
[edit]Module:Chart is a Lua module that may be used to create several different types of vertical bar graphs.
A standard vertical bar graph
- Apple
- Banana
- Orange
A stacked vertical bar graph
- Apple
- Banana
- Orange
Brick chart
[edit]{{Brick chart}} is a simple block-oriented chart template. It assumes that everything must add up to total=100 (or specify), and fills in any missing amounts with "other".
You can label (and optionally choose colors for) each item, and the labels can be wikilinks to relevant articles. Now, decimal amounts are supported (tiny amounts will appear as slivers).
Line charts
[edit]The template {{Graph:Chart}} implements line charts, such as:
Graphs are unavailable due to technical issues. There is more info on Phabricator and on MediaWiki.org. |
{{Graph:Chart}} can also draw area charts, bar charts, pie charts and scatter plots.
Geographical maps
[edit]The template {{Graph:Map}} allows to draw geographical maps with either discrete colors for qualitative maps, or a gradient of colors for continuous values per country. Here is an example:
Graphs are unavailable due to technical issues. There is more info on Phabricator and on MediaWiki.org. |
Colors
[edit]The default colors are created by Module:ChartColors. The basic 20 are:
If a chart plots 10 colors or fewer, then by default it uses every other one:
The colors can be manually set in a graph by adding them to the 'colors' parameter. For example, for two pie charts, the first of which is default and the second of which omits some colors in the first, you would manually enter your selections from the default 20:
- colors=#1f77b4,#aec7e8,#ff7f0e,#ffbb78,#2ca02c,#98df8a,#d62728,#ff9896,#9467bd,#c5b0d5,#8c564b,#c49c94,#e377c2,#f7b6d2,#7f7f7f,#c7c7c7,#bcbd22,#dbdb8d,#17becf,#9edae5
Similarly if one chart plotted fewer than 10 colors and you wanted it to use the same colors as another that had more than 10.
See also Template:ChartColors.
Methods outside Wikipedia
[edit]- Scalable Vector Graphics (SVG) is the recommended format.
- Module:Chart creates bar and pie charts on Wikipedia without need for external tools
- Many spreadsheet, drawing, and desktop publishing programs allow you to create graphs and export them as images.[1][2]
- gnuplot can produce a wide variety of charts and graphs; see samples with source code at Commons.
- In Python using matplotlib (examples)
- The R programming language can be used for creating Wikipedia graphs.
- The Google Chart API allows a variety of graphs to be created.
- Livegap Charts creates line, bar, spider, polar-area and pie charts, and can export them as images without needing to download any tools.
- Veusz is a free scientific graphing tool that can produce 2D and 3D plots. Users can use it as a module in Python.
- GeoGebra is open-source graphing calculator and is freely available for non-commercial users.
- WebPlotDigitizer or PlotDigitizer's online free app can be used to extract data from charts.
See also
[edit]- Wikipedia:How to create charts for Wikipedia articles
- Help:Barchart
- Wikipedia:Family trees
- Wikipedia:Collaboration to convert graphs to SVG
- Wikipedia:Don't draw misleading graphs
- Wikipedia:To scale charts
- Wikipedia:Images
- Wikipedia:Record charts
- Commons:Chart and graph resources
- Choose the color
- BrewerColorLegends
- mw:Extension:Graph/Interactive Graph Tutorial