I'm making a map of US political party control in JavaScript. Currently only from 2015-2020, but I'm planning on at least expanding it back to 1992 (Open Source)

submitted by [deleted] from self.programming

You can view it on my website. My CSS skills are terrible, so don't be surprised if it doesn't look quite right. (But please point it out so I can fix it.) The Gitlab project can be viewed here, though don't have your expectations high, I tend to write code that looks like spaghetti.

Background

I saw a nice data-set a while back on ballotpedia (that only goes back to 1992) showing each state's party control and decided to make an animated map video (which is now unlisted)... which didn't turn out too well. It took ages to make, was super repetitive, and I got a few parts wrong.

Late last night I decided to redo it, but this time I'd make it interactive and put it on my website. I was originally going to modify an svg, but since my website is static apparently js doesn't behave like it's server-side and refuses to modify svgs. (I've never done this before.) So, inspired by those HTML5 games that popped-up everywhere back when I was young(er), I decided that I'd just use a javascript map and modify that.

The problem is that I couldn't find any that weren't copyrighted, so I had to use a watermarked map. Not a big deal, but I always try to go copyright-free whenever possible. The map itself is by simplemaps.com. I wrote a program that would modify it according to a database I wrote, also in JavaScript, that labels what each state's political party control is.

The interface is pretty simple, just some text you can click on. I do intend on entirely changing this, so don't worry: it's just a placeholder until I program in something else.

all 6 comments
sorted by:
top
newinsightfulfun

[–]C3P0 3 insightful - 2 fun3 insightful - 1 fun4 insightful - 2 fun -  (5 children)

I like how simplemaps proprietary code is basically 20 lines long if you take away the coordinates of each state. You could redraw 50 states if you have the patience then you could also have more control over how to display the information. Better yet, just copy their coordinates--it's not like they measured the border of Florida physically; they copied the information without citing the source then claimed it as their own.

Don't sell yourself short. You are a budding programmer.

[–][deleted] 3 insightful - 2 fun3 insightful - 1 fun4 insightful - 2 fun -  (4 children)

Thanks!

I definitely don't have the patience to redraw everything. The major problem is getting the proportions right.

[–]C3P0 3 insightful - 2 fun3 insightful - 1 fun4 insightful - 2 fun -  (3 children)

Well, the best way would be to use Inkscape and draw all the states in one file by tracing an open source image of the US. It could be done in an hour with some finesse.

[–][deleted] 3 insightful - 2 fun3 insightful - 1 fun4 insightful - 2 fun -  (2 children)

Yeah, but I don't have that kind of patience — and how would I go-about converting it to a JavaScript image?

[–]C3P0 3 insightful - 2 fun3 insightful - 1 fun4 insightful - 2 fun -  (1 child)

I think you mean that you want to create an SVG image in JavaScript. The answer is something like this:

let svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
svg.setAttribute('width','200px');
svg.setAttribute('height','200px');
svg.innerHTML = 'put valid xml here (this includes the coordinates and fill color)';
element.appendChild(svg);

For a better answer, see: https://stackoverflow.com/questions/3492322/javascript-createelementns-and-svg

[–][deleted] 3 insightful - 2 fun3 insightful - 1 fun4 insightful - 2 fun -  (0 children)

Oh, thanks!