User:Fredddie/Graphs

This page does the calculations required to create SVG assessment graphs for WP:USRD and for WP:CRWP.

Coordinate data

The coordinate plane is typically 120 pixels high. The B–FA graph is calculated for 240px, but on 120px graph, the result is a 2x magnification.

WP:USRD assessment graphs
Class	Count	Pie wedge	x	y	Area graph	Stat graph	B–FA graph
???	0	0.00%	0×10⁻¹⁶	−1.0000	0.00	120.00
Stub	1324	10.66%	62.1000	−78.3811	12.80	106.76
Start	4458	35.91%	21.3914	97.6853	55.88	75.42
C	3762	30.30%	−99.3116	−11.7135	92.24	82.38
B	1584	12.76%	−60.6618	−79.4993	107.55	104.16	−38.4
GA	1183	9.53%	−5.3111	−99.8589	118.99	108.17	1.70
A	21	0.17%	−4.2496	−99.9097	119.19	119.79	117.90
FA	84	0.68%	0×10⁻¹³	−100.0000	120.00	119.16	111.60
Total	12416
	15.16	71.12

USRD gallery

WP:CRWP assessment graphs
Class	Count	Pie wedge	x	y	Area graph
???	13	0.78%	0×10⁻¹⁶	−1.0000	0.93
Stub	908	54.14%	−25.7462	96.6289	65.90
Start	424	25.28%	−96.1554	−27.4617	96.24
C	79	4.71%	−83.9639	−54.3146	101.90
B	124	7.39%	−50.7283	−86.1780	110.77
GA	116	6.92%	−9.7260	−99.5259	119.07
A	4	0.24%	−8.2334	−99.6605	119.36
FA	9	0.54%	−4.8688	−99.8814	120.00
Total	1677

CRWP gallery

Tutorial

While SVG may look like a strange language, it is actually pretty easy to update the graphs. The files are all text-editable, which means you can simply download the SVG files and open them in your favorite text editor. Plotting points in SVG is very similar to plotting points on a Cartesian plane. In SVG, however, the origin is the top left corner of the viewing area of your browser and the Y-axis goes down the page. It is possible to translate the origin to another part of the graph.

Pie chart

The pie charts are the easiest to edit, so we'll start there. When I created the pie chart, I translated the origin of the circle to (110,110) which made it a lot easier to do the math required to create the wedges. The coordinates listed in the charts above account for this.

There are seven wedges in the graph – one for each assessment class – and the corresponding lines look similar to this:

<!-- stub-class articles -->
<path fill="#f66" d="M0,0 L0,-100 A100,100 0, 0,1 99.7949,-6.4021 Z"/>

This is fancy SVG code telling the renderer that it's part of a circle. We're only really interested in L0,-100 and 99.7949,-6.4021. The L0,-100 is our starting point on the circle and 99.7949,-6.4021 is the ending point. Both coordinates are located on the circle. The L value is always the same as the previous wedge, since the stubs always start the graph, it's starting at the top, which is 0,-100. The other value, 99.7949,-6.4021 can be replaced with the values from the table 99.6374,-8.5083. Remember, the L value on the Start-Class wedge will be L99.6374,-8.5083. Repeat for each wedge.

When you're done with the wedges, don't forget to update the percentages:

<text x="255" y="63">Stub (23.98%)</text>

Preview the graph in your browser before you upload it. My most common mistakes were either forgetting the comma in the ordered pairs or replacing a decimal point with a comma.

Other graphs

The other graphs are little trickier, but are nonetheless easy to edit. All of the graphs are a rolling window of the last 5 years. If we were to continue showing every month, the text you see would eventually be narrowed to the point of not being legible. To accomplish this, the line part of the graph is contained within a second SVG document within the main document. To get the graph to "roll", you must change the position of the second SVG's viewBox.

For this part of the tutorial, I'll be looking at the stat graph.

<svg width="360" height="136" x="40" y="0" viewBox="60 0 360 136">

The only number that needs to be changed is the first number, in this case 60. Simply advance that number by 5 (65). Any code that is not within the 360-pixel viewBox will not be visible.

Lengthening the lines is simple. They use polylines, which allow you to define points long which the lines will be drawn. This is in contrast to a line, which only allows you to define the beginning and ending points.

<polyline class="Total"
	points="40,119.98 45,95.30 50,87.51 55,83.65 60,79.99 65,69.49 70,59.64 75,53.75
		...omitted for brevity...
		360,16.04"/>

In this example we would the next point would be at 365,<Y COORDINATE>, which is determined from the table above. Do this for all lines.

The area graph is slightly different. It uses the same polyline to create a polygon, so the line must be closed to render correctly.

<polyline fill="#f66" stroke="#000" stroke-width="0.25"
	points="40,120 40,0 45,44.79 50,50.3 55,47.08 60,40.58 65,23.95 70,0 75,4.33 80,0.02 
		...omitted for brevity...
		270,0 275,0.01 280,0.01 290,0 360,0 360,120"/>

As you can see, the last two coordinates have the same X value. The Y-value of the last ordered pair <X COORDINATE>,120 does not need to be changed.