Skip to content

Instantly share code, notes, and snippets.

@yeehaa123

yeehaa123/aafke.html

Created May 18, 2014 20:03
Show Gist options
  • Save yeehaa123/4a4178a4248de576d24c to your computer and use it in GitHub Desktop.
Save yeehaa123/4a4178a4248de576d24c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
aafke.html
<html>
<head>
<title>Portfolio Aafke Smal</title>
<meta charset="utf-8">
<script type="text/javascript" src="d3.v3.js"></script>
<script src='https://cdn.firebase.com/v0/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<script id="myTemplate" type="text/x-handlebars-template"></script>
<style type="text/css">
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: arial;
font-size: 11px;
}
h1 {
color: red;
font-family: arial;
font-size: 54px;
}
h2 {
color: red;
font-family: arial;
font-size: 18px;
}
ul {
color: white;
font-family: arial;
font-size: 14px;
}
a {
color: blue;
}
label {
color: white;
font-size: 16px;
font-family: arial;
}
input {
color: red;
border: 2px;
}
html {
background: url(http://cineville.nl/sites/all/files/imagecache/header_bigger_169/blog/cineville_wallpaper_2560x1600_B.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
background-color: grey;
opacity: 0.7;
}
rect {opacity: 1;}
rect:hover {opacity: 0.3;}
</style>
</head>
<body>
<div id = "up">
<h1> Portfolio </h1>
</div>
<div id="accordion">
<h2> Introduction</h2>
<ul id="intro">
<p>This is the portfolio of Aafke Smal.</p>
<p>In this accordionlike structure I want to show some things I have learned and some things that still go wrong. With every step I will tell some points/bugs that have to be improved. Most of it are fixable problems which need just some time or more googling.But there are also some bugs that I don't understand.</p>
<p>First small, but visible problem is that I made the bodybackground opaque to cover the heavy background. But now everything in the body, including the text, is opaque. I should filter it to make only the parent opaque, without the children (Although I find this kind of aesthatic in a way too.) </p>
/* Yeehaa: Just overwrite the opacity on the children. */
</ul>
<h2>assignment 1</h2>
<ul id="ass1">
<p>The famous spy!</p>
<a href="https://gist.github.com/Aafke89/9036329">link to gist </a>
</ul>
<h2>assignment 2</h2>
<ul id="ass2">
<p>This is an image of the code and the tables on the ASTpage. I don't know why but the image is just showing the first time you click on assignment 2.</p>
<img src="http://i742.photobucket.com/albums/xx69/AafkeAST/Schermafbeelding2014-04-04om184803_zpscfee746c.png"/>
<a href="https://gist.github.com/Aafke89/9036138">link to gist </a>
</ul>
<h2>assignment 3</h2>
<ul id="ass3">
<p>This is the first barchart! Looks pretty nice but it misses some things. </p>
<li>What do I see? It should have a label and an y axis</li>
<li>Because the code in the localstorage is random, it would be nice to update it each time</li>
<p><a href="https://gist.github.com/Aafke89/9207132">link to gist </a></p>
/* Yeehaa: In that case, you need to separate the d3 code into a initialization and a render block. */
</ul>
<h2>assignment 4</h2>
<ul id="ass4">
<p> Another barchart. The only improvement with this one is that I used my own data (Happynessindex vs approval of Gaymarriage in several countries) and stored that in firebase.
But as axes and labels are still missing and the link to firebase seemed to have stopped working the improvement is nihil. </p>
<p><a href="https://gist.github.com/Aafke89/9328744">link to gist </a></p>
</ul>
<h2>assignment 4.2</h2>
<ul id="ass4t">
<p> I tried to add an y axis. As you can see something went wrong with the scaling. Also the axis was almost on the barchart instead of next to it. Needs a bit more of practice </p>
</ul>
<h2>assignment 5</h2>
<ul id="ass5">
<p>In assignment 5 i chose to make a barchart again and improve it on the points that failed with the other ones. So now the barchart has axes that are scaled according to the choice the viewer makes with the button. The bars can be clicked to go to the website of a movie-theatre and i added a legend(only in the gist)<p>
<p>I also added a form so people could add their own movietheatre. Although this works, as the data is send to firebase I still didn't figure out how to get the data out again. (In this code I actually left the link out, but in ass4 it's included but not working). This is very sad, because now there is some fake interactivity and it would be very cool if you could add data on the run.<p>
<p>Another weird thing is that at first the page only showed a barchart the first time a button was pressed, but if a user wanted to change it, it didn't work anymore. Now it shows a barchart everytime a user presses the button. Better, but best would be if the barchart updated everytime a user pushes another button. </p>
/* Yeehaa: see my comment on separating initialization and rendering above */
<p> An improvement would be to structure the code better. i now use some pieces of the same code several times because that was the way I could make it work. I think with looking again at this code I could clean it a bit up to make it more clear to understand. </p>
<p><a href="https://gist.github.com/Aafke89/9980191">link to gist </a></p>
<h2> Movie-theatres in Amsterdam </h2>
<label> Show me .. </label>
<div id="button">
<div id='choicePom'>
<input name= "choicePom" type="submit" value="Price of a movie">
</div>
<div id='choicePob'>
<input name= "choicePob" type="submit" value="Price for one beer">
</div>
<div id='choiceDto'>
<input name= "choiceDto" type="submit"
value="Distance to OHMP">
</div>
</div>
<div id="barchart"> </div>
<div id='addMovieTheatre'>
<label for="movieTheatre" class="label">Movie-theatre</label>
<input name="movieTheatre" type='text' id='movieTheatre' placeholder='Name'> </div>
<div id='addMovieTheatre'>
<label for="kindOf" class="label">Kind of Movie-theatre</label>
<select name="kindOf" id='kindOf'>
<option>Choose the kind of movie-theatre</option>
<option>Cineville</option>
<option>Pathe</option>
<option>Jeffrey</option>
<option>Other</option>
</select>
</div>
<div>
<label for="price" class="label">Price for one Movie</label>
<input name="price" type='number' step ="0.5" max="15" id='price' placeholder='price'>
</div>
<div>
<label for="bikeDistance" class="label">Bike Distance from OHMP</label>
<input name="bikeDistance" type='number' step='0,5' "max=15" id='bikeDistance' placeholder='bikeDistance'>
</div>
<div>
<label for="priceofBeer" class="label">Price of Beer</label>
<input name="priceofBeer" type="number" step='any' max="5" id='priceofBeer' placeholder='priceofBeer'>
</div>
<div>
<label for="urlTheatre" class="label">Website</label>
<input name="urlTheatre" type="text" id='urlTheatre' placeholder='urlTheatre'>
</div>
<div id='submitForm'>
<input name= "submitForm" type="submit" value="Click to submit movie-theatre!">
</div>
</ul>
<h2>Conclusion</h2>
<ul id="conclusion">
<p>Things I want to improve/learn</p>
<li>Use data with firebase</li>
<li>Timing of the events</li>
<li>Using an API</li>
<li>Nicer CSS styling </li>
<li>Less code, more action</li>
<li>probably a lot more, that I don't even know about</li>
</ul>
</div>
</div>
<script>
$(function() {
var accordion = $("#accordion");
var headings = $("h2");
var paragraphs = $("ul");
paragraphs.not(":first").hide();
accordion.on("click", "h2", function() {
var t = $(this);
var tPara = t.next();
if (!tPara.is(":visible")){
tPara.trigger("showParagraph");
}
});
accordion.on("showParagraph", "ul", function(){
paragraphs.slideUp("normal");
$(this).slideDown("normal");
});
});
//code assignment 1
$("#ass1").on("mouseover", function(){
$("#ass1").append('<img id="spy" src="http://static.skynetblogs.be/media/10565/dyn003_original_250_218_pjpeg__3ee4b120bdc25370a3e5114c8b7da1e8.2.jpg"/>')});
$("#ass1").on("mouseleave", function(){
$("img").hide();
});
// code assignment 3
var dataset = [
{"name":"ut in ","rating":"4","ficticious":true},
{"name":"irure ","rating":"4","ficticious":false},
{"name":"aute velit ","rating":"3","ficticious":false},
{"name":"sed ","rating":"4","ficticious":false},
{"name":"exercitation nostrud ","rating":3,"ficticious":false},
{"name":"esse ","rating":"2","ficticious":true},
{"name":"tempor ","rating":"2","ficticious":false},
{"name":"ut labore ","rating":"3","ficticious":true},
{"name":"culpa sunt ","rating":"2","ficticious":false},
{"name":"quis ","rating":"1","ficticious":true},
{"name":"voluptate elit ","rating":"5","ficticious":true},{"name":"do voluptate ","rating":"3","ficticious":false},
{"name":"adipisicing ","rating":"4","ficticious":false},
{"name":"consequat tempor ","rating":"4","ficticious":true},
{"name":"eiusmod reprehenderit ","rating":"3","ficticious":false}];
var w = 500;
var h = 100;
var barPadding = 1;
var svg = d3.select("#ass3")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("height", function(d) {
return (d.rating) * 20;
})
.attr("width", w / dataset.length - barPadding)
.attr("x", function(d, i) {
return i * (w / dataset.length); })
.attr("y", function(d) {
return h - (d.rating) * 20;
})
.attr("fill", function(d) {
if (d.ficticious === true)
{return "blue"}
else
{return "black"}
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return (d.name.substr(0,3));
})
.attr("x", function(d, i) {
return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
})
.attr("y", "95")
.attr("font-family", "sans-serif")
.attr("font-size", "14px")
.attr("fill", "white")
.attr("text-anchor", "middle");
//code assignment 4
/*var dataset = [ ];
d3.json("https://brilliant-fire-1140.firebaseio.com/.json", function (d) {
return dataset = d.dataset
}); */
var dataset = [
{"country":"Nederland","rating":"43","gayMarriage":true},
{"country":"France","rating":"46","gayMarriage":true},
{"country":"Russia","rating":"34","gayMarriage":false},
{"country":"canada","rating":"43","gayMarriage":true},
{"country":"Jamaica","rating":"58","gayMarriage":false},
{"country":"Uruquay","rating":"39","gayMarriage":true},
{"country":"Costa Rica","rating":"64","gayMarriage":false},
{"country":"Botswana","rating":"23","gayMarriage":false},
{"country":"South Africa","rating":"28","gayMarriage":true},
{"country":"Uganda","rating":"31","gayMarriage":false}];
var w = 500;
var h = 100;
var barPadding = 1;
var svg = d3.select("#ass4")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("height", function(d) {
return (d.rating) * 2;
})
.attr("width", w / dataset.length - barPadding)
.attr("x", function(d, i) {
return i * (w / dataset.length); })
.attr("y", function(d) {
return h - (d.rating) * 2;
})
.attr("fill", function(d) {
if (!d.gayMarriage)
{return "#BF08A7"}
else
{return "#4A3748"}
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return (d.country.substr(0,3));
})
.attr("x", function(d, i) {
return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
})
.attr("y", "95")
.attr("font-family", "sans-serif")
.attr("font-size", "14px")
.attr("fill", "black")
.attr("text-anchor", "middle");
//code assignment 4.2
var margin = {top: 20, right: 10, bottom: 20, left: 30};
var outerWidth = 560;
var outerHeight = 140;
var w = outerWidth - margin.left - margin.right;
var h = outerHeight - margin.top - margin.bottom;
var barPadding = 2;
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) {return d.rating; })])
.range([h, 0]);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks (6);
var svg = d3.select("#ass4t")
.append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("height", function(d) {
return (d.rating) * 2;
})
.attr("width", w / dataset.length - barPadding)
.attr("x", function(d, i) {
return i * (w / dataset.length); })
.attr("y", function(d) {
return h - (d.rating) * 2;
})
.attr("fill", function(d) {
if (!d.gayMarriage)
{return "#BF08A7"}
else
{return "#4A3748"}
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return (d.country.substr(0,4));
})
.attr("x", function(d, i) {
return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
})
.attr("y", "95")
.attr("font-family", "sans-serif")
.attr("font-size", "14px")
.attr("fill", "black")
.attr("text-anchor", "middle");
svg.append("g")
.attr("class", "axis")
.call (yAxis)
.attr("transform", "translate(0," + outerWidth + ",0)");
// code assignment 5
// first create a form
var myDataRef = new Firebase('https://movietheatresamstrdm.firebaseio.com/dataset');
// put new variables in firebase
$("#submitForm").on("click", function(){
var movieTheatre = $('#movieTheatre').val();
var price = $('#price').val();
var bikeDistance = $('#bikeDistance').val();
var priceofBeer = $('#priceofBeer').val();
var kindOf = $('#kindOf').val();
var urlTheatre = $('#urlTheatre').val();
var newPushRef = myDataRef.push();
newPushRef.set({movieTheatre: movieTheatre, price: price, bikeDistance: bikeDistance, priceofBeer: priceofBeer, kindOf: kindOf});
});
var showThis = [];
$("#choicePom").on("click", function(){
return showThis = "pom";
});
$("#choicePob").on("click", function(){
return showThis = "pob";
});
$("#choiceDto").on("click", function(){
return showThis = "dto";
});
// create a new variable of choice
/*var choice = function(d) {return d.price};
/*$("#submitChoice").on("click", function(){
var choice = $('#showThis').val();
}) */
//including data as long as firebasereference doesn't work
var data = [
{
"price" : 4,
"bikeDistance" : 6,
"priceofBeer" : 1.5,
"kindOf" : "other",
"movieTheatre" : "Filmhuis Cavia",
"url" : "http://www.filmhuiscavia.nl/"
},
{
"price" : "0",
"bikeDistance" : "1",
"priceofBeer" : "2",
"kindOf" : "jeffrey",
"movieTheatre" : "slang",
"url" : "http://deslang.nl/agenda/#.Uz1ona1_uQk"
},
{
"price" : 9.5,
"bikeDistance" : 0.5,
"priceofBeer" : 3,
"kindOf" : "pathe",
"movieTheatre" : "Pathe de Munt",
"url" : "http://www.pathe.nl/bioscoop/demunt"
},
{
"price" : 9,
"bikeDistance" : 2,
"priceofBeer" : 2.2,
"kindOf" : "cineville",
"movieTheatre" : "Kriterion",
"url": "http://www.kriterion.nl/"
},
{
"price" : 7,
"bikeDistance" : 2,
"priceofBeer" : 2.5,
"kindOf" : "cineville",
"movieTheatre" : "Cinecentre",
"url" : "http://www.cinecenter.nl/"
}];
// People can select what they want to see (only movie-theatres in citycentre, or only movie-theatres that cost less then 6 euro's)
// so create a new form and a new var so people can choose their y-axe i.e. var choice = function (d) if.. else .. blabla.
// show a barchart of the movie-theatre
$("#button").on("click", function()
{ alert ("Look at this beautiful barchart!");
var margin = {top: 20, right: 20, bottom: 100, left: 40},
width = 500 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var barPadding = 2;
var x = d3.scale.ordinal()
.domain(d3.range(data.lenth))
.rangeRoundBands([0, width], .1);
/* var x = d3.scale.ordinal()
.domain(d3.range(data.lenth))
.rangeRoundBands([0, width], .1); */
var y = d3.scale.linear()
.domain([0, d3.max(data, function (d) {
if
(showThis == "pob")
{return d.priceofBeer;}
else if
(showThis == "pom")
{return d.price;}
else
{return d.bikeDistance;}
})])
.rangeRound([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var svg = d3.select("#barchart").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 + ")");
x.domain(data.map (function(d) {return d.movieTheatre;}));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr(
"transform", function (d){
return "rotate(-20)"
});
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text(function (d){
if
(showThis == "pob")
{return "price of beer";}
else if
(showThis == "pom")
{return "price of a movie";}
else
{return "distance to OHMP";}
});
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", width/ data.length - barPadding)
.attr("height", function (d){
if
(showThis == "pob")
{return height - y(d.priceofBeer);}
else if
(showThis == "pom")
{return height - y(d.price);}
else
{return height - y(d.bikeDistance);}
})
.attr("x", function(d, i) {
return i * (width / data.length) })
.attr("y", function(d) {
if
(showThis == "pob")
{return y(d.priceofBeer);}
else if
(showThis == "pom")
{return y(d.price);}
else
{return y(d.bikeDistance);}
})
.attr("fill", function(d) {
if (d.kindOf == "cineville")
{return "blue";}
else if (d.kindOf === "pathe")
{return "yellow";}
else if (d.kindOf === "jeffrey")
{return "orange";}
else
{return "purple";}
})
.attr("xlink:href", function (d) {
return d.url;
})
.on("click", function(d){
window.location = d.url;
});
});
</script>
</script>
</body>
</html>
// Overall
// -------
//
// I like the fact that you are so reflective in your own learning. Through
// the question that you phrase in this portfolio, you really show insight in
// where you are doing things right, and where there is room for improvement.
// Good job!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment