ischurov/plotly-elections-example.html

## plotly-elections-example.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2018 by ischurov (http://jsbin.com/dakuman/3/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js">
  </script>
  <!-- https://bit.ly/2qUxh33 -->
<script src="https://cdn.plot.ly/plotly-latest.min.js">  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.8.9/jquery.csv.js">
  </script>
  <div id="picture"
       style='width:300px; height:300px; background-color: #aaffff'>
  </div>
<script>
/* Plotly.plot("picture",
            [{
              x: [1, 2, 3, 4, 5],
              y: [1, 4, 9, 16, 25],
              mode: 'markers',
              marker: {
                size: [11, 15, 3, 20, 25],
                color: [1, 2, 3, 4, 5]
              }
            }]) */

$.ajax({
  type: "GET",
  url: "https://gist.githubusercontent.com/ischurov/cb2c3a8618945d4975dbee8940515c1b/raw/cbd86c7cb5fa8fb6e94dc7ad7d40e4fa543d01c5/moscow-elections2018.csv",
  dataType: "text",
  success: function(response) {
      // эта функция вызовется в тот момент, когда будет получен ответ от сервера
      var data = $.csv.toObjects(response);
      // мы использовали библиотеку jquery-csv, чтобы распарсить
      // csv-файл и превратить его в набор javascript'овских объектов (словариков)
      console.log(data[0]);
      // в консоли можно будет посмотреть, как выглядит первый элемент массива data

      var turnout = data.map(function(d) {
        // map создаёт новый массив путём применения
        // функции ко всем элементам исходного массива
        // (в данном случае, массива data)
        return 100 * (((d['Число бюллетеней ' +
                  'в стационарных ящиках' +
                  ' для голосования'] - 0) +
                (d['Число избирательных ' +
                  'бюллетеней в переносных ' +
                  'ящиках для голосования'] - 0)) /
                (d['Число избирателей, ' +
                  'включенных в список избирателей'] - 0))
        // -0 позволяет превратить строку в число
      });
      var putin_pct = data.map(function(d) {
        return 100 * ((d['Путин Владимир Владимирович'] - 0) /
                ((d['Число бюллетеней ' +
                  'в стационарных ящиках' +
                  ' для голосования'] - 0) +
                (d['Число избирательных ' +
                  'бюллетеней в переносных ' +
                  'ящиках для голосования'] - 0)))
      });

      var uik = data.map(function(d) {
        return d.uik;
      })

      var size = data.map(function(d) {
        return ((d['Число избирателей, ' +
                  'включенных в список избирателей'] - 0) / 500)
      })

      Plotly.plot("picture", [{
        x: turnout,
        y: putin_pct,
        text: uik,
        mode: 'markers',
        hoverinfo: 'text',
        marker: {
          opacity: 1,
          color: size,
          size: size,
          colorscale: 'Greens'
        }}], {title: 'Процент за Путина и явка',
              xaxis: {title: 'явка (%)',
                      titlefont: {
                        family: 'serif', size: 10},
                      tickfont: {family: 'serif', size: 10}},
              yaxis: {title: 'доля голосов за Путина (%)',
                      titlefont: {
                        family: 'serif', size: 10},
                      tickfont: {family: 'serif', size: 10}}});
  }
})
</script>
<script src="https://static.jsbin.com/js/render/edit.js?4.1.4"></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"https://static.jsbin.com","root":"https://jsbin.com"});</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-1656750-34', 'auto');
ga('require', 'linkid', 'linkid.js');
ga('require', 'displayfeatures');
ga('send', 'pageview');

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<!--
	Created using JS Bin
	http://jsbin.com

	Copyright (c) 2018 by ischurov (http://jsbin.com/dakuman/3/edit)

	Released under the MIT license: http://jsbin.mit-license.org
	-->
	<meta name="robots" content="noindex">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<script src="https://code.jquery.com/jquery-3.1.0.js">
	</script>
	<!-- https://bit.ly/2qUxh33 -->
	<script src="https://cdn.plot.ly/plotly-latest.min.js"> </script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.8.9/jquery.csv.js">
	</script>
	<div id="picture"
	style='width:300px; height:300px; background-color: #aaffff'>
	</div>
	<script>
	/* Plotly.plot("picture",
	[{
	x: [1, 2, 3, 4, 5],
	y: [1, 4, 9, 16, 25],
	mode: 'markers',
	marker: {
	size: [11, 15, 3, 20, 25],
	color: [1, 2, 3, 4, 5]
	}
	}]) */

	$.ajax({
	type: "GET",
	url: "https://gist.githubusercontent.com/ischurov/cb2c3a8618945d4975dbee8940515c1b/raw/cbd86c7cb5fa8fb6e94dc7ad7d40e4fa543d01c5/moscow-elections2018.csv",
	dataType: "text",
	success: function(response) {
	// эта функция вызовется в тот момент, когда будет получен ответ от сервера
	var data = $.csv.toObjects(response);
	// мы использовали библиотеку jquery-csv, чтобы распарсить
	// csv-файл и превратить его в набор javascript'овских объектов (словариков)
	console.log(data[0]);
	// в консоли можно будет посмотреть, как выглядит первый элемент массива data

	var turnout = data.map(function(d) {
	// map создаёт новый массив путём применения
	// функции ко всем элементам исходного массива
	// (в данном случае, массива data)
	return 100 * (((d['Число бюллетеней ' +
	'в стационарных ящиках' +
	' для голосования'] - 0) +
	(d['Число избирательных ' +
	'бюллетеней в переносных ' +
	'ящиках для голосования'] - 0)) /
	(d['Число избирателей, ' +
	'включенных в список избирателей'] - 0))
	// -0 позволяет превратить строку в число
	});
	var putin_pct = data.map(function(d) {
	return 100 * ((d['Путин Владимир Владимирович'] - 0) /
	((d['Число бюллетеней ' +
	'в стационарных ящиках' +
	' для голосования'] - 0) +
	(d['Число избирательных ' +
	'бюллетеней в переносных ' +
	'ящиках для голосования'] - 0)))
	});

	var uik = data.map(function(d) {
	return d.uik;
	})

	var size = data.map(function(d) {
	return ((d['Число избирателей, ' +
	'включенных в список избирателей'] - 0) / 500)
	})

	Plotly.plot("picture", [{
	x: turnout,
	y: putin_pct,
	text: uik,
	mode: 'markers',
	hoverinfo: 'text',
	marker: {
	opacity: 1,
	color: size,
	size: size,
	colorscale: 'Greens'
	}}], {title: 'Процент за Путина и явка',
	xaxis: {title: 'явка (%)',
	titlefont: {
	family: 'serif', size: 10},
	tickfont: {family: 'serif', size: 10}},
	yaxis: {title: 'доля голосов за Путина (%)',
	titlefont: {
	family: 'serif', size: 10},
	tickfont: {family: 'serif', size: 10}}});
	}
	})
	</script>
	<script src="https://static.jsbin.com/js/render/edit.js?4.1.4"></script>
	<script>jsbinShowEdit && jsbinShowEdit({"static":"https://static.jsbin.com","root":"https://jsbin.com"});</script>
	<script>
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]\|\|function(){
	(i[r].q=i[r].q\|\|[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

	ga('create', 'UA-1656750-34', 'auto');
	ga('require', 'linkid', 'linkid.js');
	ga('require', 'displayfeatures');
	ga('send', 'pageview');

	</script>

	</body>
	</html>