Color World: Collect data from Google Form and insert into CartoDB

Steps for building a google form + cartodb table to collect data

Figure out what data you want to collect. I'm going to collect

What color people like (color)
Where they are located (location)

Create a table to store the results

Create blank table with columns for color and location

Create a form to collect data

docs.google.com
select Create new Form
create form
store results in a new spreadsheet

Go to the new spreadsheet

Tools
Script editor
Create a script for => Spreadsheet

Edit script

rename to CartoDBColors
use the attached set of functions
add trigger on onFormSubmit for 'on form submit'

Share your form with the world!

enjoy data collection straight into CartoDB :)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    
    <title>CartoDB map of Colors</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
    
    
    <style>
    /* Change the styles below in order to customize your template */

body{font-family: Helvetica, Arial; font-weight: regular; font-size: 15px; color: #555; background-color: #FFF; margin: 0;}
    h1{font-weight: bold; font-size: 31px; letter-spacing: -1px; color: #333; line-height: 33px;}
    h3{font-weight: bold; font-size: 12px; color: #CCC; text-transform: uppercase; margin: 10px 0 0 0;}
    p{margin: 8px 0 20px 0; line-height: 18px;}
    a, a:visited{color: #397DB8; text-decoration: none;}
    a:hover{text-decoration: underline;}

.wrapper{display: block; padding: 4px 30px 0 30px;}

.map{background-color:#eee; position: absolute; top: 0; left: 0; bottom: 0; width: 67%; *height:100%;}
    .sidepanel{background-color:#FFF; position: absolute; top: 0; right: 0; bottom: 0; width: 33%; height: 100%; overflow: auto;}

.context{font-family: Helvetica, Arial; font-size: 13px; color: #999; padding: 10px 0 0 0;}
    .subheader{border-bottom: 1px solid #ddd;}
    .footer{border-top: 1px solid #ddd; margin-top: 30px;}
    .titleBlock{text-align: right;}
    /* Here are the styles that makes the template responsive */
    @media only screen and (max-width: 768px) {
      .map{position: inherit; height: 400px; width: 100%; display: block;}
      .sidepanel{position: inherit; width: 100%;}
    }
    @media only screen and (max-width: 480px) {
      .map {height: 300px;}
    }
    .bar rect {
      shape-rendering: crispEdges;
    }
    .bar text {
      text-anchor: end;
    }
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
    </style>

</head>
  <body>

<div class="sidepanel">
      <div class="wrapper">
        <div class="context subheader">
          <p>Map created by <a href="https://twitter.com/andrewxhill">andrewxhill</a></p>
        </div>
        <h1>Rank Colors</h1>
        <div id="graph"></div>

<div class="context footer">
          <p>Create your maps with ease using <a href="https://cartodb.com">CartoDB</a></p></p>
        </div>
      </div>
    </div>

<script type="text/javascript">

cartodb.createVis('map', 'https://viz2.cartodb.com/api/v1/viz/color_world/viz.json');

var formatPercent = d3.format(".1%");

console.log($("#graph").width())
      var margin = {top: 10, right: 30, bottom: 30, left: 30},
          width = $("#graph").width() - margin.left - margin.right,
          height = 500 - margin.top - margin.bottom;

var data_query = "SELECT named_color, count, hex FROM (SELECT distinct named_color, count(*) as count FROM color_world GROUP BY named_color) a, named_colors WHERE named_color = color ORDER BY count DESC";
      var data_host = "https://viz2.cartodb.com/"
      var api_route = "api/v2/sql?q="

d3.json(data_host + api_route + encodeURIComponent(data_query), function(error, results) {

var histogram = results.rows;
        var n = d3.sum(histogram, function(d) { return d.count; });

var y = d3.scale.linear()
            .range([0, height]);

var x = d3.scale.linear()
            .domain([0, histogram[0].count])
            .range([width, 0]);

var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom");

var svg = d3.select("#graph").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
          .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

y.domain([0, d3.max(histogram, function(d) { return d.count; })]);

var bar = svg.insert("g", ".axis")
            .attr("class", "bar")
          .selectAll("g")
            .data(histogram)
          .enter().append("g")
            .attr("transform", function(d) { return "translate(" + x(d.x) + ",0)"; });

var barw = Math.floor(height/histogram.length);

bar.append("rect")
            .attr("class", "a")
            .attr("y", function(d,i) { return i*barw; })
            .attr("x", function(d) { return x(d.count); })
            .attr("fill", function(d) { return d.hex; })
            .attr("height", barw-2)
            .attr("width", function(d) { return width - x(d.count); });
      });

</script>

</body>
      </html>

Modified http://libs.cartocdn.com/cartodb.js/v3/cartodb.js to a secure url

Modified http://d3js.org/d3.v3.js to a secure url

https://libs.cartocdn.com/cartodb.js/v3/cartodb.js

https://d3js.org/d3.v3.js