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.

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:



This is fancy SVG code telling the renderer that it's part of a circle. We're only really interested in   and. The  is our starting point on the circle and   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. The other value,  can be replaced with the values from the table. Remember, the L value on the Start-Class wedge will be. Repeat for each wedge.

When you're done with the wedges, don't forget to update the percentages: Stub (23.98%)

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.

 The only number that needs to be changed is the first number, in this case. Simply advance that number by 5. 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.

 In this example we would the next point would be at, 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.  As you can see, the last two coordinates have the same X value. The Y-value of the last ordered pair  does not need to be changed.