Extension:Graph/Demo/ko

From MediaWiki.org
Jump to: navigation, search
This page is a translated version of the page Extension:Graph/Demo and the translation is 5% complete.

Other languages:
English • ‎한국어

This page shows some examples of what Graph extension can produce. Graphs use Vega grammar (documentation) as underlying technology. Vega team is working on other tools to make Graphs easier to use. For interactive graphs this tutorial will explain building graphs step by step. For other graph ideas, see Vega examples.

Graph templates[edit]

The easiest way to use graphs is via pre-built templates such as the Graph:Chart (available on many Wikipedias), or more specialized PieChart. Graph:Chart supports many common graph types such as line, area, and pie charts:

{{Graph:Chart|width=600|height=100|xAxisTitle=X|yAxisTitle=Y
 |type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}

{{Graph:Chart|width=100|height=100|type=pie|legend=Legende
 |x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200
 |y2=7,8,9,8,8,9,10,9,5|showValues=}}

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
 |legend=Legend|type=stackedarea|x=1,2,3,4,5,6|y1=10,12,6,14,2,10
 |y2=2,4,6,8,13,11|interpolate=monotone|colors=seagreen,orchid}}

Vega 2.0 interactive examples[edit]

See tutorial how to build this: Extension:Graph/Demo/ko/HistoricalFertilityRates

/Dimpvis Extension:Graph/Demo/ko/Dimpvis

/Airports Extension:Graph/Demo/ko/Airports

/OverviewDetail Extension:Graph/Demo/ko/OverviewDetail

/IndexChart Extension:Graph/Demo/ko/IndexChart

Using RESTBase API[edit]

Show pageview graphs for a range of dates, using pageview analytics API. Template:LlTemplate:Graph:PageViews을 참고하세요.

Current page and en.wikipedia.org's main page for the last 30 days

{{Template:Graph:PageViews}}
{{Template:Graph:PageViews|30|Main Page|en.wikipedia.org}}

Current page and en.wikipedia main page for the last 30 days - per type Extension:Graph/Demo/ko/Pageviews2 Extension:Graph/Demo/ko/Pageviews2

미디어위키 API 사용하기[edit]

This graph shows edit history for a wiki page. See {{Graph:PageHistory}}.

Current Page Albert Einstein from en.wikipedia.org

This graph shows the number of pages in each subcategory. See graph source code.

Category:Extensions by category. Category:People from en.wikipedia.org
Extension:Graph/Demo/ko/CategoryPie Extension:Graph/Demo/ko/CategoryPie

Using Wikidata Query Service API[edit]

See more examples.

Extension:Graph/Demo/ko/Sparql/Largest disasters

Trees[edit]

Cartesian tree[edit]

/CartesianTree

Extension:Graph/Demo/ko/CartesianTree

Radial tree[edit]

/RadialTree

Extension:Graph/Demo/ko/RadialTree

Dendrogram[edit]

Timeline / lifeline[edit]

More maps examples[edit]

This transcludes the page Extension:Graph/Demo/Map. The <graph> tag's JSON data on that page specifies that its countries data comes from a separate URL, Extension:Graph/Demo/RawData:WorldMap-iso2-json, that contains map data in JSON format. (MediaWiki doesn't know this wiki page should be formatted as JSON yet, it will eventually use a JSON content handler.)

One of the elements in the <graph> tag's JSON data specifies a highlight color for each country, in the format "country-code":"highlight-color":

{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"}

Vega usually works with data in the format [{"id":"country-code", "v":"highlight-color"}, ...], so I created a helper Lua function to convert the data:

{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"} }}

The Lua function's output is data in Vega's format:

[{"id":"US","v":"blue"},{"id":"AU","v":"purple"},{"id":"CN","v":"red"},{"id":"BR","v":"pink"},{"id":"DZ","v":"green"}]

Extension:Graph/Demo/ko/Map

Here is a more complex data processing example: MapTemplate is expanded with the data from Lua which takes it from the 2010 population distribution in the world (data based on UN data). To generate this graph, I use Lua module Graph:Utils's function parseCsv to extract the year 2010 column from the Extension:Graph/Demo/RawData:PopulationByCountryHistoric-csv page (in csv format), and pass that data as the first unnamed parameter to the MapTemplate graph. Additional optional parameter specifies that it should be scaled to 80%.

{{/MapTemplate|{{#invoke:Graph:Utils|parseCsv|Extension:Graph/Demo/RawData:PopulationByCountryHistoric-csv|2010}}|scale=180}}

Extension:Graph/Demo/ko/MapTemplate

Note how the legend it wrongly positioned. That won't happen at lower scales.

Passing MediaWiki template parameters[edit]

If you're using a wiki page as a template, you can pass parameters to it, like any other MediaWiki template.

As an example, the graph specification in TemplateSample does not hardcode a fill color for marks.properties.update.fill.value; instead it sets the fill color to {{{1|#ccc}}}. So if you visit that page or transclude it with no parameter, the graph fills with color #ccc; but if you transclude that page you can specify the fill color as the first template parameter.

{{/TemplateSample}}
{{/TemplateSample | blue}}
{{/TemplateSample | #f00dee}}

Extension:Graph/Demo/ko/TemplateSample Extension:Graph/Demo/ko/TemplateSample Extension:Graph/Demo/ko/TemplateSample

Using a template for repeated graphs[edit]

This is very useful if you have multiple graphs of the same form: you can put the verbose graph JSON and additional repetive wikitext in a template and only pass the parameters to it that vary, such as title and values. See a sample of this approach.

Overlaying two types of data[edit]

Falkensee graph sample, see code.

Extension:Graph/Demo/ko/falkensee

Embedded directly with <graph>[edit]

This example is a <graph> tag containing the graph JSON inside the current page.

Horizontal bar graph[edit]

/HorizontalBarGraphSample

Extension:Graph/Demo/ko/HorizontalBarGraphSample

그래프 데이터 생성하기[edit]

Editing JSON by hand is fiddly and prone to error. so you should use a JSON checker such as JSONLint or a JSON editor such as the Vega Live Editor to edit JSON before you copy and paste it into the wiki page. If the <graph> tag's data is directly embedded in the page such as the example above, then if you use VisualEditor to edit the page you can directly edit graph data.