Module:Graph/doc: Difference between revisions

Revision as of 20:19, 27 May 2020

Latest revision as of 18:51, 11 June 2025

(20 intermediate revisions by 17 users not shown)

Line 1:

{{#if:{{{1|}}}||<!-- Parts not to be transcluded from the wrapper templates -->

{{High-use}}

{{Module rating |alphaprotected}}

{{Lua sidebar}}

<!-- Please place categories where indicated at the bottom of this page and interwikis at Wikidata (see [[Wikipedia:Wikidata]]) -->

Line 6 ⟶ 7:

== Functions for templates ==

=== <ttcode>map</ttcode> ===

Creates a JSON object for <ttcode><nowiki><graph></nowiki></ttcode> to display a political map with colored highlights. In the article namespace the template {{Template|Graph:Map}} should be used instead. See its page for use cases.

Maps can be found at [[Special:Prefixindex/Template:Graph:Map/Inner/]] (for example [[Template:Graph:Map/Inner/Worldmap2c-json|Worldmap2c-json]] with country borders) and new maps should also be saved under Module:Graph/.

Line 13 ⟶ 14:

'''Parameters:'''

}}{{#ifeq:{{{1|map}}}|map|<!-- Parts to be transcluded from the wrapper Template:Graph:Map -->

* '''basemap:''' sets the base map. The map definitions must follow the [https://github.com/mbostock/topojson/wiki TopoJSON] format and if saved in Wikipedia are available for this module. Maps in the default directory [[Special:Prefixindex/Template:Graph:Map/Inner/]] like [[Template:Graph:Map/Inner/Worldmap2c-json|Worldmap2c-json]] should only be referenced by their name while omitting the ModulModule:Graph/ prefix to allow better portability. The parameter also accepts URLs, e.g. maps from other Wikipedia versions (the link should follow the scheme of <ttcode>//en.wikipedia.org/w/index.php?title=''mapname''&action=raw</ttcode>, i.e. protocol-relative without leading http/s and a trailing action=raw to fetch the raw content only). <small>URLs to maps on external sites should be avoided for the sake of link stability, performance, security, and she be assumed to be blocked by the software or browser anyway.</small>

* '''scale:''' the scaling factor of the map (default: 100)

* '''projection:''' the [[:en:map projection|map projection]] to use. Supported values are listed at https://github.com/mbostock/d3/wiki/Geod3-geo-Projectionsprojection. The default value is <ttcode>equirectangular</ttcode> for an [[:en:equirectangular projection|equirectangular projection]].

* '''center:''' map center (corresponds in the map data to both comma-separated values of the <ttcode>scale</ttcode> field)

* '''feature:''' which geographic objects should be displayed (corresponds in the map data to the name of the field under the <ttcode>objects</ttcode> field). The default is value <ttcode>countries</ttcode>.

* '''ids of geographic entities''': The actual parameter names depend on the base map and the selected feature. For example, for the above mentioned world map the ids are [[:en:ISO country codes|ISO country codes]]. The values can be either colors or numbers in case the geographic entities should be associated with numeric data: <ttcode>DE=lightblue</ttcode> marks Germany in light blue color, and <ttcode>DE=80.6</ttcode> assigns Germany the value 80.6 (population in millions). In the latter case, the actual color depends on the following parameters.

* '''colorScale:''' the color palette to use for the color scale. The palette must be provided as a comma-separated list of color values. The color values must be given either as <ttcode>#rgb</ttcode>/<ttcode>#rrggbb</ttcode> or by a [[:en:Web colors#X11 colour names|CSS color name]]. Instead of a list, the built-in color palettes [https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors <ttcode>category10</ttcode> and <ttcode>category20</ttcode>] can also be used.

* '''scaleType:''' supported values are <ttcode>linear</ttcode> for a linear mapping between the data values and the color scale, <ttcode>log</ttcode> for a log mapping, <ttcode>pow</ttcode> for a power mapping (the exponent can be provided as <ttcode>pow 0.5</ttcode>), <ttcode>sqrt</ttcode> for a square-root mapping, and <ttcode>quantize</ttcode> for a quantized scale, i.e. the data is grouped in as many classes as the color palette has colors.

* '''domainMin:''' lower boundary of the data values, i.e. smaller data values are mapped to the lower boundary

* '''domainMax:''' upper boundary of the data values, i.e. larger data values are mapped to the upper boundary

* '''legend:''' show color legend (does not work with <ttcode>quantize</ttcode>)

* '''defaultValue:''' default value for unused geographic entities. In case the id values are colors the default value is <ttcode>silver</ttcode>, in case of numbers it is 0.

}}{{#if:{{{1|}}}||

* '''formatjson:''' format JSON object for better legibility

* '''title''': The title of the graph, used by [[User:GraphBot]] when converting.

* '''name''': The name of the graph, required by [[User:GraphBot]] to convert the graph.

=== <code>chart</code> ===

Line 36 ⟶ 39:

* '''height''': height of the chart

* '''type''': type of the chart: <code>line</code> for [[:en:line chart|line chart]]s, <code>area</code> for [[:en:area chart|area chart]]s, and <code>rect</code> for (column) [[:en:bar chart|bar chart]]s, and <code>pie</code> for [[:en:pie chart|pie chart]]s. Multiple series can stacked using the <code>stacked</code> prefix, e.g. <code>stackedarea</code>.

* '''interpolate''': [[:en:interpolation|interpolation]] method for line and area charts. It is recommended to use <code>monotone</code> for a [[:en:monotone cubic interpolation|monotone cubic interpolation]] – further supported values are listed at https://github.com/veganyurik/vega/wiki/Marks#arealine.

* '''colors''': color palette of the chart as a comma-separated list of colors. The color values must be given either as <code>#rgb</code>/<code>#rrggbb</code>/<code>#aarrggbb</code> or by a [[:en:Web colors#X11 colour names|CSS color name]]. For <code>#aarrggbb</code> the <code>aa</code> component denotes the [[:en:alpha channel|alpha channel]], i.e. FF=100% opacity, 80=50% opacity/transparency, etc. (The default color palette if n <= 10 is Category10: {{ChartColors|Categ20|10}} else is Category20: {{ChartColors|Categ20|20}}). See [[Template:ChartColors]] for details.

* '''xAxisTitle''' and '''yAxisTitle''': captions of the x and y axes

* '''xAxisMin''', '''xAxisMax''', '''yAxisMin''', and '''yAxisMax''': minimum and maximum values of the x and y axes (not yet supported for bar charts). These parameters can be used to invert the scale of a numeric axis by setting the lowest value to the Max and highest value to the Min.

* '''xAxisFormat''' and '''yAxisFormat''': changes the formatting of the axis labels. Supported values are listed at https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers for numbers. For example, the format <code>%</code> can be used to output percentages. For date/time specification of supported values is and https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md for, date/timee.g. For example, the format <code>xAxisFormat=%d-%m-%Y</code> canfor beresult used13-01-1977. to output percentages.

* '''xAxisAngle''': rotates the x axis labels by the specified angle. Recommended values are: -45, +45, -90, +90

* '''xType''' and '''yType''': data types of the values, e.g. <code>integer</code> for integers, <code>number</code> for real numbers, <code>date</code> for dates (e.g. YYYY/-MM/-DD), and <code>string</code> for ordinal values (use <code>string</code> to prevent axis values from being repeated when there are only a few values). Remarks: <code>Date</code> type doesn't work for bar graphs. For <code>date</code> data input please use ISO date format (e.g. YYYY-MM-DD) acc. to [https://developer.mozilla.org/en-US/docs/Web/HTML/Date_and_time_formats date and time formats used in HTML]. Other date formats may work but not in all browsers. Date is unfortunately displayed only in en-US format for all Wikipedia languages. Workaround is to use '''xAxisFormat''' and '''yAxisFormat''' with numerical dates format.

* '''xScaleType''' and '''yScaleType''': scale types of the x and y axes, e.g. <code>linear</code> for linear scale (default), <code>log</code> for logarithmic scale and <code>sqrt</code> for square root scale.

*:A logarithmic chart allows only positive values to be plotted. A square root scale chart cannot show negative values.

* '''x''': the x-values as a comma-separated list, for dates and time see remark in '''xType''' and '''yType'''

* '''y''' or '''y1''', '''y2''', …: the y-values for one or several data series, respectively. For pie charts <code>y2</code> denotes the radiusesradius of the corresponding sectors. For dates and time see remark in '''xType''' and '''yType'''

* '''legend''': show legend (only works in case of multiple data series)

* '''y1Title''', '''y2Title''', …: defines the label of the respective data series in the legend

* '''linewidth''': line width for line charts or distance between the pie segments for pie charts. Setting to 0 with <code>type=line</code> creates a scatter plot.

* '''linewidths''': different line widths may be defined for each series of data with csv, if set to 0 with "showSymbols" results with points graph, eg.: <code>linewidths=1, 0, 5, 0.2</code>

* '''showValues''': Additionally, output the y values as text. (Currently, only (non-stacked) bar and pie charts are supported.) The output can be configured used the following parameters provided as <code>name1:value1, name2:value2</code>:

* '''showSymbols''': show symbol on data point for line graphs, if a number is provided, the symbol size (default 2.5) may be defined for each data series, eg.: <code>showSymbols=1, 2, 3, 4</code>

* '''symbolsShape''': custom shape for symbol: circle, x, square, cross, diamond, triangle_up, triangle_down, triangle_right, triangle_left. May be defined for each series of data with csv, eg.: <code>symbolsShape= circle, cross, square</code>

* '''symbolsNoFill''': if true symbol will be without fill (only stroke),

* '''symbolsStroke''': if "x" symbol is used or option "symbolsNoFill" symbol stroke width, default 2.5

* '''showValues''': Additionally, output the y values as text. (Currently, only (non-stacked) bar and pie charts are supported.) The output can be configured used the following parameters provided as <code>name1:value1, name2:value2</code> (e.g. {{para|showValues|fontcolor:blue,angle:0}}).

** '''format''': Format the output according to https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers for numbers and https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md for date/time.

** '''fontcolor''': text color

Line 55 ⟶ 64:

** '''offset''': move text by the given offset. For bar charts and pie charts with <code>midangle</code> this also defines if the text is inside or outside the chart.

** '''angle''' (pie charts only): text angle in degrees or <code>midangle</code> (default) for dynamic angles based on the mid-angle of the pie sector.

* '''showSymbols''': For line charts: show a symbol (circle) at each data point. (usage: showSymbols=true)

* '''innerRadius''': For pie charts: defines the inner radius to create a ''doughnut chart''.

* '''xGrid''' and '''yGrid''': display grid lines on the x and y axes.

* '''Annotations'''

** '''vAnnotatonsLine''' and '''hAnnotatonsLine''': display vertical or horizontal annotation lines on specific values e.g. <code>hAnnotatonsLine=4, 5, 6</code>

** '''vAnnotatonsLabel''' and '''hAnnotatonsLabel''': display vertical or horizontal annotation labels for lines e.g. <code>hAnnotatonsLabel = label1, label2, label3</code>

}}{{#if:{{{1|}}}||

* '''formatjson''': format JSON object for better legibility

* '''title''': The title of the graph, used by [[User:GraphBot]] when converting.

* '''name''': The name of the graph, required by [[User:GraphBot]] to convert the graph.

=== Template wrappers ===

Line 73 ⟶ 86:

<includeonly>{{#ifeq:{{SUBPAGENAME}}|sandbox | |

<!-- Categories below this line, please; interwikis at Wikidata -->

[[Category:Graph, chartTemplate and plot templatesCollection]]

}}</includeonly>

}}<noinclude>

}}

[[Category:Module documentation pages]]

</noinclude>