File talk:Template map of U.S. states and District of Columbia.svg/Instructions

From Wikimedia Commons, the free media repository
Jump to navigation Jump to search
Notice Note: See newer, easier map template, its instructions, and its talk page.
Note. This all started in this long discussion: en:User talk:Timeshifter/Map of US minimum wage by state.
Note. The instructions are in this talk subpage because subpages are not allowed for file pages. Leave questions and comments at File talk:Template map of U.S. states and District of Columbia.svg.
Note. See also: Commons: Map resources.

Template map[edit]

File:Template map of U.S. states and District of Columbia.svg - By CMG Lee.

The template map can be used to create US SVG maps by pasting in a list of states with values.

Example maps[edit]

See example maps created with this template:


Maps made with this template

Template map instructions[edit]

Download the template SVG file. To do so right-click "Original file" and then "Save link as". Make a copy to work on. To see and edit the SVG text right-click the file, and then click "Open with". Pick a text editor. Or launch the text editor first and click: file menu > open). The text will be saved with the .SVG extension. Another way is to change the .SVG extension to .TXT. Ignore the warnings. To view the image with any browser change back to .SVG when done editing. The best text editors are Unicode text editors such as Notepad or freeware Notepad++. See: Comparison of text editors#Unicode and other character encodings.

Example: File:Map of US minimum wage by state.svg

Data was copied from here:

See Google Sheet (created by User:cmglee):

Click on "Working" tab below. Empty the INPUT column (Column A): Select the column by clicking the header A. Edit menu > Delete > Values. Or right-click the column, and from the popup menu click "Clear column".

Data list must be in alphabetical order by full state name. All 50 states must be listed to get correct results. Washington D.C. needs to be on the bottom so that this data list matches the order in the SVG code. Remove all other rows (national average, etc.). See instructions in example list farther down.

Show all minimum wages to 2 decimal places. Add zeroes as necessary.

Copy the map data list (starting with "Alabama"). Paste it under INPUT starting with row 2. Just select that cell. Then paste. The OUTPUT column D will be immediately filled in anew (no need to empty it first).

Can choose integers, or number of decimal places[edit]

In the Google Sheet go to cell A54. It is to the left of the text: "decimal place". Entering 2 (and pressing Enter) shows 2 decimal places in column D. Entering 1 (and pressing Enter) shows 1 decimal place, 0 rounds to nearest integer, -1 rounds to nearest 10, and so forth. Numbers are rounded correctly.

Output column D is what matters. The decimal places showing there are what will show on your map. Not the numbers in column C.

If the second decimal place is zero or nonexistent then it may or may not serve a purpose. You can reduce the values to 1 decimal place. The shorter values lessen text crowding on the map. It allows text sizes to be increased. But when the values are dollars and cents, then 2 decimal places may look better.

States with no data[edit]

All 50 state names and Washington D.C. (at the end of the list) must still be entered for OUTPUT to show up correctly. States with no data are light gray on the map.

The strings "N/A", "n/a" (or something else) can be added by amending cell A53, and then clicking "return". Otherwise, just the state names show up on states without data. Cell A53 is to the left of the text "no-data label". See Wikipedia: N/A.

Copy the lines generated under OUTPUT[edit]

Copy the lines generated under OUTPUT. To do so just click the column head "D". Then copy (edit menu of Google Sheet > copy). Paste into a blank Notepad file, etc..

Then paste the 2 OUTPUT parts into the obvious spots in the user-editable SVG code at the top.

<!-- End of user-editable lines -->

Also replace the map caption <text id="title"> in the SVG code to "State minimum wages, in dollars. Jan 1, 2024" (or whatever date should be). Don't forget to change the date in the other 2 locations mentioned in the next section too.

Change the info between the <desc> tags to fit this specific map. On the Commons file description page be sure to link to the template as part of the authoring info.

You can add the unit symbol to the legend if desired (dollar sign in this case).

Then, if necessary, change the extension back to .SVG. Look at the map with any browser.

If it is a new version of an existing map, upload it over the old map. If it is an altogether new map upload the file to the Commons under a new name.

In any case do not overwrite the template map.

2 titles and 1 description in the SVG code[edit]

All are in the user-editable part of the SVG code at the top.

<text id="title"> is for the caption on the map itself. It has limited space. The wider it is, the smaller the possible maximum font size.

<title> is for the file title that one sees on a browser tab, if opening the SVG file in a browser. Hover over the tab to see the full name. Put the most important info first.

<desc>. SVG defines <title> and <desc> elements where authors may also provide plain-text descriptive material within an SVG image to help indexing, searching and retrieval by a number of means. The description can be longer than the previous 2.

Font family[edit]

According to that Phab thread Mediawiki is currently only seeing the first font in a font family list. This is working for now:

  • font-family="Liberation Sans,Arial,Helvetica,sans-serif"
  • font-family: "Liberation Sans", Arial, Helvetica, sans-serif;

Liberation Sans also works on Fandom and Shoutwiki. And the other fonts work on Microsoft, Apple, Unix, and Linux. The 3 named fonts all have the same line length (A-Z, 0-9, etc.) in File:SVG Text Font Test.svg:

Here is a list of free fonts supposedly available on Mediawiki servers:

Experiment with text sizes. Zooming. State abbreviations[edit]

There are some user-editable text sizes in the SVG code. In the user-editable section at the top of the SVG code. Default sizes: 

.title  { font-size:30px; letter-spacing:0; }
.legend { font-size:28px; }
.state  { font-size:17px; }
.value  { font-size:17px; }

You can zoom the maps to see how they look at article sizes. Right-click the SVG file and then click "open with". Pick a browser. Edge, Chrome, and Opera work for zooming. Firefox does not work. Ctrl and roll the mouse wheel to zoom in and out. Or use the keyboard method: Ctrl++/Ctrl+0/Ctrl+-.

On Edge, Chrome, and Opera the image starts at the top of the screen. A large font size (40px and above) for the title can come very close to the top of the screen. If the image is used on a dark background that can be disconcerting.

Note whether the text size of the value causes its text to touch the text of the state names. This might be a reason to use state abbreviations instead of full names. Larger text sizes can then be used for both the values and the state abbreviations. Since there is nothing hanging down from the abbreviations.

Note that when you look at the map at article sizes the space between the state names and the values lessens, and the text can touch if you use larger text sizes than this below. Bolding makes it worse. 

.state  { font-size:17px; }
.value  { font-size:17px; }

Some text sizes for some of the maps with average title width: 

.title  { font-size:38px; letter-spacing:0; }
.legend { font-size:28px; }
.state  { font-size:17px; }
.value  { font-size:17px; }

30px may be the maximum that will work for wider titles used on other wikis. Fandom, for example, has a peculiarity where SVG thumbs around 500px wide or smaller have muddier text in general, and where the title gets closer to the edges in some cases. The title looks bolder, muddier, and has wider letter spacing. Compared to the same thumb at 550px width where all the text is sharp.

Change outlined text to regular text[edit]

To get regular text versus outlined text delete this SVG code line: 

text    { filter:url(#filter_glow); }

Or comment it out: 

<!-- Regular text used instead of outlined text by commenting out this line: -->
<!-- text    { filter:url(#filter_glow); } -->

Doing so makes the code not apply to anything.

The following can be removed or commented out too. Or ignore it, since it does nothing if the above code is deleted or commented out. 

  <filter id="filter_glow">
   <feGaussianBlur in="SourceAlpha" stdDeviation="0.5"/>
   <feColorMatrix type="matrix" values="0,0,0,0,1 0,0,0,0,1 0,0,0,0,1 0,0,0,2,0"/>
   <feBlend in="SourceGraphic"/>
   <feBlend in="SourceGraphic"/>
  </filter>

Color palettes, accessibility[edit]

See also: Commons:Map resources#Accessibility and map colors.

The map template palette may vary as it is updated. Download the SVG file to check for the latest palette. The .n_a color has been lightened up: 

.min { fill:#0099ff; }
.max { fill:#ffff99; }
.n_a { fill:#eeeeee; }

See colors: #0099ff. And: #ffff99. And: #eeeeee.

All 4 of the above maps have this palette: 

.min { fill:#99ffff; }
.max { fill:#ff6600; }
.n_a { fill:#eeeeee; }

See colors: #99ffff. And: #ff6600.

See: User:Timeshifter/Sandbox208 - links, background colors, borders. For maps.

Opacity formula[edit]

If you are changing the number for just one state, then this may be easier than using the Google Sheet. For example, the only change from Jan 1, 2023 to June 1, 2023 for the minimum wage map was for Connecticut. It went from $14 to $15 an hour. Since this did not extend the range, then the Google Sheet is not necessary. The range is shown in the legend on the map.

  • Max minus Min provides range (16.50 - 7.25 = 9.25).
  • (Minimum wage minus Min) divided by range gets the opacity number. (15 - 7.25 = 7.75). Then 7.75/9.25 = 0.8378 which is rounded to 0.838. Which is used as the opacity number.

General formula:

  • Max minus Min provides range. Then: Value minus Min. Then divide result by range to get the opacity number.

Data list. State first. No dollar signs[edit]

Return to top.

Alphabetical data list for:

Washington D.C. needs to be on the bottom so that this data list matches the order in the SVG code.

Taken from: en:List of US states by minimum wage

Fortunately, this list is already in alphabetical order by full state name. Other lists may not be. See:

Copy the multiyear table in wikitext form from the article to your sandbox. sandbox2. sandbox3. Save.

In the visual editor delete all columns except for the state column and the latest year. For example, for the table below keep only the Jan 1, 2024 minimum wages. Delete all else. Replace dollar signs with a space. Delete the caption with its references. Save.

Table[edit]

State Jan 1, 2024
Alabama 7.25
Alaska 11.73
Arizona 14.35
Arkansas 11.00
California 16.00
Colorado 14.42
Connecticut 15.69
Delaware 13.25
Florida 12.00
Georgia 7.25
Hawaii 14.00
Idaho 7.25
Illinois 14.00
Indiana 7.25
Iowa 7.25
Kansas 7.25
Kentucky 7.25
Louisiana 7.25
Maine 14.15
Maryland 15.00
Massachusetts 15.00
Michigan 10.33
Minnesota 10.85
Mississippi 7.25
Missouri 12.30
Montana 10.30
Nebraska 12.00
Nevada 11.25
New Hampshire 7.25
New Jersey 15.13
New Mexico 12.00
New York 15.00
North Carolina 7.25
North Dakota 7.25
Ohio 10.45
Oklahoma 7.25
Oregon 14.20
Pennsylvania 7.25
Rhode Island 14.00
South Carolina 7.25
South Dakota 11.20
Tennessee 7.25
Texas 7.25
Utah 7.25
Vermont 13.67
Virginia 12.00
Washington 16.28
West Virginia 8.75
Wisconsin 7.25
Wyoming 7.25
Washington D.C. 17.00

List[edit]

Then copy the table right off the sandbox page (not from either edit window). Then paste into the wikitext editing window of a sandbox. It will show up as a list. Replace tabs with a space. Then replace the double spaces with single spaces. Put <pre></pre> tags on the top and bottom so that it stays as a list. Save. 

State. Jan 1, 2024
Alabama 7.25
Alaska 11.73
Arizona 14.35
Arkansas 11.00
California 16.00
Colorado 14.42
Connecticut 15.69
Delaware 13.25
Florida 12.00
Georgia 7.25
Hawaii 14.00
Idaho 7.25
Illinois 14.00
Indiana 7.25
Iowa 7.25
Kansas 7.25
Kentucky 7.25
Louisiana 7.25
Maine 14.15
Maryland 15.00
Massachusetts 15.00
Michigan 10.33
Minnesota 10.85
Mississippi 7.25
Missouri 12.30
Montana 10.30
Nebraska 12.00
Nevada 11.25
New Hampshire 7.25
New Jersey 15.13
New Mexico 12.00
New York 15.00
North Carolina 7.25
North Dakota 7.25
Ohio 10.45
Oklahoma 7.25
Oregon 14.20
Pennsylvania 7.25
Rhode Island 14.00
South Carolina 7.25
South Dakota 11.20
Tennessee 7.25
Texas 7.25
Utah 7.25
Vermont 13.67
Virginia 12.00
Washington 16.28
West Virginia 8.75
Wisconsin 7.25
Wyoming 7.25
Washington D.C. 17.00

List without pre tags. It wraps[edit]

State. Jan 1, 2024 Alabama 7.25 Alaska 11.73 Arizona 14.35 Arkansas 11.00 California 16.00 Colorado 14.42 Connecticut 15.69 Delaware 13.25 Florida 12.00 Georgia 7.25 Hawaii 14.00 Idaho 7.25 Illinois 14.00 Indiana 7.25 Iowa 7.25 Kansas 7.25 Kentucky 7.25 Louisiana 7.25 Maine 14.15 Maryland 15.00 Massachusetts 15.00 Michigan 10.33 Minnesota 10.85 Mississippi 7.25 Missouri 12.30 Montana 10.30 Nebraska 12.00 Nevada 11.25 New Hampshire 7.25 New Jersey 15.13 New Mexico 12.00 New York 15.00 North Carolina 7.25 North Dakota 7.25 Ohio 10.45 Oklahoma 7.25 Oregon 14.20 Pennsylvania 7.25 Rhode Island 14.00 South Carolina 7.25 South Dakota 11.20 Tennessee 7.25 Texas 7.25 Utah 7.25 Vermont 13.67 Virginia 12.00 Washington 16.28 West Virginia 8.75 Wisconsin 7.25 Wyoming 7.25 Washington D.C. 17.00

Retrieved from "https://commons.wikimedia.org/w/index.php?title=File_talk:Template_map_of_U.S._states_and_District_of_Columbia.svg/Instructions&oldid=867172865"