US Presidential Elections 2020, Realtime SVG Map

How this was made

This was made using Python and Flask on the backend and SVG+javascript on the frontend.

At the heart of it is just one simple trick. Flask usually renders templates using Jinja/HTML, but there is really nothing stopping us from rendering any XML file or SVG file. So, we take an SVG map of the US, like this one from Wikimedia Commons and put that in the Templates folder.

On our backend we enter the results to the database, however you decide to do it, and then pass on those results to the frontend Jinja template which is really an SVG.

Python Code:
	@app.route('/map.svg')
	def map():
	    results = Results.query.all()
	    return render_template('map.svg', result=results)

Then you can use those results in the Jinja/SVG template like this:

Jinja Code in SVG
		<path class="tooltip-trigger"
		data-tooltip-text="{{result.AK.state_name}}: {{result.AK.total_ecv}}"
		data-tooltip-red="Trump: {{ result.AK.red_votes }}%"
		data-tooltip-blue="Biden: {{ result.AK.blue_votes }}%"
		{% if result.AK.red_votes > result.AK.blue_votes %}
		fill="#de0100"
		{% elif result.AK.red_votes < result.AK.blue_votes %}
		fill="#1405bd"
		{% endif %}
		...>

In the above example we are adding data attributes to the <path> tag of the state of AK.

If you look at the end of SVG file above, you will notice some Javascript that does all the frontend rendering of the data attributes in tooltips. That's it. That's all it takes to make a realtime election results map with just SVG and Flask.

You can do it with any country or any elections.