ischurov · May 10, 2018 22:25
diff --git a/plotly-elections-example.html b/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>