Skip to content

Commit cc64172

Browse files
ambarjaambarja
committed
set up geoviz
1 parent cac8f4f commit cc64172

File tree

14 files changed

+1137
-211
lines changed

14 files changed

+1137
-211
lines changed

‎404.qmd

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
---
22
title: Page Not Found
3-
image: data/images/logo.png
3+
image: data/images/antony.jpg
44
twitter-card: true
55
---
66

77
Oh No!
88

99
The page you are looking for isn't available.
1010

11-
Please try the search bar on the top to find the new location, or go back to the homepage by clicking [here](https://karatsidhu.com)
11+
Please try the search bar on the top to find the new location, or go back to the homepage by clicking [here](https://ambarja.github.io/)
1212

‎_freeze/data/geoviz/geoviz/execute-results/html.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"hash": "8b20dbb08c8484177aab8e8f05c9037e",
3+
"result": {
4+
"markdown": "---\ntitle: \"data viz gallery\"\nsubtitle: |\n A collection of datavisualizations created for challenges such as #TidyTuesday or the #30DayChartChallenge. Others resulted from personal data exploration projects found on this blog. The code can either be found in blog posts or on my github page.\npage-layout: full\ncode-tools: false\n---\n\n\n::: {.column-screen}\n\n::: {.cell}\n::: {.cell-output-display}\n```{=html}\n<div id=\"htmlwidget-06459abfba516e97e9c6\" style=\"width:100%;height:100%;\" class=\"pixgallery html-widget\"></div>\n<script type=\"application/json\" data-for=\"htmlwidget-06459abfba516e97e9c6\">{\"x\":{\"path\":[],\"caption\":[],\"dim\":\"350px\",\"gap\":\"10px\",\"type\":\"grid\"},\"evals\":[],\"jsHooks\":[]}</script>\n```\n:::\n:::\n\n:::\n\n## Comments\nDo you like the visualizations? Seen anything you want to discuss? Leave a comment, I'd be happy to hear it!",
5+
"supporting": [],
6+
"filters": [
7+
"rmarkdown/pagebreak.lua"
8+
],
9+
"includes": {
10+
"include-in-header": [
11+
"<script src=\"../../site_libs/htmlwidgets-1.5.4/htmlwidgets.js\"></script>\r\n<link href=\"../../site_libs/simplelightbox-0/css/simplelightbox.css\" rel=\"stylesheet\" />\r\n<script src=\"../../site_libs/simplelightbox-0/js/simplelightbox.js\"></script>\r\n<link href=\"../../site_libs/pixgallery-0/css/pixgallery.css\" rel=\"stylesheet\" />\r\n<script src=\"../../site_libs/pixgallery-binding-0.0.2.2001/pixgallery.js\"></script>\r\n"
12+
]
13+
},
14+
"engineDependencies": {},
15+
"preserve": {},
16+
"postProcess": true
17+
}
18+
}

‎_freeze/data/geoviz/index/execute-results/html.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"hash": "70d73ecb4eed65e4739e652fb2ee9e25",
3+
"result": {
4+
"markdown": "---\ntitle: \"Geoviz\"\nsubtitle: |\n A collection of datavisualizations created for challenges such as #TidyTuesday or the #30DayChartChallenge. Others resulted from personal data exploration projects found on this blog. The code can either be found in blog posts or on my github page.\npage-layout: full\ncode-tools: false\n---\n\n\n::: {.column-screen}\n\n::: {.cell}\n::: {.cell-output-display}\n```{=html}\n<div id=\"htmlwidget-249ec3d39dd9970059c6\" style=\"width:100%;height:100%;\" class=\"pixgallery html-widget\"></div>\n<script type=\"application/json\" data-for=\"htmlwidget-249ec3d39dd9970059c6\">{\"x\":{\"path\":[],\"caption\":[],\"dim\":\"350px\",\"gap\":\"10px\",\"type\":\"grid\"},\"evals\":[],\"jsHooks\":[]}</script>\n```\n:::\n:::\n\n:::\n\n## Comments\nDo you like the visualizations? Seen anything you want to discuss? Leave a comment, I'd be happy to hear it!",
5+
"supporting": [],
6+
"filters": [
7+
"rmarkdown/pagebreak.lua"
8+
],
9+
"includes": {
10+
"include-in-header": [
11+
"<script src=\"../../site_libs/htmlwidgets-1.5.4/htmlwidgets.js\"></script>\r\n<link href=\"../../site_libs/simplelightbox-0/css/simplelightbox.css\" rel=\"stylesheet\" />\r\n<script src=\"../../site_libs/simplelightbox-0/js/simplelightbox.js\"></script>\r\n<link href=\"../../site_libs/pixgallery-0/css/pixgallery.css\" rel=\"stylesheet\" />\r\n<script src=\"../../site_libs/pixgallery-binding-0.0.2.2001/pixgallery.js\"></script>\r\n"
12+
]
13+
},
14+
"engineDependencies": {},
15+
"preserve": {},
16+
"postProcess": true
17+
}
18+
}

‎_freeze/site_libs/pixgallery-0/css/pixgallery.css

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
/* css styles for pixgallery */
2+
3+
/* caption */
4+
5+
.slbCaption {
6+
font-size: 1em;
7+
white-space: normal;
8+
}
9+
10+
/* gallery box */
11+
12+
.pixgallery-gallery-box {
13+
display: -webkit-box;
14+
display: -ms-flexbox;
15+
display: flex;
16+
-webkit-box-orient: horizontal;
17+
-webkit-box-direction: normal;
18+
-ms-flex-direction: row;
19+
flex-direction: row;
20+
-ms-flex-wrap: wrap;
21+
flex-wrap: wrap;
22+
-webkit-box-pack: start;
23+
-ms-flex-pack: start;
24+
justify-content: flex-start;
25+
-webkit-box-align: stretch;
26+
-ms-flex-align: stretch;
27+
align-items: stretch;
28+
-ms-flex-line-pack: stretch;
29+
align-content: stretch;
30+
margin: 1em 0;
31+
}
32+
33+
.pixgallery-child-box {
34+
-webkit-box-flex: 1;
35+
-ms-flex-positive: 1;
36+
flex-grow: 1;
37+
-ms-flex-negative: 1;
38+
flex-shrink: 1;
39+
}
40+
41+
.pixgallery-child-box a:hover,
42+
.pixgallery-child-box a:focus,
43+
.pixgallery-child-box a:active {
44+
-webkit-filter: brightness(0.8);
45+
filter: brightness(0.8);
46+
}
47+
48+
.pixgallery-image-box {
49+
-o-object-fit: cover;
50+
object-fit: cover;
51+
-o-object-position: center;
52+
object-position: center;
53+
width: 100%;
54+
}
55+
56+
/* gallery grid */
57+
58+
.pixgallery-gallery-grid {
59+
display: -ms-grid;
60+
display: grid;
61+
margin-bottom: 0.5em;
62+
}
63+
64+
.pixgallery-child-grid a:hover,
65+
.pixgallery-child-grid a:focus,
66+
.pixgallery-child-grid a:active {
67+
-webkit-filter: brightness(0.8);
68+
filter: brightness(0.8);
69+
}
70+
71+
.pixgallery-image-grid {
72+
-o-object-fit: cover;
73+
object-fit: cover;
74+
width: 100%;
75+
}
76+
77+
78+

‎_freeze/site_libs/pixgallery-binding-0.0.2.2001/pixgallery.js

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
HTMLWidgets.widget({
2+
3+
name: 'pixgallery',
4+
type: 'output',
5+
6+
factory: function(el, width, height) {
7+
8+
// TODO: define shared variables for this instance
9+
10+
return {
11+
renderValue: function(opts) {
12+
pixgallery_base(el,opts);
13+
},
14+
resize: function(width, height) {
15+
// TODO: code to re-render the widget with a new size
16+
}
17+
};
18+
}
19+
});
20+
21+
function pixgallery_base(el,x){
22+
if(x.type === "box") pixgallery_box(el,x);
23+
if(x.type === "grid") pixgallery_grid(el,x);
24+
}
25+
26+
/* flex box parent and children divs have images as img --------------------- */
27+
function pixgallery_box(el,x){
28+
29+
let urls = x.path;
30+
let caption = x.caption;
31+
let dim = x.dim;
32+
let gap = x.gap;
33+
34+
let temp = '<div class="pixgallery-child-box" style="flex-basis:{dim}" id="pixgallery-{id}"><a href="{url}" title="{caption}"><img class="pixgallery-image-box" style="height:{dim};" src="{url}"></a></div>';
35+
36+
let newValues = '', limitItem = urls.length;
37+
for (let i = 0; i < limitItem; ++i) {
38+
39+
if(caption === null) {
40+
newValues += temp.replace(/\{dim\}/g, dim).replace(/\{url\}/g, urls[i]).replace("{id}",el.id).replace("title=\"{caption}\"","");
41+
} else {
42+
if(caption[i] === null) {
43+
newValues += temp.replace(/\{dim\}/g, dim).replace(/\{url\}/g, urls[i]).replace("{id}",el.id).replace("title=\"{caption}\"","");
44+
} else {
45+
newValues += temp.replace(/\{dim\}/g, dim).replace(/\{url\}/g, urls[i]).replace("{id}",el.id).replace("{caption}",caption[i]);
46+
}
47+
}
48+
}
49+
50+
document.getElementById(el.id).innerHTML = '<div class="pixgallery-gallery-box" style="gap:' + gap + ';">' + newValues + '</div>';
51+
var lightbox = new SimpleLightbox({elements: '#pixgallery-' + el.id + ' a'});
52+
}
53+
54+
/* flex grid parent and children divs have images as img -------------------- */
55+
function pixgallery_grid(el,x){
56+
57+
let urls = x.path;
58+
let caption = x.caption;
59+
let dim = x.dim;
60+
let gap = x.gap;
61+
62+
let temp = '<div class="pixgallery-child-grid" id="pixgallery-{id}"><a href="{url}" title="{caption}"><img class="pixgallery-image-grid" style="height:{dim};" src="{url}"></a></div>';
63+
64+
let newValues = '', limitItem = urls.length;
65+
for (let i = 0; i < limitItem; ++i) {
66+
67+
if(caption == null || caption[i] == null) {
68+
newValues += temp.replace(/\{dim\}/g, dim).replace(/\{url\}/g, urls[i]).replace("{id}",el.id).replace("title=\"{caption}\"","");
69+
} else {
70+
newValues += temp.replace(/\{dim\}/g, dim).replace(/\{url\}/g, urls[i]).replace("{id}",el.id).replace("{caption}",caption[i]);
71+
}
72+
}
73+
74+
document.getElementById(el.id).innerHTML = '<div class="pixgallery-gallery-grid" style="gap:' + gap + ';grid-template-columns: repeat(auto-fit, minmax(' + dim + ',1fr));grid-auto-rows:' + dim + ';">' + newValues + '</div>';
75+
var lightbox = new SimpleLightbox({elements: '#pixgallery-' + el.id + ' a'});
76+
}

0 commit comments

Comments
 (0)