histogram label and legend ordering, ghpages staging
This commit is contained in:
Vojtech Sedlak
Родитель
ad060ba2cb
Коммит
4f4f7e5d99
|
|
@ -8,7 +8,7 @@
|
|||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
|
||||
<link rel="stylesheet" type="text/css" href="css/vendor/AdminLTE.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/vendor/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/vendor/_all-skins.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/vendor/all-skins.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||
</head>
|
||||
<body class="hold-transition skin-black">
|
||||
|
|
@ -205,7 +205,7 @@
|
|||
<div role="tabpanel" class="tab-pane" id="about">
|
||||
<h3>About the survey and this tool</h3>
|
||||
|
||||
<p>Facebook has been in the news a lot lately and we wanted to know how you feel. We plan to use this survey to understand how Mozilla can better support and advocate for you and your personal information online. The survey was conducted using SurveyGizmo in April 2018, gathering in total 46,619 responses. The survey was meant to capture how people feel about Facebook, particularly in light of the recent Cambridge Analytica revelations. We built this tool so you can explore the results of the survey yourself.</p>
|
||||
<p>Facebook has been in the news a lot lately and we wanted to know how you feel. We plan to use these survey results to understand how Mozilla can better support and advocate for you and your personal information online. The survey was conducted using SurveyGizmo in April 2018, gathering in total 46,619 responses. The survey was meant to capture how people feel about Facebook, particularly in light of the recent Cambridge Analytica revelations. We built this tool so you can explore the results of the survey yourself.</p>
|
||||
|
||||
<p>This was not a scientific poll. This was as self-selecting survey targeted mostly at people on the Mozilla Foundation email list, the Pocket newsletter email list, through the Mozilla Twitter channel, through a Medium blog post, and through users sharing with friends and family.</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ $(document).ready(function(){
|
|||
function loadData() {
|
||||
// Show dots while data is crunched
|
||||
$('#dots').show();
|
||||
$("svg").remove();
|
||||
var surveyData = [];
|
||||
d3.csv("assets/data/"+params.question+".csv", function(d,i,columns) {
|
||||
for (var i = 7, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
|
||||
|
|
@ -227,6 +228,18 @@ $(document).ready(function(){
|
|||
$('#dots').hide();
|
||||
$('.sample-error').hide();
|
||||
|
||||
// sort object labels for histogram
|
||||
if (params.question == "q2") {
|
||||
var orderedData = [];
|
||||
for(var i=0;i<data.length;i++) {
|
||||
var number = parseInt(data[i].Answer);
|
||||
orderedData[number] = data[i];
|
||||
}
|
||||
orderedData.columns = data.columns;
|
||||
orderedData.type = data.type;
|
||||
data = orderedData;
|
||||
}
|
||||
|
||||
// set dimensions
|
||||
var margin = {top: 20, right: 30, bottom: 30, left: 50};
|
||||
var width = 0;
|
||||
|
|
@ -338,7 +351,7 @@ $(document).ready(function(){
|
|||
.attr("font-size", 12)
|
||||
.attr("border","2px solid #ddd")
|
||||
.selectAll("g")
|
||||
.data(keys.slice().reverse())
|
||||
.data(keys.slice())
|
||||
.enter().append("g")
|
||||
.attr( "transform", function(d,i) {
|
||||
xOff = (i % 4) * 150
|
||||
|
|
@ -380,9 +393,10 @@ $(document).ready(function(){
|
|||
.call(d3.axisLeft(y).ticks(5, "%").tickSize(-width))
|
||||
.append("text")
|
||||
.attr("x", 2)
|
||||
.attr("y", y(y.ticks().pop()) -5)
|
||||
.attr("y", y(y.ticks().pop()) +0.5)
|
||||
.attr("dy", "0.32em")
|
||||
.attr("fill", "#000")
|
||||
.attr("fill", "#bbb")
|
||||
.attr("font-weight", "bold")
|
||||
.attr("text-anchor", "start")
|
||||
.text("Share of total (in %)")
|
||||
|
|
|
|||
|
|
@ -6,8 +6,9 @@ var browserify = require('browserify');
|
|||
var del = require('del');
|
||||
var concat = require('gulp-concat');
|
||||
var runSequence = require('run-sequence');
|
||||
//var ghPages = require('gulp-gh-pages');
|
||||
var ghPages = require('gulp-gh-pages');
|
||||
var imagemin = require('gulp-imagemin');
|
||||
var rename = require('gulp-rename');
|
||||
|
||||
var paths = {
|
||||
sass:'src/scss/',
|
||||
|
|
@ -80,6 +81,7 @@ gulp.task('copy:adminLTE-css', () =>
|
|||
|
||||
gulp.task('copy:adminLTE-skin', () =>
|
||||
gulp.src(['node_modules/admin-lte/dist/css/skins/_all-skins.min.css*'])
|
||||
.pipe(rename('all-skins.min.css'))
|
||||
.pipe(gulp.dest(`${paths.dist}/css/vendor`))
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -8,9 +8,10 @@
|
|||
},
|
||||
"author": "Vojtech Sedlak",
|
||||
"devDependencies": {
|
||||
"bootstrap": "^4.0.0",
|
||||
"browser-sync": "^2.23.6",
|
||||
"browserify": "^16.0.0",
|
||||
"del": "^3.0.0",
|
||||
"gulp-gh-pages": "^0.5.4",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-imagemin": "^4.1.0",
|
||||
|
|
@ -18,12 +19,13 @@
|
|||
"gulp-sass": "^3.1.0",
|
||||
"jshint": "^2.9.5",
|
||||
"run-sequence": "^2.2.1",
|
||||
"sass": "^1.0.0-beta.5.2"
|
||||
"sass": "^1.0.0-beta.5.2",
|
||||
"gulp-rename": "^1.2.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"admin-lte": "2.4.0",
|
||||
"bootstrap": "^4.0.0",
|
||||
"d3": "^5.1.0",
|
||||
"del": "^3.0.0",
|
||||
"express": "^4.16.3",
|
||||
"habitat": "^3.1.2",
|
||||
"jquery": "^3.3.1"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
|
||||
<link rel="stylesheet" type="text/css" href="css/vendor/AdminLTE.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/vendor/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/vendor/_all-skins.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/vendor/all-skins.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||
</head>
|
||||
<body class="hold-transition skin-black">
|
||||
|
|
@ -205,7 +205,7 @@
|
|||
<div role="tabpanel" class="tab-pane" id="about">
|
||||
<h3>About the survey and this tool</h3>
|
||||
|
||||
<p>Facebook has been in the news a lot lately and we wanted to know how you feel. We plan to use this survey to understand how Mozilla can better support and advocate for you and your personal information online. The survey was conducted using SurveyGizmo in April 2018, gathering in total 46,619 responses. The survey was meant to capture how people feel about Facebook, particularly in light of the recent Cambridge Analytica revelations. We built this tool so you can explore the results of the survey yourself.</p>
|
||||
<p>Facebook has been in the news a lot lately and we wanted to know how you feel. We plan to use these survey results to understand how Mozilla can better support and advocate for you and your personal information online. The survey was conducted using SurveyGizmo in April 2018, gathering in total 46,619 responses. The survey was meant to capture how people feel about Facebook, particularly in light of the recent Cambridge Analytica revelations. We built this tool so you can explore the results of the survey yourself.</p>
|
||||
|
||||
<p>This was not a scientific poll. This was as self-selecting survey targeted mostly at people on the Mozilla Foundation email list, the Pocket newsletter email list, through the Mozilla Twitter channel, through a Medium blog post, and through users sharing with friends and family.</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ $(document).ready(function(){
|
|||
function loadData() {
|
||||
// Show dots while data is crunched
|
||||
$('#dots').show();
|
||||
$("svg").remove();
|
||||
var surveyData = [];
|
||||
d3.csv("assets/data/"+params.question+".csv", function(d,i,columns) {
|
||||
for (var i = 7, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
|
||||
|
|
@ -227,6 +228,18 @@ $(document).ready(function(){
|
|||
$('#dots').hide();
|
||||
$('.sample-error').hide();
|
||||
|
||||
// sort object labels for histogram
|
||||
if (params.question == "q2") {
|
||||
var orderedData = [];
|
||||
for(var i=0;i<data.length;i++) {
|
||||
var number = parseInt(data[i].Answer);
|
||||
orderedData[number] = data[i];
|
||||
}
|
||||
orderedData.columns = data.columns;
|
||||
orderedData.type = data.type;
|
||||
data = orderedData;
|
||||
}
|
||||
|
||||
// set dimensions
|
||||
var margin = {top: 20, right: 30, bottom: 30, left: 50};
|
||||
var width = 0;
|
||||
|
|
@ -338,7 +351,7 @@ $(document).ready(function(){
|
|||
.attr("font-size", 12)
|
||||
.attr("border","2px solid #ddd")
|
||||
.selectAll("g")
|
||||
.data(keys.slice().reverse())
|
||||
.data(keys.slice())
|
||||
.enter().append("g")
|
||||
.attr( "transform", function(d,i) {
|
||||
xOff = (i % 4) * 150
|
||||
|
|
@ -380,9 +393,10 @@ $(document).ready(function(){
|
|||
.call(d3.axisLeft(y).ticks(5, "%").tickSize(-width))
|
||||
.append("text")
|
||||
.attr("x", 2)
|
||||
.attr("y", y(y.ticks().pop()) -5)
|
||||
.attr("y", y(y.ticks().pop()) +0.5)
|
||||
.attr("dy", "0.32em")
|
||||
.attr("fill", "#000")
|
||||
.attr("fill", "#bbb")
|
||||
.attr("font-weight", "bold")
|
||||
.attr("text-anchor", "start")
|
||||
.text("Share of total (in %)")
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче