File talk:Template map of US states and District of Columbia.svg

Note: For 2nd map template instructions see: File talk:Template map of US states and District of Columbia.svg/Instructions. Leave comments and questions below.

Note: See previous map template, its instructions, and its talk page.

Using JavaScript or .xlsx files instead of Google Sheets

@Timeshifter: Thanks for continuing to use and maintain this template.

You might have seen my chats with @RCraig09: who uses Excel spreadsheets to generate SVG, and @TilmannR: to use JavaScript that replaces itself with static SVG, yet embeds itself as a comment.

Doing this avoids the user needing any software except a text editor and a web browser, which they likely already use to view Wikipedia. It also avoids using my Google account which periodically goes over quota, making the spreadsheet read-only.

Might you be interested to move and support the template using either method?

Thanks,
cmɢʟee ⋅τaʟκ 14:26, 12 January 2024 (UTC)

cmglee. I'll try out any tools to make US maps. But I don't have the knowledge to create the tools, or to edit the tools in a significant way. I just do not have the time, health, or energy nowadays. Please keep the current map template while you work on other tools. Are there any ready now that I can try out for US maps? --Timeshifter (talk) 15:24, 12 January 2024 (UTC)

@Timeshifter: Not yet. I just wanted to gauge interest before starting anything. I envision the user's workflow to be something like this:

1. Open a template file (or existing file to be amended) in a text editor.
2. Replace (or amend) parts indicated with relevant data:

   Tab- or comma-separated values

   Headings, colors etc

3. Delete the "!" and 2 "-" on a particular line, and the 2 "-" on the last line.
4. Save as a new file (or file to be amended).
5. Open the file in Firefox or Chrome.
6. In the web browser, save as another file.
7. Upload this file to Commons.

Is that reasonable? cmɢʟee ⋅τaʟκ 15:44, 12 January 2024 (UTC)

P.S. See https://upload.wikimedia.org/wikipedia/commons/1/1b/Gabriel_horn_2d.svg?utm_source=commons.wikimedia.org&utm_campaign=api&utm_content=original for an example. This one is general-purpose, not map-specific. cmɢʟee ⋅τaʟκ 15:46, 12 January 2024 (UTC)

I need something I can try out. From your list I see one problem: "Tab- or comma-separated values". The values I deal with are in wiki tables. So I would have to convert a column of values into "Tab- or comma-separated values". I don't know how to do that. I can open csv files in Libreoffice Calc. And there are tools to go the other direction here:

w:Help:Table/Advanced#Spreadsheet/database tables to wikitables.

What would be nice is something like Excel2Wiki for US maps. Where one pastes in a one-column table, and out pops the SVG for a US map. :)

--Timeshifter (talk) 16:03, 12 January 2024 (UTC)

Tip: A cheap way of converting wiki-tables into .csv is to (1) copy the wikitable, (2) paste into a .txt text file, (3) use find-and-replace to remove any delimiters "|", (4) use Excel to import the .txt file. Separately: my Excel-to-svg conversions are entirely text-based, for making charts/graphs only, not something as complex as a map. RCraig09 (talk) 16:35, 12 January 2024 (UTC)

See starting point for US minimum wage map:

• File talk:Template map of U.S. states and District of Columbia.svg/Instructions#Data list. State first. No dollar signs - scroll down through the subsections too.

w:csv file. See w:User:Timeshifter/Sandbox236. I guess this is a space-delimited csv file?:

7.25 11.73 14.35 11.00 16.00 14.42 15.69 13.25 12.00 7.25 14.00 7.25 14.00 7.25 7.25 7.25 7.25 7.25 14.15 15.00 15.00 10.33 10.85 7.25 12.30 10.30 12.00 11.25 7.25 15.13 12.00 15.00 7.25 7.25 10.45 7.25 14.20 7.25 14.00 7.25 11.20 7.25 7.25 7.25 13.67 12.00 16.28 8.75 7.25 7.25 17.00

That's with just the values. It is easy enough to replace the spaces with commas. --Timeshifter (talk) 18:04, 12 January 2024 (UTC)

+CC @TilmannR:

@Timeshifter: I missed your latest reply and have created this new SVG based on File:Maternal_mortality_rates_per_100,000_births_by_state._US_map.svg. Data is located between the lines

/// User editable data below until the next ///

and

`; /// list state name (optionally then a space and value) above in this order:

The procedure to use it is as in the above numbered list, subject to change. Does it make sense so far? cmɢʟee ⋅τaʟκ 18:38, 14 January 2024 (UTC)

Please subscribe to our threads.

I figured it out. Thanks for this!

As a test I just redid the minimum wage map with the Jan 1, 2024 values listed here:

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

And I substituted in the font sizes, background colors, min, max, decimal places, title, description from the current map (Jan 1, 2024 values):

File:Map of US minimum wage by state.svg

I think I can rewrite the instructions page fairly easily in the next few days.

Please keep both templates for now until I finish up the new instructions.

Then maybe we can redirect the old template to the new one since some people have links to it.

And we can redirect the talk page and instructions page to the new template.

File talk:Template map of U.S. states and District of Columbia.svg - (this page we are talking on).

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

I don't want to lose the talk page we are on now. It has a lot of valuable info.

Does this work with Edge and Opera too?

--Timeshifter (talk) 23:35, 14 January 2024 (UTC)

Thank you very much! Before you start mass-producing them, I'd like to finalise the JavaScript code and especially inline comments, as I rushed through it last night. If you can think of better ways to word things, please let me know.

I'll try it on Edge and Chrome but don't have Opera.

Yes, let's keep the old template but mark it as superseded when the new one is finalized.

I'm unsure what you meant by "Please subscribe to our threads." Cheers, cmɢʟee ⋅τaʟκ 01:35, 15 January 2024 (UTC)

I am talking about the "subscribe" links at the top of every talk section.

Opera is quick and easy to install.

I have been thinking about whether we should encourage people to delete everything between the script tags after they generate an SVG map. And then send people back to the main template since it is where updated code and inline comments will happen.

A superseded template sounds like a better idea than a redirect. This way we keep the knowledge of both methods. And then we will not have to redirect the talk page. We can start a new talk page for the new template. And then people will not be confused about old talk, and what it refers to.

I can mark the old instructions page as superseded and deprecated. So we keep that knowledge about the old template.

I can copy the old instructions to the new instructions page. And then adapt it. It shouldn't be that hard since most of the steps are the same.

After you work on the new template for awhile, I could clarify the inline comments further if you want. After you clarify them.

I can use the old template in the meantime. It is pretty easy for me now. Though not as easy as the new one.

--Timeshifter (talk) 02:27, 15 January 2024 (UTC)

Thanks, I agree about superseded template and talk pages.

The script intentionally embeds a copy of itself in the SVG file (it's trivial to not do this). This is so that anyone with the SVG can update the table and rerun the script after removing a few characters. Sending back to the template loses the raw data.

For my own file management, if the file to upload is X.svg, I name the file with the removed characters X.gen.svg. After updating X.gen.svg, I open it in Firefox and Save As file X.svg.

Cheers, cmɢʟee ⋅τaʟκ 03:51, 15 January 2024 (UTC)

P.S. I've updated the SVG. That's about as much as I can do at the moment. I plan to derive the state codes from the state names so that they can be specified in any order but am currently unsure how to make it robust to any variation in spelling e.g. specifying DC as "Washington" or "District of Columbia" while Washington state is missing. cmɢʟee ⋅τaʟκ 04:54, 15 January 2024 (UTC)

You're right. The script needs to stay in the file, so that updates are simple. I hadn't thought of that. I don't have to reenter the styling each time I do an update. I just enter the new list of locations and values. --Timeshifter (talk) 04:06, 16 January 2024 (UTC)

Thanks. That's right; in the grand scheme of things, a few kilobytes is negligible.

In case it interests you, I've asked about the matching algorithm on http://en.wikipedia.org/w/index.php?title=Wikipedia%3AReference_desk%2FComputing&diff=1196100959&oldid=1196027585 . Cheers, cmɢʟee ⋅τaʟκ 09:08, 16 January 2024 (UTC)

Might be good to link to the new instructions page from within the script section. That way when the file is inevitably used outside Wikipedia, or adapted to be a different map on the Commons, people can always get to the clearer instructions, and the latest template. New mapmakers may forget to link to the template on the file description page.

Ambitious people could even copy the latest script over from the template. I don't know if that is always possible since an updated script may need changes higher up in the SVG file too.

The new instructions could explain all that. Feel free to start, or add to, the new instructions. I have a lot going on right now, and possibly off and on for a couple weeks.

It might be nice if the script accepted the state names via full names or abbreviations. In any order. That would be especially helpful since it is easy to mess up the order. See:

w:Help:Tables and locations#Convert US state abbreviations to full names

I don't think accepting other abbreviations is that important. A couple word-wrapped paragraphs in the script section would help: 1 for full names, and 1 for abbreviations. So people would know what was accepted. They should be in the order that is required. That is if order will matter. Alphabetical order by full names (with Washington D.C. at the end):

Alabama Alaska Arizona Arkansas California Colorado Connecticut Delaware District of Columbia Florida Georgia Hawaii Idaho Illinois Indiana Iowa Kansas Kentucky Louisiana Maine Maryland Massachusetts Michigan Minnesota Mississippi Missouri Montana Nebraska Nevada New Hampshire New Jersey New Mexico New York North Carolina North Dakota Ohio Oklahoma Oregon Pennsylvania Rhode Island South Carolina South Dakota Tennessee Texas Utah Vermont Virginia Washington West Virginia Wisconsin Wyoming Washington D.C.

--Timeshifter (talk) 14:21, 16 January 2024 (UTC)

Instructions for new template

Good points. I've created

http://commons.wikimedia.org/wiki/File_talk:Template_map_of_US_states_and_District_of_Columbia.svg/Instructions

to host the instructions and shall populate it when I can. In my latest version, I've also added a link to it.

I'll work on the arbitrary-order matching when I get a satisfactory answer from the computing reference desk.

Cheers, cmɢʟee ⋅τaʟκ 15:44, 16 January 2024 (UTC)

P.S. The latest version lets states be specified in any order and tolerates minor spelling differences. If much greater differences must be supported, add more entries to the map_states dictionary e.g. 'districtofcolumbia':'DC'. States without data can also be omitted from the table.

http://en.wikipedia.org/w/index.php?title=Wikipedia:Reference_desk/Computing&diff=prev&oldid=1196413257 has details on the algorithm. cmɢʟee ⋅τaʟκ 10:57, 17 January 2024 (UTC)

Will the latest template allow using 2-letter abbreviations? In any order? Many US state databases use 2-letter abbreviations. So I could skip converting them to full names. It would be super easy to create US maps from those databases. --Timeshifter (talk) 17:19, 17 January 2024 (UTC)

Looks like both of us have been doing unnecessary work. I would much prefer the data with 2-letter abbreviation, actually. I'll just adapt my script to work with both names and abbreviations. cmɢʟee ⋅τaʟκ 02:42, 18 January 2024 (UTC)

The latest version now evaluates the data table, ignoring case and non-alphanumeric characters, in this order:

1. Name as in en:List_of_states_and_territories_of_the_United_States or "Washington, D.C."
2. USPS 2-letter (postal) abbreviation or "DC"
3. Smallest Levenshtein distance to name in (1) above – if tied, the first in alphabetical order

Cheers, cmɢʟee ⋅τaʟκ 01:29, 19 January 2024 (UTC)

cmglee. Feel free to fill in some instructions for the new template:

• File talk:Template map of US states and District of Columbia.svg/Instructions

Eventually I will get around to filling it out more. It may be awhile though. --Timeshifter (talk) 18:28, 19 January 2024 (UTC)

Discussion archive: "Algorithm to match U.S. state names to USPS state codes":

w:Wikipedia:Reference desk/Archives/Computing/2024 January 16

Fixed above link. --Timeshifter (talk) 21:03, 17 March 2024 (UTC)

Tab- or comma-separated values

cmglee. It's been awhile. Lots of problems and projects. I worked off and on for weeks on this page:

• w:List of U.S. states and territories by intentional homicide rate

Finally nailed down the references for good data on US homicide rates from the FBI and CDC. And why they get slightly different numbers. These 2 maps are now made from the new template:

• File:Homicide rates per 100,000 by state. CDC. US map.svg
• File:Homicide rates per 100,000 by state. FBI. US map.svg

Thanks for the new template. It is easier to use, and more forgiving.

From the instruction summary on the new instruction page what do you mean by "Tab- or comma-separated values"? Can a paragraph of those values be pasted in somewhere? See:

• File talk:Template map of US states and District of Columbia.svg/Instructions#Instruction summary

I added "Or a list". Feel free to edit that page in any way. --Timeshifter (talk) 12:15, 6 March 2024 (UTC)

cmglee. I don't know if you saw this. --Timeshifter (talk) 21:30, 17 March 2024 (UTC)

Sorry I missed this. I've clarified it as such: In the list following the line "const state_space_value...", update the numbers, or add a space and the value after the state name. (If a value is unavailable, leave the value blank.) Is that clearer? Cheers, cmɢʟee ⋅τaʟκ 02:50, 18 March 2024 (UTC)

Thanks for clarifying that, cmglee. --Timeshifter (talk) 04:14, 18 March 2024 (UTC)

More maps

Cmglee, TilmannR, RCraig09, Glrx and all. I may or may not be able to do much for awhile. Problems, projects, health problems, etc., etc.. Others can create maps too if they can somehow find out about the easier map template.

The instruction page (linked below) needs more details. It would be nice if others helped on that too:

• File talk:Template map of US states and District of Columbia.svg/Instructions

I am interested in having some maps from these pages:

• https://expressdentist.com/dental-health-ranked-by-state
• https://wallethub.com/edu/states-with-best-worst-dental-health/31498

"More than 800 up-to-date health indicators at the state level can be mapped, ranked, and downloaded":

• https://www.kff.org/statedata
• https://www.kff.org/other/state-indicator/firearms-death-rate-per-100000

CDC. Stats of the States:

• https://www.cdc.gov/nchs/pressroom/stats_of_the_states.htm

I will list some more ideas for maps if I see some possibilities. Feel free to list more ideas for map topics. And data links like the above links if possible.

Anybody can create these maps. I may or may not get around to it. I can maybe help clean up the file description pages for maps created by others. --Timeshifter (talk) 23:03, 17 March 2024 (UTC)

Hi @Timeshifter: I'm unfamiliar with these topics, so could you rank the requests by priority and add which articles and sections they should appear on?

May I also suggest asking on Commons:Graphic_Lab/Map_workshop and en:Wikipedia:Graphics_Lab/Map_workshop? cmɢʟee ⋅τaʟκ 02:35, 18 March 2024 (UTC)

cmglee. Thanks for the links. I may use them. I also added them to the instruction page:

File talk:Template map of US states and District of Columbia.svg/Instructions#Map workshops of the Graphic Labs

Do you live in Malaysia? I was reading your Wikipedia user page: en:User:Cmglee. Maybe you and/or your collaborators can make a template map for Malaysian states? Or other countries. The more the better. That might also help in people gaining familiarity with this type of map template.

--Timeshifter (talk) 04:11, 18 March 2024 (UTC)

My pleasure. Good idea to add a suggested priority list to the instruction page.

I live in the UK and am visiting Malaysia. I met some local Wikipedians who also make thematic maps such as this one. I offered to make them a template similar to ours but they prefer to use QGIS.

Cheers,
cmɢʟee ⋅τaʟκ 04:48, 18 March 2024 (UTC)

Getting the word out about these maps

I updated to the new template here:

• Commons:Map resources#User-editable maps

Feel free to copy that section elsewhere. I did:

I used the maps here (scroll down the section):

• w:Help:Table/Advanced#Side by side tables/images

I started sections here:

• w:Wikipedia:Maps for Wikipedia#User-editable maps
• w:Wikipedia talk:WikiProject Maps#User-editable maps
• w:Wikipedia:Graphics Lab/Map workshop#User-editable maps for more countries
• Commons:Graphic Lab/Map workshop#User-editable maps for more countries

--Timeshifter (talk) 18:05, 30 March 2024 (UTC)

Thanks very much, @Timeshifter: cmɢʟee ⋅τaʟκ 15:03, 31 March 2024 (UTC)

@Cmglee: You're welcome. I later added a link to examples to all of the above posts: Category:English-language SVG maps of the United States made with templates. --Timeshifter (talk) 19:18, 3 April 2024 (UTC)

Template may have stopped working

Note: The problem has been resolved. --Timeshifter (talk) 23:35, 13 June 2024 (UTC)

cmglee. I can't get it to work today.

Last map I used the template for successfully was uploaded on April 10, 2024:

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

Today I was trying to update this map to 2022:

• File:Maternal mortality rates per 100,000 births by state. US map.svg

See: User:Timeshifter/Sandbox 14. I tried both Firefox and Chrome. --Timeshifter (talk) 02:31, 21 May 2024 (UTC)

• Could it be that the file name has a period in it? VanIsaac (en.wiki) 18:15, 24 May 2024 (UTC)

I don't think so. I start with a copy of the template which has no period in the file name. So at no point in the creation process does the file name have a period in it. When the new map is complete I upload to a file with a period in the file name.

I am unable to complete the process. The script code never resets. So the uploader sees the script and blocks it from completing the upload. --Timeshifter (talk) 00:44, 25 May 2024 (UTC)

The problem has been resolved for Firefox. It is still not working in Chrome. See: User talk:Cmglee#New template is not working for me. --Timeshifter (talk) 16:27, 15 June 2024 (UTC)

Class names for white text

@Cmglee: From en:User talk:GeogSage#Part 2: I suppose it's possible to have white text by putting a white outline around the black text; on light backgrounds, it's barely visible but on dark ones, the outline "becomes" the text.

Someone created this map below with some white text and put it into this category:

• Category:English-language SVG choropleth maps of the United States with visible numbers. Made with templates

It looks like it is based on your template, but with some changes. And the generator script has been removed from it.

It has some class names for white text:

• stateWhite
• valueWhite

I would like those to be added to your template. So that I could manually add white text to some states. I wouldn't be using the generator script for that.

In the previous template there was a white outline. See instructions on it:

• File talk:Template map of U.S. states and District of Columbia.svg/Instructions#Change outlined text to regular text

I remember having problems with outlines, and it was removed from the new template. So I don't want to go back to it. There was a lot of discussion about outlines and problems with them here:

• en:User talk:Timeshifter/Map of US minimum wage by state

I want to keep the existing color palette though as the default palette. Because making it too dark on one end would require white callout lines for D.C. and Massachusetts where the lines cross the states. That is if the states they cross are very dark.

Also, a darker endpoint could mess up seeing the state names West Virginia, Indiana, and Mississippi. Since their names are not completely within their state borders. Could add dashes in Indiana and Mississippi names. But I don't see how W. Virginia could be fixed. A callout line to it would be too long. --Timeshifter (talk) 14:33, 21 February 2026 (UTC)

See if pinging works this time. cmglee. I didn't get a notification of a ping. I think the problem was I added the ping on secondary saves of the first post. I think pinging only works on the first save of a post. --Timeshifter (talk) 16:38, 21 February 2026 (UTC)

@Cmglee: I temporarily changed to white text for California and Washington in the minimum wage map:

See this version of the map with some white text.

But white text (#FFFFFF) failed all the contrast tests here with the default max color (#FF6600):

• https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=FF6600

Black text (#000000) passes all the tests:

• https://webaim.org/resources/contrastchecker/?fcolor=000000&bcolor=FF6600

I had forgotten we had run all these tests before. I updated the color and contrast info here:

• File talk:Template map of US states and District of Columbia.svg/Instructions#Colors

The off-white text in the uncommitted vote map at the top passes most of the contrast tests because it uses a darker max color: #b30000. See tests with its off-white text color (#fff7ec}:

• https://webaim.org/resources/contrastchecker/?fcolor=FFF7EC&bcolor=B30000

It would pass all of the tests if a pure white text color (#FFFFFF) was used:

• https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=B30000

If people want to experiment with darker max colors, then they may need the white text classes. Can I add them to the template? The updated color instructions will help them with this. --Timeshifter (talk) 00:44, 23 February 2026 (UTC)

@Timeshifter: I've just seen your ping. Many thanks for looking into this.

I've just had a thought: we can use the transparency mechanism to reverse the color of labels on top of shapes, and then use an SVG filter to push it towards either white or black. I'll assume that if the shapes' color is midway, both black or white labels will work.

For example, if the minimum value is 10 with color #008 and the maximum value is 25 with color #f08, we set the minimum label color to #fff and maximum label color to #000. For a state with value 16, its shape's color becomes #608 and label becomes #999. A high-contrast SVG filter boosts the label color to almost #fff.

Does that make sense? Thanks, cmɢʟee ⋅τaʟκ 08:38, 23 February 2026 (UTC)

Not really. I would have to see it in action. And contrast tests would need to be done. Some background colors do not have enough contrast with both white or black text. Google AI says so. See Google search: "colors with mid-range luminance often fail to provide sufficient contrast against both pure white (#FFFFFF) and pure black (#000000) text. To meet accessibility standards, text requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text." --Timeshifter (talk) 13:04, 23 February 2026 (UTC)

@Timeshifter: In such cases, other than outlining it (or picking other colors), there's no better colors than either black or white, which are farthest in terms of brightness from any arbritary color. cmɢʟee ⋅τaʟκ 16:34, 23 February 2026 (UTC)

I've been attempting to be polite about this, but a one size fits all choropleth map doesn't exist for a reason. Each map is supposed to have the symbolization, class breaks, enumeration unit, scale, projection, and overall layout tailored to the individual dataset. There is over a century of literature on this topic, and I've tried to bring attention to this, but seems to fall on plugged ears. Choropleth maps are one type of thematic map, and are not really a particularly good one most of the time. Having a non-contiguous map with different projections and scales undermines the actual purpose of a choropleth, which is to compare values between enumeration units, and understand spatial relationships. A bar chart would accomplish the same thing if you are not going to keep the units at the same scale/projection. The approach of making them here is very amateur, and will lead to more bad maps being spammed throughout the project. This is not only enabling the spread of misinformation and misrepresentation of data, but has it baked in from the beginning. As a cartographer, I believe this is literally unethical, based on multiple ethical codes. Specifically, one of the British Cartographic Society values is "Competence," which these maps fail to demonstrate. The Locus Charter ten founding principles include "Understand impacts" and "Do no harm," bad maps cause harm, and I don't believe you understand the impacts of them (). Borden Dent proposed a code of ethics that includes "strive for accurate portrayal of the data," "ensure symbols don’t bias the interpretation of the map," and most importantly "don’t let defaults drive your design." A one size fits all approach to making a choropleth will not accurately portray all data, will lead to bias in interpreting some data, and is literally using the defaults to drive design. Another important thing to note for discussion of using maps found online (another discussion), is Dents code of ethics includes "avoid plagiarising; report all data sources," which means using other peoples maps without their permission is a violation of cartographic ethics, even if by an interpretation of some twisted ill informed court decision an argument is made it isn't a violation of copyright. Also, all maps on Wikipedia without clear data sources are unethical by this metric, which is a lot of them.

There are many free options that don't involve reinventing the wheel that actually have the potential to produce quality maps. Seriously, here is am 11 minute video on how to do it in QGIS, it is something that can be taught in the first week of a GIS class. I've provided a lot of literature on why the approach you're trying is not a good idea, and can provide a lot more, however I can only assume it is being ignored. As a cartographer that teaches this topic, who dedicates a week in all of my GIS classes to the topic of ethics in cartography, I feel it is my ethical responsibility to say it is a really, really bad idea. Honestly, it is probably one of the worst and most potentially damaging map related ideas I've ever seen, and I've seen a lot of bad map related ideas. Some of the literature I provided on my talk page discusses the ethical responsibility of cartographers to publish good content online to set a good example, these maps will set terrible examples when others inevitably use them outside Wikipedia or imitate the template. Finding agreed upon reliable sources for spatial data, and providing links to those sources, would be a much better way to go about this. This endeavor is the best example of the Dunning–Kruger effect I've ever seen... GeogSage (talk) 07:56, 24 February 2026 (UTC)

@GeogSage: It seems you feel very strongly about use of maps on Wikipedia. Instead of addressing a specific series of maps Timeshifter and I made, do you think it might be sensible to raise it somewhere more prominent and general, perhaps the Village Pump or even at Wikimania, so that the community can fully debate these issues?

Please bear in mind that Wikipedia is a voluntary community effort so we volunteers contribute to the best of our abilities. We are not all trained in cartography or QGIS.

Likewise, I contribute sheet music of public domain pieces and travel photographs even though I'm neither a professional musician nor photographer. Wikipedia would be a much smaller place if all contributions had to be of professional level.

You're most welcome to contribute maps of professional standard, and I'm sure the community will appreciate your effort. I would just like to request your understanding that most people cannot reach such standards.

Thanks, cmɢʟee ⋅τaʟκ 11:13, 24 February 2026 (UTC)

I am baffled by your remarks about ethics. A US map with borders for states is a free map. Data can't be copyrighted. Certainly not a short list such as for 50 states. Even in many nations outside the US. The data sources are clearly indicated on the file description page as required by Wikimedia Commons. And the sources will soon be listed at the bottom of the map.

Your other request was for a compass rose, or something similar. Cmglee has agreed to that.

Your other recommendation was for scales and projection info. I don't think those are critical for this type of map. I don't mind them being on the map, but that is up to Cmglee. --Timeshifter (talk) 08:50, 24 February 2026 (UTC)

@Timeshifter You seem to have a very broad idea about what is "free," and even if it is free to use, it still needs to be cited. There are many reasons for that, first because a lot of work goes into creating those lines, and it is important to acknowledge that. Second, w:cartographic generalization means that map borders will vary depending on who created them. There isn't one set of map borders, there are many, made by different organizations, for different purposes, with different levels of accuracy. It is important to document where you found the enumeration units used in a choropleth map. As Maps on Wikipedia are able to be used outside Wikipedia, it is highly likely that they will become separated from the file description on other websites. Source information should be contained within the image itself so those users can know what was used, it is basic cartographic conventions. Fundamentally, a map in itself can be considered original research, there are journals that publish them. It is important that you provide the means for a person to recreate your map from the raw data, so they can check for bias or error.

@Cmglee: Yes, I understand you are not trained in cartography or QGIS, which is why your confidence is completely misplaced. The video I linked is 11 minutes long, not a major commitment. ESRI has 21 publicly available Web courses you could look at if you want to learn more. Developing a template for maps is probably something you should probably not do unless you have some knowledge of basic cartography. If someone's English is inadequate to convey information, their grammar is poor, their word choice misleading, we do not just accept that it is fine because they are volunteers. If someone can't code, we don't just accept a buggy bot because a volunteer made it. If someone can't do basic statistics, we will not accept the results of their analysis. More goes into maps then most people know, and because most people don't even know enough to know what they don't know, we have confidently incorrect misleading maps making up the majority of the ones on Wikipedia. A bad map is worse then no map at all. Most of the maps on Wikipedia should probably be deleted for misrepresenting the underlying data, if it was text instead of a map it wouldn't even be a discussion. Unless you're planning on building your own small GIS, there isn't really a way to make choropleths with a single default template. A template with multiple scales, projections, without indicating the projections or scales, no way to change color, no way to change the number of or size of class breaks, is a giant leap in the opposite direction. Don’t let defaults drive your design. Doing so flies in the face of multiple organizations ethical standards, and multiple sources across a century. I've been attempting to get momentum and raise the alarm about bad maps on Wikipedia, and ideally would like to see the MOS expanded to cover them. A major issue is people literally do not know enough about this topic to discuss it, but will confidently jump into discussion to express that they don't think it is a big deal. I can cite peer-reviewed publications, experts discussing ethics, textbooks, and point to examples, but it doesn't really matter if people don't read them or think that they know better. Literally a movie cliche when it comes to experts trying to explain something to people who find that information inconvenient to what they want to do. GeogSage (talk) 08:06, 26 February 2026 (UTC)

This discussion reminds me of the history of Wikipedia and Nupedia and Citizendium. --Timeshifter (talk) 14:22, 26 February 2026 (UTC)

@GeogSage: Please file your objections on Commons:Graphic_Lab/Map_workshop and/or en:Wikipedia:Graphics_Lab/Map_workshop.

I've nothing more to add on this topic, and shall defer the addition of orientation marker and source line which I had discussed with @Timeshifter until the community has come to a consensus (please ping me if/when that happens).

Cheers, cmɢʟee ⋅τaʟκ 18:44, 26 February 2026 (UTC)

Map orientation indicator

I like the small simple compass rose on this map:

I think it would be better placed if it was higher up, tucked below Alabama and the panhandle of Florida. That way the legend wouldn't have to be moved down to accommodate it.

There are many map orientation indicators. See compass roses on the Commons. See this Google Image search.

I like having just the 4 directions. So that there can be discussion of the east and west coasts. Or the south.

There are 2 free ones on the Commons that would work:

Since they are both SVG files they can be any size.

But I like the compass rose on the above map better. Because it is more compact, and the letters are bigger at map thumbnail sizes.

You could copy it from the map. Simple compass roses are not copyrightable as single elements since they are simple. See {{PD-shape}} and {{PD-ineligible}}. So there would be no problem copying it to the template. --Timeshifter (talk) 02:13, 23 February 2026 (UTC)

@Timeshifter: On the template, there's space to the east of Florida. It's trivial to add the eight-direction one: just underlay a scaled and rotated copy. Would @GeogSage: be satisfied with either? cmɢʟee ⋅τaʟκ 08:44, 23 February 2026 (UTC)

The choice of north arrow/compass rose is something that is mostly personal preference, and while there are heated debates on what the best choice is, it is not usually one of the places people get caught up on. There are some arguments, but it is pretty far down the list of priorities for splitting hairs over. GeogSage (talk) 09:11, 23 February 2026 (UTC)

The compass rose is ERSI North 15, on of the default options within ArcGIS Pro. It is my go to option personally. I should note that I'm not sure what the copyright on the compass rose within ESRI software is, they might not be okay with it being used as a separate element creating maps outside their software. I know that QGIS uses separate North Arrows and has a narrower selection, and have suspected this is because ESRI has kept them from using theirs. GeogSage (talk) 09:06, 23 February 2026 (UTC)

Google image search: compact large text 4-point compass rose with N S W E available for free. The regular Google search explains the sources.

But why bother. The one GeogSage and I like definitely qualifies for {{PD-ineligible}} or {{PD-shape}}. See their categories: Category:PD ineligible and Category:PD shape. I prefer that compass rose because it uses larger bold text for the compass directions. And it is more compact.

I prefer the compass rose be to the west of Florida. I use the space to the east of Florida for text on non-neutral maps used outside of Wikipedia. For example:

• https://cannabis.shoutwiki.com/wiki/File:Map_of_US_minimum_wage_by_state.png

--Timeshifter (talk) 13:34, 23 February 2026 (UTC)

I'm not 100% sure it is ineligible for copyright, a stylized compass rose within ESRI's symbol library, like other symbols in ESRI's library, is a bit more then a simple symbol. Many cartographic symbols are not free use, and you have to pay for the libraries. Using them in a map produced by the software is one thing, making the symbol available to make maps that don't use the software is another beast. GeogSage (talk) 18:06, 23 February 2026 (UTC)

From the U.S. Copyright Office: What Visual and Graphic Artists Should Know about Copyright.

U.S. Copyright Office: Compendium Chapter 900. Visual Art Work. Scroll down to 906.2 - Familiar Symbols and Designs.

Examples follow there that are enlightening.

U.S. Copyright Office: Works Not Protected by Copyright. Scroll down to "Typeface, Fonts, and Lettering"

Now for the tricky part. Font software:

• Fonts and typefaces - When do you need a license. By Nancy Wolff and Junyi Wu. Here is an interesting part:

The font software part of U.S. Copyright Office is this:

• Circular 61. Copyright Registration of Computer Programs.

There is no copyright for a compass rose. It is a very old symbol with many variations. Secret is to copy it without using ESRI software.

If all else fails, we can use a text-based compass rose:

Text within pre tags uses the browser-defined default monospace font.

     N
     |
W<---+--->E
     |
     S

The other compass roses below are set to Courier New which is included in all Microsoft OSs and Apple products for a long time. Courier New includes arrows. Right and left pointing ones don't line up with the + sign though.

--Timeshifter (talk) 01:12, 24 February 2026 (UTC)

Most of what you're describing is "letters, numbers, or other characters." You have a very liberal interpretation of copyright. Including ESRI stuff as options for templates that attempt to (poorly) replicate GIS is asking for trouble. GeogSage (talk) 07:33, 24 February 2026 (UTC)

You are talking about U.S. Copyright Office: Works Not Protected by Copyright. Scroll down to "Typeface, Fonts, and Lettering". I quoted it higher up, and it has the info on "letters, numbers, or other characters".

I could take a screenshot of the compass rose in your enlarged map, and save it as a PNG file. Then convert it to SVG for free online here:

• https://www.freeconvert.com/png-to-svg

If worried, which I am not, I could change it slightly in the SVG code.

The Shake Shack case described above says this is legal for non-copyrightable items in font software. Case was dismissed with prejudice:

• https://law.justia.com/cases/federal/district-courts/new-york/nysdce/1:2022cv07713/586084/27

--Timeshifter (talk) 08:35, 24 February 2026 (UTC)

But if Cmglee could somehow make the N S W E larger in the free Commons compass roses, then we avoid any problems with the above method.

These are the 2 free ones on the Commons that were previously discussed:

Since they are both SVG files they can be any size larger or smaller.

The second one was put in the public domain by the creator. O needs to be changed to W. O is for Ouest in French. --Timeshifter (talk) 09:16, 24 February 2026 (UTC)

Compass roses are not typeface. Even if they were, "fonts can be protected by design patent, and computer programs that implement typefaces may be protected by copyright." See w:Intellectual property protection of typefaces. Using a compass rose, named ERSI North 15, that is embedded within ESRI software, in a template to create maps without ESRI software is a really blurry line. GeogSage (talk) 17:24, 26 February 2026 (UTC)

Thanks for the link.

I found this on a Google search: For complex, non-standard, or highly designed text, the recommended solution on Wikimedia Commons is to convert the text to paths (outlines) in software like Inkscape

It seems though that there are free compass roses in some free font software:

• https://www.google.com/search?q=are+there+any+compass+roses+in+free+fonts

--Timeshifter (talk) 01:32, 27 February 2026 (UTC)

@Timeshifter: I wonder where Google got that from. Unless the exact font and layout are important (as in logos, road signs or obscure languages), text should not be covered to paths, to allow updates (correcting mistakes or outdated data), indexing by search engines or translation to other languages. cmɢʟee ⋅τaʟκ 04:04, 27 February 2026 (UTC)

@Cmglee: The free font DejaVu Sans has some compass roses. I see some here:

• https://www.google.com/search?q=compass+rose+in++DejaVu+Sans

Best Symbol Candidates: The most relevant symbols to act as a simple, four-point or eight-point compass rose within this font are:

   ✦ (Black Four Pointed Star)
   ✧ (White Four Pointed Star)
   ✢ (Four Teardrop-Spoked Asterisk)
   🧭 (Compass, though Unicode support varies)

I pasted the relevant part of the Google result above. Wikimedia uses DejaVu fonts. And so the symbols show up. Maybe you can add N S W E with one of them. Let me try blowing them up larger with 2 big tags:

✦ ✧ ✢ 🧭

<span style=font-size:30px;>
✦ ✧ ✢ 🧭

More options:

• https://www.google.com/search?q=css+for+font+size

I've almost got it below. Using DejaVu Sans and DejaVu Sans Mono:

I know that in the SVG file you can nail down the N S W E characters exactly where you want them. I remember moving the state and value spots around within some states. --Timeshifter (talk) 08:06, 27 February 2026 (UTC)

Part 2 of map orientation

@Cmglee: You wrote elsewhere: I've also added a simple compass rose. It was a squeeze above the legend, so I placed it off the Georgian coast. The alternatives are above Michigan, or between Alaska and Hawaii. Hope there's enough space for your annotations.

Thanks for all the work! The shape and character size is perfect. I see the code for it just before the generator section

I like the fact that the direction characters are easily readable even at small thumbnail image size.

Maybe you can make an SVG file for this compass rose and upload it to the commons. That way other mapmakers can use it. It is easily the best free compass rose that I have seen. I think you created one arm ("quarter") and rotated it.

I prefer it under Alabama here:

<g transform="translate(655,510)">

Higher up east of Florida would work too. So that the bottom of the "S" lines up with the bottom of "n/a". That provides the maximum space for text below it. See:

<g transform="translate(823,409)">

Text in that space below the compass rose needs to be as high up as possible. And it should be left-aligned, and should avoid getting too close to the corner. That is because social media sites sometimes round corners of images to varying degrees. See:

Do some social media sites round the corners of non-profile images when posting.

--Timeshifter (talk) 22:45, 1 March 2026 (UTC)

@Timeshifter: thanks and you're welcome. It would look rather cramped moved up. How about between Alaska and Hawaii, also hinting that both are insets and not geographically located there? cmɢʟee ⋅τaʟκ 02:16, 2 March 2026 (UTC)

I think some inset borders as in the map to the right should be added. Note that in that map the space to the right was used for notes. It is a natural location for notes.

Without the insets some people may think that Hawaii and Alaska are close to the continental US.

Adding insets would mean a compass rose would not fit between Alaska and Hawaii.

A scale for the continental US could be added below the legend.

But that almost requires scales under Alaska and Hawaii too. Otherwise some people will assume the continental scale also applies to the insets too.

That would require adding another 3 lines on the bottom for the scales. I don't mind this.

Also, the inset border for Hawaii would need to spread more to the east in order to make room for a scale for Hawaii. Assuming the scale is like the scale here:

• File:USA Contiguous Poverty 2020.jpg - see this map at the top of this topic thread.

I guess with the additional 3 lines there is less need to move the compass rose higher from its current location. I would be happy with it below Alabama too. Either way would be fine by me if 3 more lines had to be added for the scales.

Thanks for posting the compass rose to the Commons! --Timeshifter (talk) 07:15, 2 March 2026 (UTC)

cmglee. I forgot to ping you in my last reply. --Timeshifter (talk) 07:19, 2 March 2026 (UTC)

@Timeshifter I'm not very inclined to suddenly make so many new changes, especially the scale. I was already not terribly keen on the source line, but as it can be repurposed, I accepted it.

Being a significant portion of the globe, wouldn't the scale vary across the map, regardless of projection? Most maps on Commons, especially small-scale ones do not indicate the scale.

As I advised GeogSage, if you feel that these things are essential, please raise it in a wider forum and I'm more likely to be persuaded if the community agrees.

Cheers, cmɢʟee ⋅τaʟκ 13:11, 2 March 2026 (UTC)

cmglee. Wow, a lot of work. Thanks! I like the inset lines, and the compass rose location. Its location implies that it applies to the insets too.

I don't know about the scale varying across the continental US map. I was just trying to find a way to indicate that the scale is different for the insets.

Could just say it above the legend: "The scale for the continental US, and the 2 insets are all different." Some people probably don't know this. --Timeshifter (talk) 21:17, 2 March 2026 (UTC)

Thanks. Re scale, how about having it in the file description page (and a footnote from the caption, if needed)? cmɢʟee ⋅τaʟκ 00:22, 3 March 2026 (UTC)

@Cmglee: The image caption under the image on a Wikipedia article, usually only describes the image, and links to a reference. I don't remember seeing discussion of scale. Or a link from the caption to the file description page. I guess people could mention scale, and link to the file description page. But I doubt hardly anyone will do it. --Timeshifter (talk) 05:01, 3 March 2026 (UTC)

@Timeshifter: Please see en:Wikipedia:Reference_desk/Science#Scale_bars_on_a_small-scale_map. Thanks, cmɢʟee ⋅τaʟκ 01:38, 4 March 2026 (UTC)

@Cmglee: I read that thread, and looked at this video it mentioned:

• https://www.youtube.com/watch?v=xGEEfT1JS6w -

At 3:25 in the video a US map is discussed. It is the same conic projection as ours, I believe. Recommends not having north arrow. I think north arrows to the left and right of the map might work. Not a compass rose. But it would probably confuse people. A graticule on the areas outside the map would interfere with callout lines. It would interfere with borders within the map.

So I guess it comes down to a cost/benefit analysis. GeogSage wrote elsewhere: You're relying on the convention that North is at the top, that users know that, and that users know the orientation of the U.S., Hawaii, and Alaska. It is bad form. In my intro classes I do an experiment every year where I have them label a compass rose; roughly 2% can't do it.

I guess that 2% is enough that GeogSage put a compass rose in his above map below Louisiana. It is accurate there. It is the same Albers equal-area conic. I think we should do the same. And your compass rose should be smaller, as his is. So it fits above the legend. And the legend can be moved down a little. I tried on another wiki:

• https://cannabis.shoutwiki.com/wiki/File:Template_map_of_US_states_and_District_of_Columbia.svg

From file history: "Compass rose moved under Louisiana (needs to be smaller). Legend moved down as far as possible. Needs to be moved up after compass rose made smaller."

I also added another spot for a note. "Note2". So I can do more with the SVG map off of Wikimedia. I just copied the other note and replaced "Note:" with an SVG non-breaking space. The format needs correcting. I don't know how to do that.

Look at smaller compass rose size here:

• File:USA Contiguous Poverty 2020.jpg

--Timeshifter (talk) 03:30, 5 March 2026 (UTC)

Part 3. Accurate north-south

@Timeshifter: Yes, I think having a smaller one where the directions are correct is best. As I'm away from my computer for several days, would you mind extrapolating the north-south straight borders of the states to find out the x-coordinate where they converge? I can then move the compass rose to the exact meridian. Thanks, cmɢʟee ⋅τaʟκ 12:42, 6 March 2026 (UTC)

@Cmglee: It looks like the Kansas-Missouri border is very close, if not perfectly, north-south.

Google search: Do kansas and missouri have part of a border that is straight north-south.

From various Google search results:

Yes, the border between Kansas and Colorado is a, roughly, straight north-south line. Yes, the majority of the border between Kansas and Missouri is a straight north-south line. Yes, the majority of the Illinois-Indiana border is a straight north-south line. Yes, Ohio and Indiana share a border that is almost entirely a straight, vertical north-south line. This boundary runs directly north from the junction of the Ohio River and the Great Miami River to the Michigan border.

--Timeshifter (talk) 19:58, 6 March 2026 (UTC)

@Timeshifter: thanks for finding out, though I think extrapolating the known meridianal borders will give more accurate results. Cheers, cmɢʟee ⋅τaʟκ 12:32, 7 March 2026 (UTC)

@Cmglee: Google: what is longitude of north-south Kansas-Missouri border. Google AI result:

The north-south Kansas-Missouri border, which acts as the eastern boundary for Kansas (south of the Missouri River), is located along the meridian 94° 36' 42" West (approximately 94.61 degrees west). This straight-line boundary extends from the Missouri River southward to the 37th parallel north.

I am just guessing that this is a true north-south line on this map projection. By looking at how the other north-south lines lean towards it.

I don't know what you mean by the "x-coordinate where they converge".

I assume you mean where they converge above the map since it is a conic projection. But I don't know how to figure that out. --Timeshifter (talk) 13:59, 9 March 2026 (UTC)

@Timeshifter: yes, I meant that if the compass is placed on the same vertical line under where these supposed north-south boundaries converge above the map, it will indicate the cardinal directions correctly. Anyway, close enuough is good enough – updated in today's version. cmɢʟee ⋅τaʟκ 09:31, 18 March 2026 (UTC)

Space for source on bottom

cmglee. I would like space available on the very bottom of the map below the legend for info on the data sources. A .source parameter.

I would like it to be one of the generator script parameters. I would like its text size to be one of those script parameters too. And I would like as much space provided as needed for the parameter text.

And I would like no additional white space on the map bottom if that parameter is not filled in. --Timeshifter (talk) 01:59, 23 February 2026 (UTC)

@Timeshifter: Making the SVG height conform to the amount of text is tricky. SVG doesn't work that way: one specifies a canvas size and populates it with whatever. I can leave space, but every image produced from it will have that amount, whether it's filled or not.

As I wrote before, I disagree that the source should be in the image. Almost no images on Wikipedia have them. The source properly belongs on the file description page. cmɢʟee ⋅τaʟκ 08:48, 23 February 2026 (UTC)

@Cmglee: Some chart and map creators routinely add the source. See some of the maps here:

• Category:GDP maps of the United States

I try to add the source. See example:

It makes the data more credible instantly without having to go to the file description. Which many readers are not used to doing, and if they do, may not read down to the source. Especially if there is a long description.

Also, many maps and charts are copied outside of Wikimedia without linking back to the file description page. They may just mention Wikimedia Commons, without a link. Or a link just to the Commons main page.

I think you should add just one line at the bottom for the source. That is a very small amount of white space if it is left blank. It will never be left blank by me. And I will add the source to maps by others. --Timeshifter (talk) 14:15, 23 February 2026 (UTC)

@Timeshifter: All right, I'll leave space for one line of text with the same font and size as the state names. cmɢʟee ⋅τaʟκ 16:30, 23 February 2026 (UTC)

@Cmglee: - I hope you are not waiting on adding a source line. There is nothing that could legally block that. The font family listed in your template works on and off Wikimedia:

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

Especially since the first font, Liberation Sans, is totally free. So even if the Wikimedia image software gets buggy again, and only looks at the first font before defaulting to other fonts not even listed in the font family, then we still got Liberation Sans.

But that Wikimedia software problem has been fixed. See:

https://www.google.com/search?q=can+wikimedia+image+sofware+now+go+down+the+list+of+fonts+in+an+SVG+file+until+it+finds+a+free+font

I just uploaded an OWID map after removing this problematic style in the SVG file as I have done in the past:

<style>@import url(https://ourworldindata.org/fonts.css)</style

File:World map of homicide rates per 100,000 people. OWID.svg

The OWID font family:

style="font-family: Lato, "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;

I assume Wikimedia is using Liberation Sans since the other ones aren't free. When I open the downloaded file on my PC I am seeing a different font for the top caption.

All this to say that you have covered all the bases for adding a source line.

--Timeshifter (talk) 02:00, 27 February 2026 (UTC)

@Timeshifter: is it something you originally wanted or merely in response to GeogSage's critique? If the latter, I'd rather wait to hear what the community decides before changing the template, as it's likely further changes are needed. Personally, I prefer having sources in the Commons file description page as most diagrams in Wikipedia/Wikimedia don't have sources in the image itself. cmɢʟee ⋅τaʟκ 03:50, 27 February 2026 (UTC)

Yes, I want to add sources myself, and as I said I before I have already been adding sources to images. I found some other images I added the source to:

• File:OECD incarceration rates by country.gif
• File:US annual marijuana arrests chart - NORML.png

I have been adding text to the maps from this SVG template map. After converting them to PNG. But there is no room left then for the source. A source line at the bottom would solve that problem. I use the maps and charts I find on Wikimedia on other wikis, Facebook, etc.. The Fandom wiki makes it very difficult to get to their file description page if you are not logged in. So the source directly on the map would help viewers elsewhere.

It is difficult to add source links, or any link, with the image on Facebook image posts without Facebook trying to open the link. If people on Facebook download the image for other use, or to pass on, they need the source directly on the map to know the data is credible. There is so much misinformation on social media, and so people need the source. --Timeshifter (talk) 17:49, 27 February 2026 (UTC)

@Timeshifter: All right then. I've uploaded a version allowing a line of sources at the bottom and named the JavaScript variable is named out_source.

I've also added a simple compass rose. It was a squeeze above the legend, so I placed it off the Georgian coast. The alternatives are above Michigan, or between Alaska and Hawaii. Hope there's enough space for your annotations.

How is it now? cmɢʟee ⋅τaʟκ 18:33, 1 March 2026 (UTC)

@Cmglee: Thanks! The source line is perfect. I will respond about the compass rose in the above section to keep discussion in one place per topic. --Timeshifter (talk) 21:02, 1 March 2026 (UTC)

Subtitle and lower-right-side text

I would like a way to occasionally add additional text under the .title text. Also, in the space to the lower right side of the map. I know it can be done. See

• svg code for left-aligned wrapping text in an irregular box.
• Image search shows examples.

I want to do this for Wikimedia images, and for images off of Wikimedia. Example of the .subtitle irregular box containing space for 2 lines of text of varying text size (depending on the importance and amount of text):

• https://cannabis.shoutwiki.com/wiki/File:Map_of_US_minimum_wage_by_state.png

Both lines can extend to the right until they approach New Hampshire text. The top line can start above the Idaho tip. The bottom line has to start above the right end of Montana.

If this were done I could use SVG images instead of PNG images off of Wikimedia.

On Wikipedia I sometimes want to clarify further what a map is about.

Some additional info that some may want to add on the lower right:

• D.C. = Washington, D.C.
• Puerto Rico rate and/or rates for some of the other 5 permanently inhabited territories.
• Any other info

The lower-right text can't go all the way to the corner. Some social media sites sometimes round the corners of images posted to the site to varying degrees. See:

• Some social media sites sometimes round the corners of non-profile images posted to the site.

I want the maximum text space, and so I want a rectangle that extends to the right all the way to the end of New Jersey above it. On top I want it close to the D.C. value. I want the box to extend close to the eastmost part of Florida. I want it to go all the way to the bottom of the source line.

The box will need a small rounded corner on the lower right to allow non-interfering rounding by social media sites. And the text needs to be left-aligned to allow maximum rounding. --Timeshifter (talk) 22:43, 1 March 2026 (UTC)

cmglee. I forgot to ping you. --Timeshifter (talk) 22:48, 1 March 2026 (UTC)

@Timeshifter: though adding more text strings is feasible, it's starting to get messy programmatically to have all these variables to update. Additionally, SVG does not do line wraps natively. How would an editor specify a multiline string for the bottom-right box? cmɢʟee ⋅τaʟκ 02:12, 2 March 2026 (UTC)

@Cmglee: Google searches pull up these snippets:

Detailed info from Google AI here:

• https://www.google.com/search?q=use+%3CforeignObject%3E+to+embed+HTML%2C

As to messiness, people who use the template have the choice of using the default text sizes. And they don't have to fill out all the text fields. --Timeshifter (talk) 07:35, 2 March 2026 (UTC)

@Timeshifter: After encountering this issue with foreignObject, I don't think we should use it before it's widely supported, in particular by rsvg and common browsers. cmɢʟee ⋅τaʟκ 12:59, 2 March 2026 (UTC)

P.S. I've added byline and note fields, demonstrated formatting of text, moved the orientation indicator and added inset separators. I decided to use the standard \n newline character for hard line breaks; the editor is responsible for breaking the text and checking that it fits. All four text fields supports line breaks but it's not very useful for source. cmɢʟee ⋅τaʟκ 14:36, 2 March 2026 (UTC)

cmglee Great work! Thanks again. I would prefer that the source line go all the way across the bottom of the map. Sometimes it is needed for complex quality source info, URL, etc.. I will be adding source info to all the existing maps, and I will need the room in some cases. --Timeshifter (talk) 21:12, 2 March 2026 (UTC)

@Timeshifter: my pleasure. Simply add more text to out_source. It is left-justified, and will go all the way across the image and beyond, overlapping the note. It's up to the editor to ensure that neither is long enough that it happens. cmɢʟee ⋅τaʟκ 00:25, 3 March 2026 (UTC)

Background color choices

I like the addition of the diagonal lines in the .n_a states:
.n_a { fill:url(#pattern_n_a); }

In the instructions I am going to list the background color pairs that work with black text in the template. Along with some example maps. So far:

Is there a way to show an older version of the template map? How are the older versions shown in the file history? --Timeshifter (talk) 06:29, 4 March 2026 (UTC)

cmglee. I forgot to ping you. --Timeshifter (talk) 06:09, 4 March 2026 (UTC)

@Timeshifter: Thanks. I don't know how to do it. Try asking them Computing reference desk. Perhaps it might be better to create another example to show a different use-case, a diverging one such as Republican/Democrat split? cmɢʟee ⋅τaʟκ 07:02, 4 March 2026 (UTC)

cmglee. I would like to list more color pairs that work with black text and pass the contrast checker tests.

I found the html code for the previous map version thumbnail in the file description page source:

<a href="//upload.wikimedia.org/wikipedia/commons/archive/5/58/20260304030813%21Template_map_of_US_states_and_District_of_Columbia.svg"><img alt="Thumbnail for version as of 09:32, March 2, 2026" src="//upload.wikimedia.org/wikipedia/commons/thumb/archive/5/58/20260304030813%21Template_map_of_US_states_and_District_of_Columbia.svg/120px-Template_map_of_US_states_and_District_of_Columbia.svg.png" decoding="async" loading="lazy" width="120" height="80" data-file-width="512" data-file-height="341"></a>

What do you mean by a Republican/Democrat split? States with majority Republican in both houses? There are various combinations when the governor is thrown in. See:

• List of U.S. state legislatures

I don't know how that would be color-coded on the template map. Wouldn't it have to be done manually? --Timeshifter (talk) 07:24, 4 March 2026 (UTC)

@Timeshifter: I'm not fully aware of how politics works in the US but was thinking of some measure of support for either party, so one can legitimately have states colored blue at one end and red at the other (what GeogSage called a divergent color scheme).

I've also been thinking of the idea of automatically making the labels white when the background is too dark. It won't work as some labels cannot fit their state, so will run into the white background. These parts will not be visible if the text is white. Other than outlining the text, this means that all the colors must be light enough that black text on them is legible. cmɢʟee ⋅τaʟκ 12:11, 4 March 2026 (UTC)

P.S. Just brainstorming about your color pairs idea, is it true that if the min and max color pass contrast tests, then anywhere on the gradient will also pass? If so, is it possible to construct an R vs G vs B plot with regions of valid colors? It's definitely doable with a 2D plot. One might need contour lines to handle three variables R, G and B. cmɢʟee ⋅τaʟκ 12:18, 4 March 2026 (UTC)

I believe that with the above 2 color pairs all the colors on the gradient pass this contrast tester:

https://webaim.org/resources/contrastchecker

To use both white and dark text looks like it would require blocking some background colors that wouldn't work with either black or white text. Maybe separate color ranges. One for black text, and one for white text.

I don't know what you mean by R vs G vs B plot with regions of valid colors?

some labels cannot fit their state. That is easy to fix with dashes, except for West Virginia. It would have to be named by its abbreviation: WV.

Outlining the text doesn't seem to work well from what I have seen. --Timeshifter (talk) 13:37, 4 March 2026 (UTC)

@Timeshifter: I was thinking of a plot similar to https://holmen.imagevault.media/publishedmedia/jl2xgs8w1nbn5yqvtsed/s229_firm_red.png but with axes being red, green and blue components, so that editors can quickly check which colors give acceptable contrast. Not sure how to make a 3D plot though.

Let's just use black text without outline as is current then. I'll leave you to preselect workable colors. Cheers, cmɢʟee ⋅τaʟκ 16:48, 4 March 2026 (UTC)

See note next to compass rose

cmglee: See my latest experiments on the Fandom wiki here. Note the many test sizes below it. At smaller thumbnail sizes the compass rose works fine at its current size.

I centered the compass rose better. I don't think we need perfection as to its location. I put the note about different scales next to it.

That leaves space for an optional note on the bottom right. I expanded the number of lines in the explanatory text there. This is because there is room now after I moved the legend and source lines down a little. This way the legend line is not squeezed up close to the compass rose.

I think I have the correct SVG code at the top for the 2 notes, their placement, etc..

I worked on the generator script. It seems to be working correctly. --Timeshifter (talk) 13:06, 15 March 2026 (UTC)

@Timeshifter: updated in today's version. cmɢʟee ⋅τaʟκ 09:29, 18 March 2026 (UTC)

Lines on legend gradient

cmglee. I think the lines should be removed. The lines break up the legend into 10 bins.

But I see the number of bins vary between 5 to 7 bins depending on the map. See maps using template:

• Category:English-language SVG choropleth maps of the United States with visible numbers. Made with templates

I removed the pattern_legend SVG code in my map testing here. --Timeshifter (talk) 14:19, 17 March 2026 (UTC)

@Timeshifter: updated in today's version. cmɢʟee ⋅τaʟκ 09:28, 18 March 2026 (UTC)

Note1, Vermont callout line, and image border

cmglee. Thanks for all the updates! I like how the scales info is spread out more. And the smaller compass rose means less need to increase the image height to accommodate it. I need to update the instructions concerning the parameters for note1 and note2.

I experimented with note1. See here. I discovered that the image does not expand to the right to accommodate the note1 text. A good thing since I like keeping the map compact in order to be more understandable even at thumbnail size.

I think my note1 text helps people see the possibilities for it. The code for italic and bold is on adjacent lines in the SVG code at the top, and in the generator text at the bottom. And the fill code is right there too for the color. So people without SVG knowledge can figure it out fairly easily. Especially with the min/max color options in the instructions showing how the color codes work.

I think a 1px border would help with people experimenting with the note1 text. They can see how much room they have. Currently I can only see the image edges after uploading a map, and looking at the test section which has borders added. I usually add 1px borders to raster images I upload. Via freeware Irfanview.

I did some searches and couldn't figure out a way to add a 1px border to the map that stays sized to the map as it is zoomed via playing with the browser width. There were multiple complicated options. That is beyond my current knowledge.

I think the Vermont callout line needs to be moved over to the right a little bit so it is clearly pointing to Vermont. I couldn't figure out where to do that in the SVG code.

Oh, and I added a period after "Centers for Disease Control." The comma seemed confusing. --Timeshifter (talk) 19:41, 18 March 2026 (UTC)

@Timeshifter: Updated. I moved bits of code related to layout together, causing the states to be drawn on top of the leader lines. I've thus moved all of it under the states so that they are drawn after the states, and are still kept together.

I've updated note 1's content. I wrote earlier that it's up to the editor to ensure that neither is long enough that it happens. SVG is not aware of layout and will write off the view window. The alternative, foreignObject is not well supported.

I don't think it's possible to have a shape which doesn't scale when zoomed in. Other than making the background non-white, you can display the SVG directly at 100% (without zoom) in a browser. It should fit into either its width or height, depending on the window's aspect ratio. By resizing the window, you can find the sweet spot where it exactly fits both.

Feel free to make minor changes (like the period, which I've done) to the file, ensuring any changes to the GENERATED_CONTENT group is reflected in the JavaScript. Cheers, cmɢʟee ⋅τaʟκ 07:17, 19 March 2026 (UTC)

Thanks again! I copied the SVG code from your latest upload and the previous upload into a sandbox. Then I compared the revisions to see what was changed. See diff.

I found the inset and callout code. I tweaked the callouts for accuracy in where they pointed. I also made them black as opposed to gray. Black provides better contrast when the callout lines cross states with the darkest background color. This happens in some maps.

I added a hidden note above the callout code. Pointed out that the code is in order by the callout states going down.

Uploaded the map with the changes. --Timeshifter (talk) 12:51, 19 March 2026 (UTC)

@Timeshifter: My pleasure.

Good call making the leader lines black. However, moving the endpoint of Vermont's makes it no longer roughly parallel to the upper ones. Can you move its bottom end to the left? I think it's ok if it slightly crosses New York, since DC's (for example) also crosses several states.

Additionally, the border between the insets are also now unnecessarily bold. I think grey doesn't draw the eye as strongly.

Thanks, cmɢʟee ⋅τaʟκ 15:47, 19 March 2026 (UTC)

I had cataract surgery in January on both eyes. It's like having slightly amber sunglasses removed from your eyes. Great improvement in focus, clarity, and accuracy of colors I am seeing.

Contrast did not work nearly as well before for me. Also, light blue shirts on videos looked light green. That is because blue plus yellow (amber) equals green. I did not even know this was happening until one eye was done. Then I could alternate looking at stuff with each eye. Quite amazing.

So I prefer having accuracy of the callouts over style considerations like being parallel. Even a fully black line over the darkest states combined with the unclear border lines at thumbnail sizes can be difficult for many people.

About the inset lines going back to gray. This particular gray over white background fails all the contrast tests:

• https://webaim.org/resources/contrastchecker/?fcolor=C0C0C0&bcolor=FFFFFF

This gray passes the large text and "Graphical Objects and User Interface Components" tests:

• https://webaim.org/resources/contrastchecker/?fcolor=949494&bcolor=FFFFFF

That is as light of a gray that would work since it passes just the basic contrast tests. It does not pass the small text test. Not necessary since it is for a border, and not for reading.

There is a slider to make the gray darker or lighter. The "permalink" below the contrast ratio has the above links. --Timeshifter (talk) 16:58, 19 March 2026 (UTC)

cmglee. I changed the inset lines to #949494 gray per previous post. I also added some hidden notes and instructions. Mainly to help me make more maps, or tweak existing ones, without having to look at the detailed instructions. They may allow others to make maps too without having to RTFM. --Timeshifter (talk) 06:39, 21 March 2026 (UTC)

cmglee Whatever I did broke it. I reverted back to the last working version on March 19, 2026. The last one uploaded on that day works. I used that version to update the minimum wages map to the newer format. Upload worked fine.

Here is a sandbox diff between the last working version on March 19, 2026 and the following version on March 21 (first one on that day) that broke it. --Timeshifter (talk) 20:20, 21 March 2026 (UTC)

Generator script reset. Must save via "Web Page. Complete"

cmglee. You may have read my previous post about the generator script not resetting. I deleted it because I discovered that both the problem and the solution were much simpler than I thought.

Only Firefox works. To get the generator to reset, and to make the generator-section changes permanent in the upper SVG code, one must save the SVG map page as "Web Page. Complete (*.svg;*.svgz)". That disables the script.

Saving as "Web Page. SVG-only (*.svg;*.svgz)" does not work. One may see the changes on the map page, but the changes are not made in the upper SVG code. The script is still active.

That SVG page with the active script can not be uploaded to the Commons. I tried. One gets this upload warning: "Found scriptable element 'script' in the uploaded SVG file." --Timeshifter (talk) 16:38, 20 March 2026 (UTC)

@Timeshifter: Many thanks for investigating and reporting your findings. I had previously simply done Ctrl-S in Firefox and didn't see the option to save as SVG only.

I had designed and programmed the JavaScript to comment itself out so that there is no longer an "active script" but it is easy for an editor to reactivate it.

Cheers, cmɢʟee ⋅τaʟκ 13:22, 22 March 2026 (UTC)

Compare and contrast maps

I found this map: File:US Breweries Per One Million People By State 2012.pdf

Both maps below are 450px wide. Border has been added via image wikitext to the template map:

[[File:Template map of US states and District of Columbia.svg|450px|none|border]]

If you select both maps, you can see that they align perfectly on the bottom.

Alaska and Hawaii look to be the same size on both maps. But they are fitted much more compactly on the template map. It looks like Alaska is missing many westward islands on both maps. Moreso on the template map. See en:Alaska#Geography. I prefer the compactness of the template map. I can see why most maps with Alaska insets do no include all the westward islands.

Another reason for the taller breweries map is to make room for all the map scales. Adding miles to the map scales would make the map even taller. And miles are necessary since many or most viewers of US choropleth maps will be from the US. But I don't think scales are that important. And I rarely see them on choropleth maps. People just need to know that the scales are different. Which they do on the template map.

I prefer the 1px inset border for the breweries legend over the 2px inset border for Alaska and Hawaii in the breweries map. I think 1px black inset borders are better than 1px gray borders.

The compass roses should be in the horizontal middle for all these conic map projections in the breweries map. I don't see the need for adding compass roses to the inset maps on the template map.

The arcane info for central meridian and standard parallels serves no purpose for nearly all viewers of the breweries map.

The vertical legend breakdown is nice. Would it be possible for the generator script to create that automatically? It would have to be able to do this for different numbers of bins. That vertical legend could be put where the side note is in the template map. The bottom legend could be removed. Vertical height of the template map would remain the same. The vertical legend usually does not need a title. The overall map caption explains what the numbers are for.

I think the byline is unnecessary for the maternal mortality map. It is necessary for some maps. Maybe in the template it could say. "Note: This byline text area can be filled in or not depending on the need. Feel free to leave it blank." I am trying to make this note long enough to fill and show the available space.

I prefer having a 1px border versus doing without one. See Google search:

• can a border be added to an SVG map.

All in all, I think the current template is very good, and will be updating all the maps to add sources. --Timeshifter (talk) 08:31, 23 March 2026 (UTC)

Oops again. cmglee, I forgot to ping you. --Timeshifter (talk) 21:08, 22 March 2026 (UTC)

@Timeshifter: Good analysis. Feel free to update the text strings to whatever is more appropriate.

I'd advise against making bins as such statistics are continuous values (exceptions like number of electoral college votes are rare) so unless each bin is a gradient from its lowest to its highest value, its colour won't reflect the colour that each state is shaded. If, on the other hand, the states have only a handful of colours corresponding to the bins', this is the wrong template for it. Feel free to make another.

I've likely overcommitted on this endeavour and shall give it a rest. I may revisit it in the future.

Until next time, cmɢʟee ⋅τaʟκ 05:58, 24 March 2026 (UTC)

Thanks for all the work! --Timeshifter (talk) 10:01, 24 March 2026 (UTC)

Washington, D.C.

cmglee. I don't think "The nation's capital", etc. is needed. I can't see anyone trying to get that to work. --Timeshifter (talk) 10:08, 6 April 2026 (UTC)

@Timeshifter Fair enough. I just asked Gemini for every way of writing Washington, D. C. and that was one of the suggestions! cmɢʟee ⋅τaʟκ 10:10, 6 April 2026 (UTC)

Overdose map updated with latest template. New color pair

• File:Drug overdose death rates per 100,000 by state. US map.svg

See various color pairs:

• File talk:Template map of US states and District of Columbia.svg/Instructions#Colors

The .max color passes both AA and AAA contrast tests:

• https://webaim.org/resources/contrastchecker/?fcolor=000000&bcolor=CE6BFF

Unlike the .max color here:

• File:Buchanan votes in 2000 presidential election map.svg

It fails one of the AAA tests:

• https://webaim.org/resources/contrastchecker/?fcolor=000000&bcolor=cc66ff

WCAG AAA for normal text.

See WCAG Conformance Levels: How High Should You Aim? Excerpt: "A contrast of 7 to 1 allows users with approximately 20/80 vision to perceive the content without assistive technology. In other words, this Level AAA success criterion allows the web page or content to be used by a wider range of people, without requiring the application of assistive technology, making the content much more accessible." --Timeshifter (talk) 11:11, 13 April 2026 (UTC)

cmglee. Forgot again to ping you. --Timeshifter (talk) 11:12, 13 April 2026 (UTC)

Thanks, @Timeshifter. What colours would you recommend for the Buchanan file that passes and still allows the order of the states to be discerned? I'm fine with a so-called divergent colour scheme, though others contest it. Cheers, cmɢʟee ⋅τaʟκ 14:19, 13 April 2026 (UTC)

@Cmglee: I found the .max color for the overdose map by dragging the lightness slider for the .max color for the Buchanan map until all contrast tests were passed. There is only a slight difference between the two colors. Buchanan color:

• https://webaim.org/resources/contrastchecker/?fcolor=000000&bcolor=cc66ff

Buchanan color:

Overdose color:

Divergent palettes versus various shades of a single color (monochromatic palettes) are a matter of preference in my opinion.

• https://www.google.com/search?q=Divergent+colors+versus+various+shades+of+a+single+color

Google AI on divergent palette: "Requires colorblind-friendly pairs." I need to study this.

On monochromatic palette: "Hard to distinguish between similar middle shades."

From a Datawrapper page: "Diverging shades let you see more differences in the data than sequential scales." --Timeshifter (talk) 18:41, 13 April 2026 (UTC)

Definitely, which is why I prefer multicolour schemes even for non-diverging data. I actually disagree with comments that our earlier schemes were divergent because the midpoint isn't pure grey, which should denote the zero value of divergent data. cmɢʟee ⋅τaʟκ 11:01, 14 April 2026 (UTC)

@Cmglee: I had to get more info:

https://www.google.com/search?q=what+is+a+divergent+palette+on+a+choropleth+map

It seems that all the maps so far have a range and a middle. The legend makes it easy to see the endpoints and the middle. Without the legend it could take awhile to figure out what is going on. One would have to look at the values to figure out the colors of the endpoints.

It seems that the legend is the whole point of a choropleth map. To make it easy to quickly scan a map and see what states are doing better or worse. Then the values makes it even more meaningful.

People, myself included, may not understand the technical terms, but choropleth maps with legends quickly become intuitive to understand. And a diverging palette provides better separation between slices of data. --Timeshifter (talk) 16:08, 14 April 2026 (UTC)

@Timeshifter: So we're ok with multicolour schemes then cmɢʟee ⋅τaʟκ 18:40, 14 April 2026 (UTC)

Colorblind-friendly pairs

Google search: colorblind accessibility? I can suggest specific hex codes or color pairings that will make your visualization pop!

   Blue: #0072B2
   Orange: #E69F00
   Sky Blue: #56B4E9
   Bluish Green: #009E73
   Yellow: #F0E442
   Bluish Purple: #CC79A7
   Red: #D55E00
   Gray: #999999

Google search: Color blindness image checkers.

The overdose map does well here:

• Coblis. Color Blindness Simulator.

--Timeshifter (talk) 19:47, 13 April 2026 (UTC)

cmglee. Someday, I will remember to ping in my first post. --Timeshifter (talk) 18:52, 13 April 2026 (UTC)

Contrast checkers and contrast ratios

@Timeshifter Thanks. I'm creating graphs that let an editor pick RGB values satisfying contrast values 3, 4.5 and 7. I'll ping you when it's ready. cmɢʟee ⋅τaʟκ 02:44, 14 April 2026 (UTC)

@Timeshifter: I've created the diagram above. Does it make sense? cmɢʟee ⋅τaʟκ 18:11, 14 April 2026 (UTC)

@Cmglee: No. I need the long version of the explanation. :)

Maybe on the file description page.

This site link has a color chart. #000000 is black text.

• https://webaim.org/resources/contrastchecker/?fcolor=000000&bcolor=XXXXXX

Click on "Color picker" there to see the color chart. Pick color, and then pull the slider to preferred shade. Then OK it so it shows up in the XXXXXX spot. The contrast ratio number shows up below, along with the pass/fail WCAG contrast results.

I assume that you would like a similar interactive chart based on your preset ratios. --Timeshifter (talk) 18:46, 14 April 2026 (UTC)

@Timeshifter: The idea is that one can separate a colour into red, green and blue components, each of value 0 to 255. One can look up the location of the point (red component on the x-axis, green on the y and blue is the closest corresponding curve) on either graph (left is against black, right is against white), such as the example brown point against the three set of lines of 3:1, 4.5:1 and 7:1 contrast desired. If it's more in the thumbs up direction than the line, it passes that contrast ratio, and vice versa.

I guess a non-interactive version is too hard to use, so I'll scrap it. (An interactive version is hard to make without Javascript, which Commons forbids.)

Using the graph gave me another idea: there's a narrow band of colours which give 4.5:1 against both black and white. I could modify my script to illustrate that region so that illustrators of other diagrams can choose colours which pass 4.5:1 (AAA for most uses except body text).

What do you think? cmɢʟ ⋅τaʟκ 09:45, 18 April 2026 (UTC)

@Cmglee: I guess you want a tool that quickly shows what works somewhat for both black and white text.

White: #FFFFFF. White text below:

https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=XXXXXX

Would be nice if the webaim.org site allowed one to instantly change from white to black text and vice-versa. I can do it fairly fast if I remember the hex codes for both, and then type each in.

Then I can use the shader to find the color that works with both white and black text.

I pick any color. I pull the shader so that contrast is just past 4.51 for white text. Then I find that the color contrast is also just past 4.51 for black text.

--Timeshifter (talk) 03:23, 19 April 2026 (UTC)

@Timeshifter: that still requires one to test various colours to see if the contrast ratio is ok. I instead envision the region satisfying a given ratio to be a contiguous 3D volume in an RGB cube. If I manage to show it on a 2D graph, any valid point is immediately apparent.

Even better, I believe the 4.5:1 contrast ratio volume against either black and white intersect. Picking any point in the volume of intersection immediately satisfies AA for body text and AAA elsewhere.

I don't think the 7:1 contrast ratio volume against either black and white intersect at all so no colour meets 7:1 against both black and white. On the other hand, a large volume satisfies 3:1 but that's less useful. cmɢʟee ⋅τaʟκ 12:09, 19 April 2026 (UTC)

@Cmglee: Is a contiguous 3D volume in an RGB cube possible to be shown on the Commons? And would hovering on one spot show the RBG numbers, or hex code? And maybe the color in a square above or below or to the side?

I guess it doesn't have to be done on the Commons. Where would you post it? --Timeshifter (talk) 15:30, 19 April 2026 (UTC)

@Timeshifter: I'll have to show it as multiple cross-sections, so only select values of blue. It's technically possible to show the R and G values (not B, as it's in the third dimension into the screen, thus also not able to show the colour) but will require 65536 elements to hover over, basically one per R and G combination. It's possible to bin them, so each element covers, say, the first hexadecimal digit e.g. the 1 and 2 in #1x2xxx, reducing to 256 elements.

I haven't decided where I'll post it. Likely some guideline stating what contrast ratios to aim for. cmɢʟee ⋅τaʟκ 16:10, 19 April 2026 (UTC)

@Cmglee: I am not sure this is needed for these US SVG maps. We have maps that work well with black text alone. White text adds many complications. And we are able to get contrast ratio of 7 for black small text for all the divergent color pairs we have used so far.

I have been testing the maps also for color blindness problems here:

Coblis. Color Blindness Simulator. - See previous talk section.

Since they are divergent even with colorblind changes they still are understandable. I have only checked some of the pairs so far by uploading a PNG or JPG version of the maps.

But dropping down to 4.5 for some states due to white text might make those maps too muddy to understand for some colorblind readers. Especially those with less visual acuity.

It's taken awhile for me to wrap my mind around your 2D RGB chart above. Trying to see 3 variables on a 2D chart is difficult to understand at first.

It needs the ability to drag that spot around with a mouse all while showing the color of that spot in a little square off the chart. See:

Google: image maps on wikipedia that have a spot that can be dragged around.

--Timeshifter (talk) 01:06, 20 April 2026 (UTC)

@Timeshifter: Yes, they are unlikely needed for the US maps as they only have to have high enough contrast against black (the text labels). I've made it for my future diagrams which either have both white and black text, or coloured text against both black and white shapes.

I've combined both diagrams but only for the 4.5:1 contrast ratio. In this plot, each curved shape is a cross-section at assorted blue component values of the volume exceeding 4.5:1 contrast against both black and white.

The gridline intersections give values that can be given as 3 hexadecimal digits e.g. #c39 (i.e. #cc3399, the only web-safe colour) while the dots are in multiples of 5.

I thought of adding interactivity but don't know of a way to detect which blue cross-section the mouse is in, in order to show its correct colour.

Your Google search didn't work for me; I understand that different people see different results for the same search on Google.

Cheers, cmɢʟee ⋅τaʟκ 17:01, 21 April 2026 (UTC)

P.S. I've managed to add swatches at the intersections. Where there is more than one at an intersection, I've vertically stacked them.

Using the diagram, I've located six 3-hex-digit colours for general use:

 

#776 Grey

 

#46f Blue

 

#085 Green

 

#a60 Brown

 

#e00 Red

 

#b0f Purple

— Preceding unsigned comment added by Cmglee (talk • contribs) 22 April 2026 (UTC)

@Cmglee: Enlarging the map helped me a lot:

I don't understand why there would be more than one swatch at an intersection.

I don't understand the banding. I assume it is continuous blue value gradation divided into bands indicated by solid and dashed lines whose blue start points are on the left side. Do the blue start values indicate the middle of the band?

Do the 2 white bands exceed 4.5:1 contrast ratio?

I found this this interactive RGB slider on the RGB page:

• en:Template:RGB slider
• en:RGB color model#Numeric representations - scroll down.

--Timeshifter (talk) 06:48, 23 April 2026 (UTC)

@Timeshifter: Imagine a stack of 256 transparencies, each having a unique blue value plus a 2D graph of all possible red and green values e.g. the first being B=0, G=0...255, R=0...255; the second being B=1, G=0...255, R=0...255; and so on until B=255, G=0...255, R=0...255. Each transparency has a J-shaped band of all R and G values which together with its B value yields a colour which exceeds 4.5:1 against black, and exceeds 4.5:1 against white. I.e. each blue value corresponds to its entire band.

I now extract those with B=0, 102, 153, 170, 187, 204, 221, 238 and 255 (corresponding to hexadecimal 00, 66, 99, aa, bb, cc, dd, ee and ff), and overlay them, drawing them alternately with solid and dotted outlines to tell them apart. This results in my graph except for a small change: I displaced the swatches at the same intersection so that they can be seen. E.g. the bottom right stack is #008800, #008811 ... #008855.

The white bands are just the background where the gap between the bands don't overlap (between 66 and 99, and between ee and ff) because they move farther apart with increasing B values.

I made this graph so that one can (almost) see at a glance what colours exceed 4.5:1 instead of trying out different sliders. I suppose if one wanted to make an interactive contrast-sensitive colour picker, one could specify a colour to match against (e.g. black or white) and a target contrast ratio. Clicking on a 2D hue-saturation colour-picker then gives the viable range of luminance values and the RGB colour that just meets the target.

Cheers, cmɢʟee ⋅τaʟκ 09:11, 23 April 2026 (UTC)

@Cmglee: It would be nice to have such a chart just for black text that exceeds 7.1.

That would be good for here:

File talk:Template map of US states and District of Columbia.svg/Instructions#Color contrasts

Then people could see that almost any dark color would work on the dark end of the color range. That is if it was lightened up just enough.

--Timeshifter (talk) 11:44, 25 April 2026 (UTC)

@Timeshifter: you can already read it off

Find the dotted curve corresponding to the desired blue value among those labelled 7:1 at the top of the left figure (as they're pretty close together, you can just take the topmost black one for a conservative estimate). All red and green values to the top and right of the curve give at least 7:1 contrast against black. cmɢʟee ⋅τaʟκ 12:36, 25 April 2026 (UTC)

Been busy. I want the 7:1 part mostly just to show people that a lot of colors will work against black text. I want people to know that graphically. So all red and green values to the top and right of the lowermost 7:1 curve would have a background color something like yellow. All red and green values below that lowermost 7:1 curve would have a background color of white.

So people would see it graphically before looking at the exact numbers. I have difficulty almost every time I come back here wrapping my mind around the numbers. Getting older every day. Hexadecimal codes are not easy to understand. RGB codes too. Converting between the two is even more difficult:

• https://www.pluralsight.com/resources/blog/upskilling/understanding-hexadecimal-colors-simple

Unless one is working with it often as you do with your image creating and editing, one can easily lose the knowledge. Like the college calculus I have completely forgotten.

I want the graph just for black text, and I don't want to confuse people with any ratio other than 7:1. Since there is no need to go below 7:1. There are plenty of colors that exceed 7:1 against black text. The 7:1 graph with only 2 background colors (white and yellow) would show this clearly. --Timeshifter (talk) 23:12, 1 May 2026 (UTC)

@Cmglee: Ping.--Timeshifter (talk) 21:42, 1 May 2026 (UTC)

@Timeshifter: sure, I can make you this chart, but the background cannot be shaded white and yellow, as each curve will have its own AAA and AA regions. Plotting all the regions superimposed will be a mess. One could instead state that the region above each curve denotes AAA and vice-versa. cmɢʟee ⋅τaʟκ 04:19, 3 May 2026 (UTC)

P.S. I'll also use hexadecimal notation as that, say, #66ccff is more often used than its equivalent rgb(102, 204, 255). cmɢʟee ⋅τaʟκ 04:26, 3 May 2026 (UTC)

@Cmglee: Thanks. Please use rgb numbers as you have been doing. They are intuitive. It's the hexadecimal numbers that warp people's brains. I guess way back when every bit and byte of memory and RAM mattered they tried to squash 9-digit rgb into 6-digit color code.

I don't understand why there would be both AA and AAA regions if we only show the 7:1 curves. I thought the 7:1 curves only mapped the 7:1 AAA border for a particular blue value.

I don't know how hard it is though to make the background yellow above the bottom 7:1 line. If it is difficult, then I could just explain in the caption that all rgb values above that line are above 7:1 using that blue value. And so on for each blue value line. --Timeshifter (talk) 15:32, 3 May 2026 (UTC)

@Timeshifter: I almost never use decimal values except in MS Paint which doesn't recognise hex values, and when writing programs and am disinclined to convert to hex. From what I've seen, most authors also use hex.

Re shading, as I've written above, imagine there are 256 transparencies, each corresponding to a different blue value. Several are chosen and stacked on top of one another. Because each one has its curve at a different place, the resultant stack contains several curves, as shown.

If, however, the background on one side of each curve is white and the other is yellow, when they are stacked, the whites and yellows blend to form a mess of different shades of yellow.

I don't see the purpose of shading only the sides of the bottom line. It applies only when the blue component is 255. For any other value, it gives a misleading picture.

It is more intuitive instead to state that for the relevant curve, the region above the curve is AAA for body text and below it is "not AAA" (I'm not stating "AA", as it also includes the region with contrast below 3:1 so doesn't satisfy AA). cmɢʟee ⋅τaʟκ 16:02, 3 May 2026 (UTC)

@Cmglee: OK, I guess what is intuitive is different for different people. Let's do without all shading then.

I suggest doing 2 separate charts then. One with 0-256 numbers, and one with the hex range. I would then post both side-by-side in the color contrast section of the instructions. Might actually help people (myself included) understand their relation. Other people may find one or other of the charts useful elsewhere.

Above a line is AAA for body text, and below it as not AAA. That works too. Though I am not sure that needs to be on the chart itself. All that can be explained in the captions below the charts. I would also add info about 7:1 since I already refer to it elsewhere in the template instructions. I am not sure any labeling should be on the chart itself. "vs K | vs K" never made sense to me. It still doesn't. --Timeshifter (talk) 16:28, 3 May 2026 (UTC)

@Timeshifter: How about using gridlines for hex and dots for decimal, as I've done for File:WCAG_contrast_ratio_4.5.svg?

I was thinking of putting the explanation in the caption, with thumbs up/down icons on the graph as reminders. cmɢʟee ⋅τaʟκ 16:38, 3 May 2026 (UTC)

That chart totally baffles me right now. Combining hexadecimal and plain old decimal in one chart totally loses me.

I think you are trying to put too much in one chart. It's hard enough to wrap one's mind around understanding 3 axes in a 2-D chart. The thumbs up and down are confusing too without caption text.

Basically I like the left chart below with just the 7:1 section. Just the 7:1 curves. I would prefer them to be solid lines since that more clearly indicates contrast borders.

And no labeling of any kind in the chart interior. No "7:1". No thumbs. No "vs K | vs K".

A hex version of the exact same chart would be nice too. --Timeshifter (talk) 17:05, 3 May 2026 (UTC)

cmglee - ping. --Timeshifter (talk) 17:11, 3 May 2026 (UTC)

@Timeshifter:  Done

How is it? Alternating dashed and solid lines both help the eye follow the curves and clarify which label applies to which. cmɢʟee ⋅τaʟκ cmɢʟee ⋅τaʟκ 18:38, 8 May 2026 (UTC)

P.S. For simplicity, all red and green combinations in the yellow region exceed 7:1 regardless of blue value. cmɢʟee ⋅τaʟκ 18:56, 8 May 2026 (UTC)

@Cmglee: That's exceptional. Thanks! I finally am visually putting together the 2 number systems discussed here:

• Hexadecimal Colors Explained | RGB vs Hex Codes.

The alternating solid and dashed lines are definitely easier to follow.

And the increasingly blue gradation of both the blue number scale and the curved lines shows the color direction clearly.

Just like the gradation of color in the red and green scales.

And this statement is very clear: "For simplicity, all red and green combinations in the yellow region exceed 7:1 regardless of blue value."

And the chart captions help me remember how to name colors in both color number systems. --Timeshifter (talk) 22:09, 8 May 2026 (UTC)

Thanks, @Timeshifter: Glad our stylistic preferences have finally aligned :-) cmɢʟee ⋅τaʟκ 15:28, 9 May 2026 (UTC)

Space between state and value

cmglee

I updated this map to 2024:

• File:Poverty rates by state. US map.svg

Tests section there has different map widths.

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

The larger value size necessitates another pixel or 2 of space between the state and the value when there is something dropping down like a g, p, or a y from the state name. Especially the smaller the map width.

How can I add that space for these state names?: Georgia, Maryland, Michigan, New Hampshire, Oregon, Pennsylvania, Virginia, Washington, West Virginia, Wyoming. Those states have the dropdown letters in the middle of the state name.

If not individually, then how about for all states? I see there is room to move all the state names up a pixel or 2. I know how to do that. But how do I add space below the state name?

I removed:

letter-spacing:-1;

Because when looking at the various map sizes in the test section of a Shoutwiki upload (using letter-spacing:-1;) I noticed the state letters and value numbers. were too crowded the smaller the size. Scroll down to the test section here:

• https://cannabis.shoutwiki.com/wiki/File:Poverty_rates_by_state._US_map.svg

That map is not currently used anywhere on Shoutwiki in its SVG form. So I will leave that version there intact for now. --Timeshifter (talk) 19:47, 3 May 2026 (UTC)

@Timeshifter Do you mean horizontal spacing between characters in a word, or line spacing between rows of text? cmɢʟee ⋅τaʟκ 18:39, 8 May 2026 (UTC)

@Cmglee: I mean line spacing between rows of text. Specifically between the state row and the value row.

I already increased the horizontal spacing between characters in a word by removing letter-spacing:-1; for both the state names and their values in the poverty rate map on the Commons.

--Timeshifter (talk) 22:49, 8 May 2026 (UTC)

@Timeshifter: letter-spacing controls spacing between characters within a row.

There's no obvious way in SVG to globally change spacing between rows. The best I've found is to use either dy="2ex" or dy="1em" which takes into account the font-size. I'm now slightly more inclined to use the former as I already vertically centre a single line of text with y="0.7ex" (if it's all caps or digits) or y="0.6ex" (if it's mostly lowercase) so that the unit is consistent, and there is slightly more space. You can change the number to "2.<something>ex" but it has to be done manually for each line. cmɢʟee ⋅τaʟκ 15:37, 9 May 2026 (UTC)

@Cmglee: Thanks. I changed to y="-2.2ex" for states with descenders in the middle of the state name (g, j, p, q, y). See next section below. That works with values at both 17px and 18px text sizes. --Timeshifter (talk) 22:03, 9 May 2026 (UTC)

Uploaded a tweaked map template

Edit summary: Removed letter-spacing:-1;. Added space between state and value rows for state names with descenders in the middle of the state name (g, j, p, q, y). Tweaked position of some state names. Clarified notes. Changed order to:

font-family="Liberation Sans,Arial,Helvetica,sans-serif".

Previous order:

font-family="Liberation Sans,Helvetica,Arial,sans-serif".

Reasons for putting Arial in front of Helvetica:

Maps can be used off Wikipedia too. I don't believe Liberation fonts are preinstalled on PCs or Macs. There are a lot more Windows devices than Apple devices.

"The Helvetica font is not and has never been included with any version of Office or Windows"

• https://learn.microsoft.com/en-us/answers/questions/5365931/what-helvetica-fonts-are-avaiable-for-use-in-micro

"Arial is a sans-serif typeface in the neo-grotesque style. Fonts from the Arial family are included with all versions of Microsoft Windows after Windows 3.1, as well as in other Microsoft programs, Apple's macOS, and many PostScript 3 printers." ... "The [MacOS] operating system ships with Arial, Arial Black, Arial Narrow, and Arial Rounded MT. However, the default macOS font for sans-serif/Swiss generic font family is Helvetica. The bundling of Arial with Windows and macOS has contributed to it being one of the most widely distributed and used typefaces in the world."

• https://en.wikipedia.org/wiki/Arial

Liberation Sans is slightly closer to Arial than to Helvetica in character spacing. See image to right.

Liberation Sans and Arial are widely used compatible fonts:

• https://ask.libreoffice.org/t/most-compatible-fonts/123157/11

--Timeshifter (talk) 21:51, 9 May 2026 (UTC)

Border for whole image

cmglee. On a template copy on my PC I tried adding a border for the whole image. It scales, and stays with the image as I change the browser size. I uploaded it to Shoutwiki here.

The problem is that the border only shows up on 2 sides on Shoutwiki (on the top and right sides). And the top border is between the large image title and the rest of the image. I can't figure out why.

Look at the test sizes there to see the template at various widths. The 2 borders that have shown up do stick close to the image at the various sizes.

You can have a look, and play around further, by adding this just before the </svg> tag at the end of the SVG file:

<rect width="100%" height="100%" fill="none" stroke="black" stroke-width="1" />

I found it with a Google search.

I can see the left border on the image when looking at the file on my computer. But not after I uploaded it to Shoutwiki. --Timeshifter (talk) 05:02, 18 May 2026 (UTC)

@Timeshifter: I don't think the image itself should have a border. As you discovered, both sides may appear different as the image is rescaled. If a border is required where it's used, the border attribute can be added instead. Please see en:Help:Extended_image_syntax#Brief_syntax. cmɢʟee ⋅τaʟκ 16:36, 18 May 2026 (UTC)

@Cmglee: I somehow missed removing the border attribute from one of the test images on Shoutwiki. I removed it now.

If you look at the various test sizes now you will see that they all have the exact same top and right borders.

If they don't already have a border I add borders when possible to most images before uploading to the Commons.

The border attribute is harder to see versus the built-in border. And it is more work I don't have to do if it is built-in.

--Timeshifter (talk) 17:39, 18 May 2026 (UTC)

Latest map updates. Bylines and notes

cmglee. Found a use for the 2 bylines.

[[File:Map of US minimum wage by state.svg|350px|none|border]]

The only change from January 1, 2026 to July 1, 2026 is that Alaska increased to $14.00 an hour from $13.00 an hour. --Timeshifter (talk) 21:50, 30 June 2026 (UTC)

@Timeshifter: thanks for updating it. cmɢʟee ⋅τaʟκ 22:01, 30 June 2026 (UTC)

@Cmglee: Updated this map too. Used the bylines and note spots:

[[File:US map. Percent of workers earning less than $15 per hour, by state.svg|none|350px|border]]

--Timeshifter (talk) 17:05, 1 July 2026 (UTC)

@Timeshifter: Good use-cases. Thanks! cmɢʟee ⋅τaʟκ 10:01, 2 July 2026 (UTC)

Need to better distinguish state borders of adjacent n/a states at thumbnail sizes

@Cmglee: I wish the outer borders of the n/a states above were darker. As well as the internal borders between n/a states. In New England, it is especially needed for those small states.

Also between Louisiana and Mississippi the border is harder to see between those dark backgrounds.

Is there any reason all borders could not use single thin solid black lines? 1 pixel wide so they don't interfere with reading overlapping state names.

It seems the borders currently consist of 3 lines when blown up. White line sandwiched between 2 black lines. And the border seems to vary depending on image size. Fuzziness and waviness too. Some borders look like dotted lines.

Black text meets WCAG 3 standards for the background colors we have been using. So thin black-only borders should too, I am hoping. Or at least WCAG 2.

I think I found a slight improvement by lightening the darker cross-hatching color of the n/a pattern colors. From #dddddd to #fcfcfc. I uploaded a test file:

File:US map. Percent of workers earning less than $15 per hour, by state. Lighter na states.svg

Here is the test file, followed by the current file used in a Wikipedia article:

It may have helped a small amount. But borders need to be darker, less fuzzy, and more distinct at all image sizes.

I couldn't figure out how to set a simple solid 1px black border for all state boundaries in the SVG. I don't know if that would solve some of the problems. But I would like to see what it does. Maybe you could upload a test file. --Timeshifter (talk) 10:09, 3 July 2026 (UTC)

@Cmglee: Thought I'd ping again since I expanded my post a lot, and uploaded the test image. --Timeshifter (talk) 10:11, 3 July 2026 (UTC)

@Timeshifter: The three lines is because each state is an SVG path slightly smaller than the state or territory it represents, and outlining each in black results in a white gap between the shapes. I've added a CSS class named state so that you and others can style the shapes, renaming the original state to name, which I think is more appropriate.

Increasing stroke-width to 1px makes state names harder to read where they overlap, as they are both black, so I've outlined all text in white with an SVG filter. Feel free to modify it. cmɢʟee ⋅τaʟκ 12:39, 6 July 2026 (UTC)

P.S. An alternative solution is to make the borders white, which will then not interfere with the text, though the n/a states may need to have a darker shade. cmɢʟee ⋅τaʟκ 12:45, 6 July 2026 (UTC)

@Cmglee: Thanks! Here is the diff of your changes.

I created a test category, and uploaded your latest template version there:

• Category:English-language SVG choropleth maps of the United States with visible numbers. Made with templates. Tests

I changed the name to "Maternal mortality ...". I added a one-line note so that it was not blocked as a duplicate:

• File:Maternal mortality rates per 100,000 births by state. US map. Thick black borders. Black text outlined in white.svg

]]

I tried out removing the text outline, and adding white borders. I like it. Side-by-side comparison:

• File:US map. Percent of workers earning less than $15 per hour, by state. White borders.svg
• File:US map. Percent of workers earning less than $15 per hour, by state. Old borders.svg

The thick black borders are better between light-colored states.

White borders are better between dark states versus the old dark borders. And they don't interfere with reading the state names and values.

The black text with white outlines is not as easy to read at smaller thumbnail sizes as plain black text. --Timeshifter (talk) 09:48, 7 July 2026 (UTC)

@Timeshifter: I must say I don't really like the white borders. For example, Alaska almost vanishes. I think the best compromise is the original black-white-black triple border, which works for both light and dark shades, and doesn't interfere too much with the text. cmɢʟee ⋅τaʟκ 11:08, 7 July 2026 (UTC)

@Cmglee: At thumbnail size above the black-white-black triple border makes it difficult to see the border between Louisiana and Mississippi in the $15 an hour map. So each border color has problems if the background color of adjacent states is similar to the border color.

And that black-white-black border interferes somewhat with reading state names that cross borders, especially at thumbnail sizes. It muddies up the text somewhat. Whereas the white border does not interfere at all.

Since people are most interested in the percent values for particular states, then I believe the most legible text should be what matters most. Since many people will not enlarge the images if they are scanning a page.

And people can clearly see "Alaska" on that state. I can see its border clear enough against the white background. People look at these maps first for the values, secondarily as a geography tool.

There are better maps for geography, but they are fine-tuned with multiple text colors depending on the background colors. We can't do that.

Or they only use lighter background colors with their black text and darker borders. Which would make it difficult to distinguish data slices by color in choropleth maps. For example, see this clickable image map with black text, darker borders, lighter colors, and no adjacent states with the same color:

• en:Template:USA image map in page

If there were adjacent states with similar color as the border, then there would be a problem, especially at thumbnail sizes. That map is not a choropleth map. Here is the underlying map:

The clickable image map is not made for thumbnail size use since it uses smaller text than the choropleth maps we are working on. It is made to use as an index at larger sizes. For more info scroll down to the clickable image map in this help page section:

• en:Help:Tables and locations#Horizontal table of contents for a table of states or countries

--Timeshifter (talk) 12:28, 7 July 2026 (UTC)

@Timeshifter: all right, white borders then. Just wondering how it would look if every state had the same value, say, 1 and D.C. had 2. Most of the map would be barely visible. (In fact, I wonder what colour would be chosen if every value was the same, hence is both the minimum and maximum!) cmɢʟee ⋅τaʟκ 14:15, 7 July 2026 (UTC)

@Cmglee: A nearby hidden note in the template can tell people to choose whatever border color works best for their map. It can also be put in the instructions.

• White borders: .state { stroke:#ffffff; }
• Dark borders: .state { stroke:#000000; }
• Yellow borders: .state { stroke:#ffff00; }

I discovered that yellow borders work well for maps without adjacent states using yellow as the background color. For example:

--Timeshifter (talk) 14:56, 7 July 2026 (UTC)

@Timeshifter: I think borders should not be yellow as it means the minimum value in this case. White or black are neutral colours. cmɢʟee ⋅τaʟκ 23:14, 7 July 2026 (UTC)

@Cmglee: It's a border though, so values can't be assigned to it.

I see problems with yellow borders though. The upper states of Montana, North Dakota, and Minnesota kind of look like a continuous legend. They almost blend together due to minimal separation. There is also very difficult-to-see separation between the n/a states in the Northeast.

After coming back here and comparing all the color tests, I am now back to preferring the even more neutral color: gray.

• .state { stroke:#808080; }

This is gray via your new template (left), and old template (right):

The new template has better separation between adjacent n/a states.

Could try different gradations of gray.

• https://www.google.com/search?q=gray+hex+code

"The standard hex code for the color gray is #808080. In this neutral shade, equal amounts of red, green, and blue light are combined (exactly 50% of each on the sRGB scale)."

I am happy that you're new template allows us to try out different border colors to find out what color works best with a particular choropleth map.

The above 2 maps have tests of various image sizes on their file description pages. As does this map currently with the old borders: File:Map of US minimum wage by state.svg

There are color ranges where each of the colors below is best with plain black text. Color names work too.

• Gray borders: .state { stroke:#808080; } or { stroke:gray; }
• White borders: .state { stroke:#ffffff; } or { stroke:white; }
• Yellow borders: .state { stroke:#ffff00; } or { stroke:yellow; }

Other choices: see web colors and shades of gray. --Timeshifter (talk) 13:26, 9 July 2026 (UTC)