codeforfrankfurt · jschirrmacher · Sep 22, 2017 · Sep 22, 2017 · Sep 22, 2017 · Sep 22, 2017
diff --git a/.gitignore b/.gitignore
@@ -12,5 +12,17 @@ dev_*.ipynb
 .DS_Store
 node_modules/
 polbotcheck/dump/
-web/Release.key
+Release.key
 polbotcheck/__pycache__/
+
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/Procfile b/Procfile
@@ -1 +1 @@
-web: FLASK_ENV=production webapi/run_analytics_server.sh
+web: bin/boot
diff --git a/web/json/Achim_P.json → json/Achim_P.json b/web/json/Achim_P.json → json/Achim_P.json
diff --git a/web/json/agnieszka_mdb.json → json/agnieszka_mdb.json b/web/json/agnieszka_mdb.json → json/agnieszka_mdb.json
diff --git a/web/json/parties.json → json/parties.json b/web/json/parties.json → json/parties.json
diff --git a/web/json/politicians.json → json/politicians.json b/web/json/politicians.json → json/politicians.json
diff --git a/web/json/topics.json → json/topics.json b/web/json/topics.json → json/topics.json
diff --git a/web/package.json → package.json b/web/package.json → package.json
@@ -4,14 +4,14 @@
  "private": true,
  "dependencies": {
  "chart.js": "^2.5.0",
- "react": "^15.4.2",
- "react-bootstrap": "^0.30.7",
- "react-chartjs-2": "^2.0.5",
- "react-dom": "^15.4.2",
- "react-router": "^2.8.1"
+ "react": "^16.0.0",
+ "react-bootstrap": "^0.31.3",
+ "react-chartjs-2": "^2.6.4",
+ "react-dom": "^16.0.0",
+ "react-router-dom": "^4.2.2"
  },
  "devDependencies": {
- "react-scripts": "0.9.3"
+ "react-scripts": "^1.0.14"
  },
  "scripts": {
  "start": "react-scripts start",

diff --git a/polbotcheck/db.py b/polbotcheck/db.py
@@ -8,7 +8,7 @@
 
 from config.db_credentials import db_credentials
 
-CANDIDATES_PATH = '../web/public/candidates.json'
+CANDIDATES_PATH = '../public/candidates.json'
 
 
 # Configure your ArangoDB server connection here

diff --git a/web/public/candidates.json → public/candidates.json b/web/public/candidates.json → public/candidates.json
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/web/public/index.html → public/index.html b/web/public/index.html → public/index.html
@@ -13,7 +13,7 @@
  work correctly both with client-side routing and a non-root public URL.
  Learn how to configure a non-root public URL by running `npm run build`.
  -->
- <title>React App</title>
+ <title>BotOrNot hessische BTW-Kandidaten 2017</title>
  </head>
  <body>
  <div id="root"></div>

diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,106 @@
+@import '//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css';
+
+body {
+ margin: 0;
+ padding: 0;
+ font-family: sans-serif;
+}
+
+.App-logo {
+ float: left;
+}
+
+.App, h3 {
+ text-align: center;
+}
+
+.App h2 {
+ font-size: 28px;
+}
+
+.jumbotron p {
+ font-size: 16px;
+}
+
+.dl, .dd {
+ display: inline;
+}
+
+.dd {
+ text-decoration: underline;
+ cursor: pointer;
+}
+
+.dt {
+ display: none;
+ position: absolute;
+ background: #ffe;
+ font-size: 13px;
+ font-weight: normal;
+ text-align: left;
+ padding: 5px;
+ max-width: 320px;
+}
+
+.dl:hover .dt {
+ display: inline-block;
+}
+
+.App-header {
+ background-color: #222;
+ padding: 20px;
+ color: white;
+}
+
+.Profile-picture {
+ display: inline-block;
+ max-width: 240px;
+ max-height: 240px;
+ vertical-align: top;
+}
+
+.App-profile {
+ display: inline-block;
+ margin-left: 20px;
+ min-width: 300px;
+}
+
+.App-info {
+ margin: 1em -5px;
+ padding: 0;
+}
+
+.App-info > div {
+ padding: 5px;
+}
+
+.App-info > div > div {
+ padding: 5px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+}
+
+img {
+ max-width: 100%;
+}
+
+ul {
+ text-align: left;
+}
+
+.Info-diagram {
+ padding: 2em;
+}
+
+.Info-diagram img {
+ max-width: 66%;
+}
+
+.number {
+ float: right;
+}
+
+#footer {
+ margin-top: 3em;
+ text-align: left;
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,147 @@
+import React, {Component} from 'react'
+import { Link } from 'react-router-dom'
+import {Grid, Row, Col, Jumbotron, Panel} from 'react-bootstrap'
+
+import './App.css'
+import Title from './Title'
+import { parties, getFullName } from './Utils'
+
+class App extends Component {
+
+ state = {
+ politicians: [],
+ parties: parties,
+ districts: {districts: []}
+ };
+
+ load(what, url) {
+ let self = this;
+ fetch(url)
+ .then(res => res.json())
+ .then(data => {
+ self.state[what] = data.data || data;
+ self.setState(self.state);
+ })
+ .catch(e => console.log(e))
+ }
+
+ componentWillMount() {
+ this.load('districts', 'https://botornot-hessen-api.herokuapp.com/pbc/districts');
+ this.load('politicians', '/candidates.json');
+ }
+
+ getCandidateEntry(candidate) {
+ const fullName = getFullName(candidate.name);
+ return fullName.concat(" (" + this.state.parties[candidate.election.party] + ")");
+ }
+
+ render() {
+ const politicians = this.state.politicians.sort((a, b) => a.name.surname.localeCompare(b.name.surname));
+ const parties = this.state.parties;
+ const districts = this.state.districts.districts;
+ return (
+ <Grid className="App">
+ <Title />
+ <Row>
+ <Jumbotron>
+ <h2>
+ Wer folgt unseren Bundestagswahl-Kandidaten wirklich?
+ </h2>
+ <p>Sind es Bots oder echte Menschen, die den Kandidaten folgen? Das finden wir hier für euch heraus,
+ damit klar wird, was echt ist und was nicht.
+ </p>
+
+ <h3>Was sind das für Bots, um die es geht?</h3>
+ <p>
+ Twitter Bots sind computergesteuerte Programme die sich automatisiert auf dem Social Network bewegen
+ und verschiedene Ziele verfolgen. Die meisten betreiben Marketing und folgen allen möglichen
+ Accounts und erzeugen so Aufmerksamkeit. Andere sorgen mit Retweets für eine größere
+ Reichweite anderer Accounts, die sie voranbringen wollen.
+ </p>
+ <p>
+ Eigentlich ist es noch kein Problem, wenn Bots dem Account eines Kandidaten folgen. Problematisch wird
+ es, wenn wir als Wähler die Meldungen eines Kandidaten häufiger zu sehen bekommen, weil sie angeblich
+ viele andere interessieren (und daher auch mich interessieren könnten), aber hauptsächlich Bots diese
+ Retweets erzeugt haben.
+ </p>
+
+ <h3>Und wie erkenne ich, welche Retweets "echt" sind, und was von Bots künstlich erzeugt wird?</h3>
+ <p>
+ Wir geben dir einen Einblick, wieviele Retweets der Politiker von Bots sind, um besser einschätzen zu können,
+ ob nachgeholfen wird. Zur Erkennung ob ein Twitter Account ein Bot ist, verlassen wir uns auf die
+ mehrjährige Recherche-Arbeit des <span className="dl"><span className="dd">Projekts&nbsp;
+ <a href="http://truthy.indiana.edu/botornot/">Botometer</a></span><span className="dt">früher Truthy BotOrNot</span></span>.
+ Es wurde 2014 von der Indiana University aus den USA ins Leben gerufen. Über deren Web-Dienst kann man die
+ Wahrscheinlichkeit einholen, mit der ein Twitter Account ein Bot ist.
+ </p>
+ <p>
+ Wir gehen ab 70% Prozent davon aus, dass es sich um einen Bot handelt.
+ </p>
+ <p>
+ Für jeden <span className="dl"><span className="dd">Politiker, zu dem wir die Daten einholen konnten</span>
+ <span className="dt">die Datenlage ist recht
+ eingeschränkt, siehe Quellen ganz unten, daher auch die fehlenden Parteien und Wahlkreise</span></span>&nbsp;
+ zeigen wir hier nun den <strong>Anteil der Follower die Bots sind, den Anteil der Retweets die von Bots
+ stammen und wieviel Prozent der Retweeter Bots sind.</strong>
+ </p>
+ </Jumbotron>
+ </Row>
+ <Row>
+ <Col md={4}>
+ <h3>Politiker</h3>
+ <ul>
+ {politicians.map(function(value) {
+ return <li key={value.id}>
+ <Link to={'/politicians/' + value.slug}>
+ {this.getCandidateEntry(value)}</Link></li>
+ },this)}
+ </ul>
+ </Col>
+ <Col md={4}>
+ <h3>Parteien</h3>
+ <ul>
+ {Object.keys(parties).map(function(key) {
+ const value = parties[key];
+ return <li key={key}><Link to={'/parties/' + key}>{value}</Link></li>;
+ })}
+ </ul>
+ </Col>
+ <Col md={4}>
+ <h3>Wahlkreise</h3>
+ <ul>
+ {districts.map(function(districtObject) {
+ return <li key={districtObject.id}><Link to={'/districts/' + districtObject.id}>{districtObject.name}</Link></li>;
+ })}
+ </ul>
+ </Col>
+ </Row>
+ <Row>
+ <Panel id="footer" header="Quellen">
+ <p>
+ Die Liste der Politiker und die Infos über sie, u.a. die Account-Namen der Twitter-Profile haben wir über&nbsp;
+ <a href="https://github.com/okfde/wahldaten/tree/master/kandidierende">github.com/okfde/wahldaten</a> eingeholt.
+ </p>
+ <p>
+ Die Wahrscheinlichkeit ob ein Account ein Bot ist, holen wir uns über&nbsp;
+ <a href="http://truthy.indiana.edu/botornot/">Botometer</a> (früher Truthy BotOrNot) von der
+ Indiana University aus den USA ein.
+ </p>
+ <p>
+ Die Follower und Retweet Daten sind über die <a href="https://dev.twitter.com/rest/public">Twitter-API</a>
+ &nbsp;von Twitter selbst eingeholt worden.
+ </p>
+ <p>
+ Die Namen der Wahlkreise haben wir über die&nbsp;
+ <a href="https://www.abgeordnetenwatch.de/api/">Abgeordnetenwatch API</a> abgerufen.
+ </p>
+ <p>Der Quellcode dieses Projekts ist zu finden auf&nbsp;
+ <a href="https://github.com/codeforfrankfurt/PolBotCheck">github</a>.
+ </p>
+ </Panel>
+ </Row>
+ </Grid>
+ );
+ }
+}
+
+export default App;
diff --git a/web/src/App.test.js → src/App.test.js b/web/src/App.test.js → src/App.test.js
diff --git a/web/src/BarChart.js → src/BarChart.js b/web/src/BarChart.js → src/BarChart.js
diff --git a/src/Breadcrumbs.css b/src/Breadcrumbs.css
@@ -0,0 +1,3 @@
+.breadcrumbs {
+ margin-bottom: 1em;
+}
diff --git a/src/Breadcrumbs.js b/src/Breadcrumbs.js
@@ -0,0 +1,14 @@
+import React, {Component} from 'react'
+import { withRouter } from 'react-router-dom'
+import './Breadcrumbs.css'
+
+class Breadcrumbs extends Component {
+ render() {
+ return (<div className="breadcrumbs">
+ <button onClick={this.props.history.goBack} className="btn btn-default">« Zurück</button>
+ </div>
+ )
+ }
+}
+
+export default withRouter(Breadcrumbs)
diff --git a/src/DistrictPage.js b/src/DistrictPage.js
@@ -0,0 +1,59 @@
+import React, {Component} from 'react'
+import Breadcrumbs from './Breadcrumbs'
+import { Link } from 'react-router-dom'
+import {Row, Col, Panel} from 'react-bootstrap'
+import Title from './Title'
+import { parties, getFullName } from './Utils'
+
+class DistrictPage extends Component {
+ state = {
+ district: {
+ name: '',
+ candidates: []
+ }
+ }
+
+ componentWillMount() {
+ let self = this;
+ const url = 'https://botornot-hessen-api.herokuapp.com/pbc/districts/' + this.props.match.params.slug;
+ fetch(url, {mode: 'cors', headers: {'Accept': 'application/json'}})
+ .then(res => {
+ return res.json().then(data => {
+ self.state = data;
+ console.log(data);
+ self.setState(self.state);
+ });
+ })
+ .catch(e => console.log("error fetching " + url, e));
+ }
+
+ render() {
+ let candidates = this.state.district.candidates.map(candidate => {
+ const fullName = getFullName(candidate.name);
+ const party = parties[candidate.election.party];
+ return (
+ <li key={candidate.id}>
+ <Link to={'/politicians/' + candidate.slug}>{fullName + " (" + party + ") "}</Link>
+ </li>
+ );
+ }, this)
+
+ return (<div className="container">
+ <Title />
+ <Breadcrumbs />
+
+ <Panel bsStyle="primary" className="App-profile" bsSize="large">
+ <p>Wahlkreis: {this.state.district.name ? this.state.district.name : '-'}</p>
+ </Panel>
+
+ <Row className="App-info">
+ <Col xs={12}>
+ <h3>Mitglieder im Wahlkreis</h3>
+ {candidates}
+ </Col>
+ </Row>
+ </div>)
+ }
+}
+
+export default DistrictPage;