"You Draw It - Battle Edition" generates interactive charts that let users draw their guesses on how data changed over time, compare it to the actual data and the data of a rival city, sports club etc. You can see a live demo here.
Simon Haas
Bryony Miles (D3.js)
"You Draw It - Battle Edition" is based on code published by the German public broadcaster WDR. A live demo of the "standard" edition is available here.
"You Draw It - Battle Edition" is available under the terms of the MIT License. Copyright (c) 2018 Schwäbische Zeitung
- NodeJS, v4.x recommended
- Bower
npm install -g bower - Gulp
npm install -g gulp - Build tools
npm install(within the project folder) - Front-end libraries
bower install(within the project folder)
- Replace mayor names in
app.jsor leave blank. Years define the term length and the start of user guesses. - Replace city names in
app.js - Replace city names in
index.htmland adjust HTML - Change CSS/Sass in
styles/ - Adjust header, footer and web analytics in
partials/ - Replace images in
/images - Download fonts
- Adjust font URL in
Gulpfile.js(dlFonts) - Replace data and city names in the YAML documents in
data/ - Optional: Redirect users to
dist/in.htaccesswithRedirect /youdrawit-battle/index.html https://youdrawit.schwaebische.de/youdrawit-battle/dist/
gulp serve
gulp build