My project allows one to discover the progressive tobacco banning in multiple countries from 2007, 2010, and 2012.
file:///Users/ariellasaragossi/Desktop/Data%20Design%20Web/project2/FINAL_PROJECT.html
CODE: Processing, HTML, CSS, and JavaScript
Processing:
import processing.pdf.*;
PFont font;
//colors
color red = color(201,49,45);
color yellow = color(239,188,95);
color blue = color(13,98,164);
color green = color(136,185,73);
color pink = color(205,30,137);
color purple = color(130,65,150);
color Lightblue = color(132,195,232);
color Lightgreen = color(156,163,65);
color brown= color(117,80,27);
color Mblue = color(112,140,154);
color Darkgreen = color(50,71,19);
color berry= color(163,16,143);
color yellowgreen = color(195,200,141);
color Skyblue = color(17,63,86);
color Lightpurple = color(200,112,188);
color Lightbrown = color(161,141,126);
void setup(){
noLoop();
size(700, 10000);
background(255);
font = loadFont(“MalayalamSangamMN-48.vlw”);
textFont(font, 17);
textAlign(RIGHT);
}
int count = 0;
int newCount = 0;
String indicator;
String answer;
String country;
String year;
void draw(){
beginRecord(PDF, “2012.pdf”);
Table boxes = loadTable ( “country.csv”, “header”);
String lastCountry = “”;
for(TableRow row : boxes.rows() ){
country = row.getString(“Country”);
indicator = row.getString(“Indicator”);
answer = row.getString(“Display Value”);
year = row.getString(“Year”);
if (!country.equals(lastCountry)) {
// println(country);
newCount++;
fill(0);
text(country, 190, (newCount*45)+13);
lastCountry = country;
}
drawSquare(newCount);
// drawBox(“Internet”, “2007”, 200, red);
// drawBox(“Point of sale”, “2007”, 225, blue);
// drawBox(“Local magazines and newspapers”, “2007”, 250, green);
}
endRecord();
}
String thisYear = “2012”;
void drawSquare(int count){
int xPos = 0;
color thisColour = color(255, 0);
if(indicator.equals(“Internet”) && year.equals(thisYear)){
thisColour = red;
xPos = 200;
}
if(indicator.equals(“Point of sale”) && year.equals(thisYear)){
thisColour = yellow;
xPos = 225;
}
if(indicator.equals(“Local magazines and newspapers”) && year.equals(thisYear)){
thisColour = blue;
xPos = 250;
}
if(indicator.equals(“International magazines and newspapers”) && year.equals(thisYear)){
thisColour = green;
xPos = 275;
}
if(indicator.equals(“Billboard and outdoor advertising”) && year.equals(thisYear)){
thisColour = pink;
xPos = 300;
}
if(indicator.equals(“National television and radio”) && year.equals(thisYear)){
thisColour = purple;
xPos = 325;
}
if(indicator.equals(“Compliance with bans on direct advertising”) && year.equals(thisYear)){
thisColour = Lightblue;
xPos = 350;
}
if(indicator.equals(“International television and radio”) && year.equals(thisYear)){
thisColour = Lightgreen;
xPos = 375;
}
if(indicator.equals(“Brand name of non-tobacco products used for tobacco product”) && year.equals(thisYear)){
thisColour = brown;
xPos = 400;
}
if(indicator.equals(“Ban on appearance of tobacco brands in TV and/or films (product placement)”) && year.equals(thisYear)){
thisColour = Mblue;
xPos = 425;
}
if(indicator.equals(“Sponsored events”) && year.equals(thisYear)){
thisColour = Darkgreen;
xPos = 450;
}
if(indicator.equals(“Promotional discounts”) && year.equals(thisYear)){
thisColour = berry;
xPos = 475;
}
if(indicator.equals(“Non-tobacco products identified with tobacco brand names”) && year.equals(thisYear)){
thisColour = yellowgreen;
xPos = 500;
}
if(indicator.equals(“Free distribution in mail or through other means”) && year.equals(thisYear)){
thisColour = Skyblue;
xPos = 525;
}
if(indicator.equals(“Appearance of tobacco products in TV and/or films”) && year.equals(thisYear)){
thisColour = Lightpurple;
xPos = 550;
}
if(answer.equals(“Yes”)){
fill(255, 0, 0, 0);
}else{
fill(thisColour);
}
stroke(thisColour);
rect(xPos, count*45, 20, 20);
}
PFont font;
//colors
color red = color(201,49,45);
color yellow = color(239,188,95);
color blue = color(13,98,164);
color green = color(136,185,73);
color pink = color(205,30,137);
color purple = color(130,65,150);
color Lightblue = color(132,195,232);
color Lightgreen = color(156,163,65);
color brown= color(117,80,27);
color Mblue = color(112,140,154);
color Darkgreen = color(50,71,19);
color berry= color(163,16,143);
color yellowgreen = color(195,200,141);
color Skyblue = color(17,63,86);
color Lightpurple = color(200,112,188);
color Lightbrown = color(161,141,126);
void setup(){
noLoop();
size(700, 10000);
background(255);
font = loadFont(“MalayalamSangamMN-48.vlw”);
textFont(font, 17);
textAlign(RIGHT);
}
int count = 0;
int newCount = 0;
String indicator;
String answer;
String country;
String year;
void draw(){
beginRecord(PDF, “2012.pdf”);
Table boxes = loadTable ( “country.csv”, “header”);
String lastCountry = “”;
for(TableRow row : boxes.rows() ){
country = row.getString(“Country”);
indicator = row.getString(“Indicator”);
answer = row.getString(“Display Value”);
year = row.getString(“Year”);
if (!country.equals(lastCountry)) {
// println(country);
newCount++;
fill(0);
text(country, 190, (newCount*45)+13);
lastCountry = country;
}
drawSquare(newCount);
// drawBox(“Internet”, “2007”, 200, red);
// drawBox(“Point of sale”, “2007”, 225, blue);
// drawBox(“Local magazines and newspapers”, “2007”, 250, green);
}
endRecord();
}
String thisYear = “2012”;
void drawSquare(int count){
int xPos = 0;
color thisColour = color(255, 0);
if(indicator.equals(“Internet”) && year.equals(thisYear)){
thisColour = red;
xPos = 200;
}
if(indicator.equals(“Point of sale”) && year.equals(thisYear)){
thisColour = yellow;
xPos = 225;
}
if(indicator.equals(“Local magazines and newspapers”) && year.equals(thisYear)){
thisColour = blue;
xPos = 250;
}
if(indicator.equals(“International magazines and newspapers”) && year.equals(thisYear)){
thisColour = green;
xPos = 275;
}
if(indicator.equals(“Billboard and outdoor advertising”) && year.equals(thisYear)){
thisColour = pink;
xPos = 300;
}
if(indicator.equals(“National television and radio”) && year.equals(thisYear)){
thisColour = purple;
xPos = 325;
}
if(indicator.equals(“Compliance with bans on direct advertising”) && year.equals(thisYear)){
thisColour = Lightblue;
xPos = 350;
}
if(indicator.equals(“International television and radio”) && year.equals(thisYear)){
thisColour = Lightgreen;
xPos = 375;
}
if(indicator.equals(“Brand name of non-tobacco products used for tobacco product”) && year.equals(thisYear)){
thisColour = brown;
xPos = 400;
}
if(indicator.equals(“Ban on appearance of tobacco brands in TV and/or films (product placement)”) && year.equals(thisYear)){
thisColour = Mblue;
xPos = 425;
}
if(indicator.equals(“Sponsored events”) && year.equals(thisYear)){
thisColour = Darkgreen;
xPos = 450;
}
if(indicator.equals(“Promotional discounts”) && year.equals(thisYear)){
thisColour = berry;
xPos = 475;
}
if(indicator.equals(“Non-tobacco products identified with tobacco brand names”) && year.equals(thisYear)){
thisColour = yellowgreen;
xPos = 500;
}
if(indicator.equals(“Free distribution in mail or through other means”) && year.equals(thisYear)){
thisColour = Skyblue;
xPos = 525;
}
if(indicator.equals(“Appearance of tobacco products in TV and/or films”) && year.equals(thisYear)){
thisColour = Lightpurple;
xPos = 550;
}
if(answer.equals(“Yes”)){
fill(255, 0, 0, 0);
}else{
fill(thisColour);
}
stroke(thisColour);
rect(xPos, count*45, 20, 20);
}
HTML:
<div class=”category compliance_with_bans” id=”Compliance_with_bans_on_direct_advertising”>
<p> Compliance With Bans on Direct Advertising</p>
</div>
<div class=”category national_television_and_radio” id=”National_television_and_radio”>
<p> National Television and Radio</p>
</div>
<div class=”category billboard_and_outdoor_ads” id=”Billboard_and_outdoor_advertising”>
<p> Billboard and Outdoor Advertising</p>
</div>
<div class=”category international_magazines” id=”International_magazines_and_newspapers”>
<p> International Magazines and Newspapers</p>
</div>
<div class=”category local_magazines” id=”Local_magazines_and_newspapers”>
<p> Local Magazines and Newspapers</p>
</div>
<div class=”category point_of_sale” id=”PointofSale”>
<p> Point of Sale</p>
</div>
<div class=”category internet” id=”Internet”>
<p> Internet</p>
</div>
</div> <!– end column 2 –>
</div> <!– end centerThis –>
<div id=”imageBox”>
<img id=”image2007″ src=”2007.png”>
<img id=”image2010″ src=”2010.png”>
<img id=”image2012″ src=”2012.png”>
</div>
<p id= “arrow”>➤</p>
<div id=”fade”>
<div class=”apperance_tobacco” id=”apperance_tobacco”></div>
<div class=”free_distri” id=”free_distri”></div>
<div class=”non_tobacco_products” id=”non_tobacco_products”></div>
<div class=”promotional_discounts” id=”promotional_discounts”></div>
<div class=”sponsored_events” id=”sponsored_events”></div>
<div class=”ban_on_appearances” id=”ban_on_appearances”></div>
<div class=”brand_names_of_non_tobacco” id=”brand_names_of_non_tobacco”></div>
<div class=”international_tel” id=”international_tel”></div>
<div class=”compliance_with_bans” id=”compliance_with_bans”></div>
<div class=”national_television_and_radio” id=”national_television_and_radio”></div>
<div class=”billboard_and_outdoor_ads” id=”billboard_and_outdoor_ads”></div>
<div class=”international_magazines” id=”international_magazines”></div>
<div class=”local_magazines” id=”local_magazines”></div>
<div class=”point_of_sale” id=”point_of_sale”></div>
<div class=”internet” id=”internet”></div>
</div>
<script type=”text/javascript” src=”main.js”></script>
<a id= “source” href=”http://apps.who.int/gho/data/node.main.1290?lang=en”> Source: World Health Organization, Enforce Bans On Tobacco Advertising http://apps.who.int/gho/data/node.main.1290?lang=en</a>
<div id= “boxesRef”>
<div id=”press”>KEY</div>
<div id=”legend”>
<div id=”yes”></div><p>allowed</p>
<div id=”no”></div><p>banned</p>
</div>
</div>
</body>
</html>
JavaScript: main
css : final
Comp:
