Skip to content

in-class-notes #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
severli93 wants to merge 6 commits into
base: master
Choose a base branch
from
Open

in-class-notes #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
25e88c5
in-class-notes
Feb 7, 2016
6c44e0a
Merge branch 'master' into severli93
Feb 7, 2016
3ea8e41
finish one solution and get stuck for a long time.....
Feb 8, 2016
99fec3f
Final Prototype
Mar 28, 2016
9d64d2d
update prototype
Mar 28, 2016
e872b0b
final project
Apr 13, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion 03/css/survey.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ svg {
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid hsla(0, 5%, 60%, 1.0);
border-left: 1px solid hsla(0, 5%, 60%, 1.0);
/* border-left: 1px solid hsla(0, 5%, 60%, 1.0);*/
}

circle {
Expand Down
203 changes: 108 additions & 95 deletions 03/js/survey.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,29 @@
(function() {
var data = [];
var dimensions = [
{ key: "criticalcommunication", value: 'Communication'},
{ key: "criticalcommunication_2", value: "Communication 2"},
{ key: "graphicdesign", value: "Graphic Design"},
{ key: "graphicdesign_2", value: "Graphic Design 2"},
{ key: "howlongdidittakeyoutogethere", value: "Travel Time"},
{ key: "howmanyhoursperweekcanyoudevotetothisclass", value: "Hours devoted"},
{ key: "howmuchsleepdidyougetlastnight", value: "Sleep"},
{ key: "howtallareyou", value: "Height"},
{ key: "javascriptwebdevelopment", value: "Software"},
{ key: "javascriptwebdevelopment_2", value: "Software 2"},
{ key: "whenwasthelasttimeyoudrewapicture", value: "Drew"},
{ key: "whenwasthelasttimeyouwenttothebeach", value: "Beach"},
{ key: "whenwasthelasttimeyouwenttothemfa", value: "MFA"}
var setupSurvey =function() {
var spreadsheetData = [];
var columnVariables = [
{key: "criticalcommunication", title: 'Communication'},
{key: "criticalcommunication_2", title: "Communication 2"},
{key: "graphicdesign", title: "Graphic Design"},
{key: "graphicdesign_2", title: "Graphic Design 2"},
{key: "howlongdidittakeyoutogethere", title: "Travel Time"},
{key: "howmanyhoursperweekcanyoudevotetothisclass", title: "Hours devoted"},
{key: "howmuchsleepdidyougetlastnight", title: "Sleep"},
{key: "howtallareyou", title: "Height"},
{key: "javascriptwebdevelopment", title: "Software"},
{key: "javascriptwebdevelopment_2", title: "Software 2"},
{key: "whenwasthelasttimeyoudrewapicture", title: "Drew"},
{key: "whenwasthelasttimeyouwenttothebeach", title: "Beach"},
{key: "whenwasthelasttimeyouwenttothemfa", title: "MFA"}
];

xAxis = dimensions[0];
yAxis = dimensions[1];
var columnToGraph = columnVariables[1];

var xLabel = function(svg, text) {
var leftMargin = 20;
var height = 400;
var width = 600;

svg.append("text")
.attr("x", width / 2)
.attr("y", height - 40)
.attr("id", "x-label")
.attr("dy", "1em")
.attr("class", 'axis-label')
.style("text-anchor", "middle")
.text(text);
};

var yLabel = function(svg, text) {
var leftMargin = 20;
var height = 400;
/***************************************************
* instructions for drawing the Y axis label in D3 *
***************************************************/
var drawYAxisLabel = function (svg, text) {
var height = 400;
svg.append("text")
.attr("transform", "translate(0," + height / 2 + ") rotate(-90)")
.attr("x", 0)
Expand All @@ -48,89 +35,115 @@
.text(text);
};

var drawSurvey = function(data) {
var svg = d3.select("#survey");
var radius = 100 / data.length;
var width = 600 - radius;
var height = 400 - radius;
/**************************************************
* this is the function that updates the D3 graph *
* @param data – the google spreadsheet data *
**************************************************/
var drawGraph = function (data) {
var svg = d3.select("#survey");
var radius = 100 / data.length;
var width = 600 - radius;
var height = 400 - radius;
var leftMargin = 40;



//Scales are functions that map from an input domain to an output range.
//Ordinal scales have a discrete domain, such as a set of names or categories.
var xScale = d3.scale.ordinal()
.domain(d3.range(data.length))
.rangeRoundPoints([leftMargin, width]);
.domain(d3.range(data.length))
.rangeRoundPoints([leftMargin, width]);

var yScale = d3.scale.linear()
.domain([0,10])
.range([height,radius]);
.domain([0, 10])
.range([height, radius]);

var colorScale = d3.scale.linear()
.domain([0,data.length])
.range([0,360]);
.domain([0, data.length])
.range([0, 360]);

var circles = svg.selectAll("circle")
.data(data);
.data(data);

circles
.enter()
.append("circle")
.append("title")
.text(function(d, i) { return "name:" + d.name});

.enter()
.append("circle")
.append("title")
.text(function (d) {
return "name:" + d.name;
});
circles.exit().remove()
circles
.attr('r', radius)
.attr('fill', function(d,i) {
var hue = colorScale(i);
return 'hsla(' + hue + ', 20%, 40%, 1.0)';
})
.attr("title", function(d,i){
return d.name;
})
.attr("cx", function(d,i){
return xScale(i);
})
.attr("cy", function(d,i){
return yScale(parseInt(d[yAxis.key]));
});

circles.exit().remove();
.attr('r', radius)
.attr('fill', function (d, i) {
var hue = colorScale(i);
return 'hsla(' + hue + ', 20%, 40%, 1.0)';
})
.attr("title", function (d) {
return d.name;
})
.attr("cx", function (d, i) {
return xScale(i);
})
.attr("cy", function (d) {
return yScale(parseInt(d[columnToGraph.key]));
});

;
};

var setData = function(d) {
data = d;
drawSurvey(data);
/*****************************************************************************
* function is called with d when the spreadsheet has loaded. *
*****************************************************************************/
var setData = function (sheet) {
spreadsheetData = sheet;
drawGraph(spreadsheetData);
};

var findDimension = function(key) {
return _.find(dimensions,function(o) { return o.key === key; });
/*****************************************************************************
* function returns an array of data for a specific column in the spreadsheet *
*****************************************************************************/
var findDataForKey = function (key) {
return _.find(columnVariables, function (o) {
return o.key === key;
});
};

var setAxis = function(x,y){
yAxis = findDimension(y) || yAxis;
d3.select("#y-label").text(yAxis.value);
drawSurvey(data);
/*****************************************************************************
* function that sets the Y axis on our graph to a given columnKey *
*****************************************************************************/
var setYAxis = function (columnKey) {
columnToGraph = findDataForKey(columnKey) || columnToGraph;
d3.select("#y-label").text(columnToGraph.title);
drawGraph(spreadsheetData);
};

var populateDropdown = function(selector, selectFun) {
/*****************************************************************************
* function that puts our column names in the dropdown menu using jQuery ($) *
*****************************************************************************/
var populateDropdown = function () {
var selectionChangedFunction = function() {
setYAxis(this.value);
};
var selector = "#selectY";
$(selector).empty();
$(selector).off("change");
_.map(dimensions, function(option) {
var optionItem = '<option value="' + option.key + '">' + option.value + '</option>';
$(selector).append(optionItem);
_.map(columnVariables, function (option) {
var optionItem = '<option value="' + option.key + '">' + option.title + '</option>';
$("#selectY").append(optionItem);
});
$(selector).on("change", selectFun);
$(selector).on("change", selectionChangedFunction);
};

$(document).ready(function() {
yLabel(d3.select("#survey"), "y axis label");
var doLoad = function() {
loadSpreadsheet("1tL7m0JNa0CZwEyU9WmB3u8j5T829jqtbnu-26ibPp5E", setData);
};
setAxis(xAxis,yAxis);
doLoad();
var interval = 5000;
setInterval(doLoad, interval);
populateDropdown("#selectY", function(e) { setAxis(xAxis, this.value); });
// This jQuery function tells the browser to run the function
// `continuouslyLoadData` when the webpage is done loading.
// `continuouslyLoadData` is defined in spreadheet.js.
// It will call our `drawGraph` function with new data every 5 seconds.
// See spreadsheet.js for the definition of `continuouslyLoadData`.
$(document).ready(function () {
drawYAxisLabel(d3.select("#survey"), "y axis label");
setYAxis(columnToGraph);
populateDropdown();
continuouslyLoadData("1tL7m0JNa0CZwEyU9WmB3u8j5T829jqtbnu-26ibPp5E", setData);
});
};

})();
setupSurvey();
128 changes: 93 additions & 35 deletions 03/survey.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,96 @@
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>IDV 01 survey</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="apple-touch-icon" href="template/img/apple-touch-icon.png">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/normalize.min.css">
<link rel="stylesheet" href="../css/boilerplate.css">
<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="css/survey.css">

<script src="../js/vendor/modernizer.min.js"></script>
<script src="../js/vendor/jquery.min.js"></script>
<script src="../js/vendor/d3.min.js"></script>
<script src="../js/vendor/lodash.min.js"></script>
<script src="../js/spreadsheet.js"></script>
<script src="js/survey.js"></script>


</head>
<body>
<div class="fixed-width">

<svg id='survey'></svg>

<div class="controlls">
<label>Y axis</label>
<select name="selectY" type="select" id="selectY"></select>
</div>
</div>
</body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>IDV 01 survey</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../../css/normalize.min.css">
<link rel="stylesheet" href="../../css/boilerplate.css">
<link rel="stylesheet" href="../../css/main.css">
<link rel="stylesheet" href="css/survey.css">

<script src="../js/vendor/modernizer.min.js"></script>
<script src="../js/vendor/jquery.min.js"></script>
<script src="../js/vendor/d3.min.js"></script>
<script src="../js/vendor/lodash.min.js"></script>
<script src="../js/spreadsheet.js"></script>
<script src="js/survey.js"></script>

<!--
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>IDV Studio 2</title>

<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="apple-touch-icon" href="./img/apple-touch-icon.png">

<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/normalize.min.css">
<link rel="stylesheet" href="../css/boilerplate.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../js/vendor/jquery.min.js"></script>
<script src="../js/solutions.js"></script>
-->
</head>
<body>
<div class="fixed-width">

<svg id='survey'></svg>

<div class="controlls">
<label>Y axis</label>
<select title="selectY" name="selectY" id="selectY"></select>
</div>
</div>
</body>
</html>




<!--<!doctype html>-->
<!--<html class="no-js" lang="">-->
<!--<head>-->
<!--<meta charset="utf-8">-->
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
<!--<title>IDV 01 survey</title>-->
<!--<meta name="description" content="">-->
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->

<!--<link rel="apple-touch-icon" href="template/img/apple-touch-icon.png">-->
<!--<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>-->
<!--<link href='https://fonts.googleapis.com/css?family=Raleway:400' rel='stylesheet' type='text/css'>-->
<!--<link rel="stylesheet" href="../css/normalize.min.css">-->
<!--<link rel="stylesheet" href="../css/boilerplate.css">-->
<!--<link rel="stylesheet" href="../css/main.css">-->
<!--<link rel="stylesheet" href="css/survey.css">-->

<!--<script src="../js/vendor/modernizer.min.js"></script>-->
<!--<script src="../js/vendor/jquery.min.js"></script>-->
<!--<script src="../js/vendor/d3.min.js"></script>-->
<!--<script src="../js/vendor/lodash.min.js"></script>-->
<!--<script src="../js/spreadsheet.js"></script>-->
<!--<script src="js/survey.js"></script>-->


<!--</head>-->
<!--<body>-->
<!--<div class="fixed-width">-->

<!--<svg id='survey'></svg>-->

<!--<div class="controlls">-->
<!--<label>Y axis</label>-->
<!--<select name="selectY" type="select" id="selectY"></select>-->
<!--</div>-->
<!--</div>-->
<!--</body>-->
<!--</html>-->
Loading