Skip to content

Commit

Permalink
Fixed hover effect & arrow in cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@christophscheuch
christophscheuch committed Nov 29, 2023
1 parent fc606af commit efc362c
Show file tree
Hide file tree
Showing 27 changed files with 285 additions and 175 deletions.
4 changes: 2 additions & 2 deletions _freeze/posts/scraping-esg-data-from-yahoo-finance/index/execute-results/html.json
View file

Large diffs are not rendered by default.

Binary file modified ...s/scraping-esg-data-from-yahoo-finance/index/figure-html/unnamed-chunk-13-1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...s/scraping-esg-data-from-yahoo-finance/index/figure-html/unnamed-chunk-14-1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...s/scraping-esg-data-from-yahoo-finance/index/figure-html/unnamed-chunk-15-1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions _freeze/posts/tidy-collaborative-filtering/index/execute-results/html.json
View file

Large diffs are not rendered by default.

Binary file added _freeze/posts/tidy-collaborative-filtering/index/figure-html/unnamed-chunk-8-1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified _freeze/posts/tidy-collaborative-filtering/index/figure-html/unnamed-chunk-9-1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 11 additions & 6 deletions assets/css/styles-blog.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ h2 {
.quarto-grid-item:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.listing-author {
display: none;
}
Expand Down Expand Up @@ -57,17 +57,22 @@ h2 {
}

.card-body::after {
content: "Read post \27A1";
content: "Read post \2192";
display: block;
margin-top: 8px;
margin-right: 9px;
margin-top: 16px;
margin-bottom: 8px;
margin-right: 8px;
font-size: .9em;
font-weight: bold;
cursor: pointer;
text-align: right;
position: relative;
}

.card-body:hover::after,
.card-body:hover::after,
.quarto-grid-item:hover .card-body::after,
.card-body:active::after {
text-decoration: underline;
}
}


19 changes: 12 additions & 7 deletions docs/assets/css/styles-blog.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ h2 {
.quarto-grid-item:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.listing-author {
display: none;
}
Expand Down Expand Up @@ -57,17 +57,22 @@ h2 {
}

.card-body::after {
content: "Read post \27A1";
content: "Read post \2192";
display: block;
margin-top: 8px;
margin-right: 9px;
margin-top: 16px;
margin-bottom: 8px;
margin-right: 8px;
font-size: .9em;
font-weight: bold;
cursor: pointer;
text-align: right;
position: relative;
}

.card-body:hover::after,
.card-body:hover::after,
.quarto-grid-item:hover .card-body::after,
.card-body:active::after {
text-decoration: underline;
}
text-decoration: underline;
}


29 changes: 18 additions & 11 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>

<meta charset="utf-8">
<meta name="generator" content="quarto-1.4.424">
<meta name="generator" content="quarto-1.4.506">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

Expand Down Expand Up @@ -94,7 +94,7 @@

<div id="quarto-search-results"></div>
<header id="quarto-header" class="headroom fixed-top">
<nav class="navbar navbar-expand-lg navbar-dark ">
<nav class="navbar navbar-expand-lg " data-bs-theme="dark">
<div class="navbar-container container-fluid">
<div class="navbar-brand-container mx-auto">
<a class="navbar-brand" href="https://www.tidy-intelligence.com">
Expand Down Expand Up @@ -138,7 +138,7 @@

<div class="quarto-listing quarto-listing-container-grid" id="listing-listing">
<div class="list grid quarto-listing-cols-3">
<div class="g-col-1" data-index="0" data-listing-date-sort="1701126000000" data-listing-file-modified-sort="1701171945028" data-listing-date-modified-sort="NaN" data-listing-reading-time-sort="10" data-listing-word-count-sort="1868">
<div class="g-col-1" data-index="0" data-listing-date-sort="1701126000000" data-listing-file-modified-sort="1701172011575" data-listing-date-modified-sort="NaN" data-listing-reading-time-sort="10" data-listing-word-count-sort="1868">
<a href="./posts/dax-seasonality/index.html" class="quarto-grid-link">
<div class="quarto-grid-item card h-100 card-left">
<p class="card-img-top">
Expand All @@ -155,7 +155,7 @@ <h5 class="no-anchor card-title listing-title">
</div>
</a>
</div>
<div class="g-col-1" data-index="1" data-listing-date-sort="1701039600000" data-listing-file-modified-sort="1701171531584" data-listing-date-modified-sort="NaN" data-listing-reading-time-sort="11" data-listing-word-count-sort="2082">
<div class="g-col-1" data-index="1" data-listing-date-sort="1701039600000" data-listing-file-modified-sort="1701259516979" data-listing-date-modified-sort="NaN" data-listing-reading-time-sort="11" data-listing-word-count-sort="2082">
<a href="./posts/scraping-esg-data-from-yahoo-finance/index.html" class="quarto-grid-link">
<div class="quarto-grid-item card h-100 card-left">
<p class="card-img-top">
Expand All @@ -166,13 +166,13 @@ <h5 class="no-anchor card-title listing-title">
Scraping ESG Data from Yahoo Finance
</h5>
<div class="card-text listing-description">
How to scrape environmental, social and governance risk scores from Yahoo Finance using R
How to scrape environmental, social and governance risk scores using R
</div>
</div>
</div>
</a>
</div>
<div class="g-col-1" data-index="2" data-listing-date-sort="1700866800000" data-listing-file-modified-sort="1701171593358" data-listing-date-modified-sort="NaN" data-listing-reading-time-sort="16" data-listing-word-count-sort="3009">
<div class="g-col-1" data-index="2" data-listing-date-sort="1700866800000" data-listing-file-modified-sort="1701172011574" data-listing-date-modified-sort="NaN" data-listing-reading-time-sort="16" data-listing-word-count-sort="3009">
<a href="./posts/clustering-binary-data/index.html" class="quarto-grid-link">
<div class="quarto-grid-item card h-100 card-left">
<p class="card-img-top">
Expand All @@ -189,7 +189,7 @@ <h5 class="no-anchor card-title listing-title">
</div>
</a>
</div>
<div class="g-col-1" data-index="3" data-listing-date-sort="1700780400000" data-listing-file-modified-sort="1700943001764" data-listing-date-modified-sort="NaN" data-listing-reading-time-sort="12" data-listing-word-count-sort="2247">
<div class="g-col-1" data-index="3" data-listing-date-sort="1700780400000" data-listing-file-modified-sort="1700924082986" data-listing-date-modified-sort="NaN" data-listing-reading-time-sort="12" data-listing-word-count-sort="2247">
<a href="./posts/tidy-data-a-recipe-for-efficient-data-analysis/index.html" class="quarto-grid-link">
<div class="quarto-grid-item card h-100 card-left">
<p class="card-img-top">
Expand All @@ -206,7 +206,7 @@ <h5 class="no-anchor card-title listing-title">
</div>
</a>
</div>
<div class="g-col-1" data-index="4" data-listing-date-sort="1684706400000" data-listing-file-modified-sort="1701171673458" data-listing-date-modified-sort="NaN" data-listing-reading-time-sort="12" data-listing-word-count-sort="2380">
<div class="g-col-1" data-index="4" data-listing-date-sort="1684706400000" data-listing-file-modified-sort="1701259011519" data-listing-date-modified-sort="NaN" data-listing-reading-time-sort="12" data-listing-word-count-sort="2380">
<a href="./posts/tidy-collaborative-filtering/index.html" class="quarto-grid-link">
<div class="quarto-grid-item card h-100 card-left">
<p class="card-img-top">
Expand All @@ -217,7 +217,7 @@ <h5 class="no-anchor card-title listing-title">
Tidy Collaborative Filtering: Building A Stock Recommender
</h5>
<div class="card-text listing-description">
A simple implementation for prototyping multiple collaborative filtering algorithms using R.
A simple implementation for prototyping multiple collaborative filtering algorithms using R
</div>
</div>
</div>
Expand Down Expand Up @@ -381,8 +381,15 @@ <h5 class="no-anchor card-title listing-title">
// Special case sections, only their first couple elements
const container = document.createElement("div");
if (note.children && note.children.length > 2) {
for (let i = 0; i < 2; i++) {
container.appendChild(note.children[i].cloneNode(true));
container.appendChild(note.children[0].cloneNode(true));
for (let i = 1; i < note.children.length; i++) {
const child = note.children[i];
if (child.tagName === "P" && child.innerText === "") {
continue;
} else {
container.appendChild(child.cloneNode(true));
break;
}
}
typesetMath(container);
return container.innerHTML
Expand Down
41 changes: 32 additions & 9 deletions docs/posts/clustering-binary-data/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>

<meta charset="utf-8">
<meta name="generator" content="quarto-1.4.424">
<meta name="generator" content="quarto-1.4.506">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

Expand Down Expand Up @@ -102,7 +102,7 @@

<div id="quarto-search-results"></div>
<header id="quarto-header" class="headroom fixed-top">
<nav class="navbar navbar-expand-lg navbar-dark ">
<nav class="navbar navbar-expand-lg " data-bs-theme="dark">
<div class="navbar-container container-fluid">
<div class="navbar-brand-container mx-auto">
<a class="navbar-brand" href="https://www.tidy-intelligence.com">
Expand Down Expand Up @@ -229,7 +229,11 @@ <h2 class="anchored" data-anchor-id="creating-sample-data">Creating sample data<
<span id="cb4-8"><a href="#cb4-8" aria-hidden="true" tabindex="-1"></a> <span class="fu">labs</span>(<span class="at">x =</span> <span class="st">"Response"</span>, <span class="at">y =</span> <span class="st">"Question"</span>, <span class="at">color =</span> <span class="st">"Cluster"</span>,</span>
<span id="cb4-9"><a href="#cb4-9" aria-hidden="true" tabindex="-1"></a> <span class="at">title =</span> <span class="st">"Visualization of simulated question responses by cluster"</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div class="cell-output-display">
<p><a href="index_files/figure-html/unnamed-chunk-4-1.png" class="lightbox" data-gallery="quarto-lightbox-gallery-1" title="Visualization of simulated question responses by cluster"><img src="index_files/figure-html/unnamed-chunk-4-1.png" class="img-fluid" alt="Visualization of simulated question responses by cluster" width="2100"></a></p>
<div>
<figure class="figure">
<p><a href="index_files/figure-html/unnamed-chunk-4-1.png" class="lightbox" data-gallery="quarto-lightbox-gallery-1"><img src="index_files/figure-html/unnamed-chunk-4-1.png" class="img-fluid figure-img" alt="Visualization of simulated question responses by cluster" width="2100"></a></p>
</figure>
</div>
</div>
</div>
</section>
Expand Down Expand Up @@ -405,7 +409,11 @@ <h2 class="anchored" data-anchor-id="model-comparison">Model comparison</h2>
<span id="cb19-8"><a href="#cb19-8" aria-hidden="true" tabindex="-1"></a> <span class="at">color =</span> <span class="st">"Model"</span>, <span class="at">linetype =</span> <span class="st">"Model"</span>,</span>
<span id="cb19-9"><a href="#cb19-9" aria-hidden="true" tabindex="-1"></a> <span class="at">title =</span> <span class="st">"Within cluster sum of squares relative to benchmark case of one cluster"</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div class="cell-output-display">
<p><a href="index_files/figure-html/unnamed-chunk-19-1.png" class="lightbox" data-gallery="quarto-lightbox-gallery-2" title="Within cluster sum of squares relative to benchmark case of one cluster"><img src="index_files/figure-html/unnamed-chunk-19-1.png" class="img-fluid" alt="Within cluster sum of squares relative to benchmark case of one cluster" width="2100"></a></p>
<div>
<figure class="figure">
<p><a href="index_files/figure-html/unnamed-chunk-19-1.png" class="lightbox" data-gallery="quarto-lightbox-gallery-2"><img src="index_files/figure-html/unnamed-chunk-19-1.png" class="img-fluid figure-img" alt="Within cluster sum of squares relative to benchmark case of one cluster" width="2100"></a></p>
</figure>
</div>
</div>
</div>
<p>Now, let us compare the proportion of positive responses within assigned clusters across models. Recall that I ranked clusters according to the total share of positive answers to ensure comparability. This approach is only possible in this type of setting where we can easily introduce such a ranking. The figure suggests that <span class="math inline">\(K\)</span>-modes performs best for the current setting as it identifies the correct responses for each cluster.</p>
Expand All @@ -427,7 +435,11 @@ <h2 class="anchored" data-anchor-id="model-comparison">Model comparison</h2>
<span id="cb20-15"><a href="#cb20-15" aria-hidden="true" tabindex="-1"></a> <span class="fu">labs</span>(<span class="at">x =</span> <span class="st">"Proportion of responses"</span>, <span class="at">y =</span> <span class="st">"Question"</span>, <span class="at">fill =</span> <span class="st">"Model"</span>,</span>
<span id="cb20-16"><a href="#cb20-16" aria-hidden="true" tabindex="-1"></a> <span class="at">title =</span> <span class="st">"Proportion of positive responses within assigned clusters"</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div class="cell-output-display">
<p><a href="index_files/figure-html/unnamed-chunk-20-1.png" class="lightbox" data-gallery="quarto-lightbox-gallery-3" title="Proportion of positive responses within assigned clusters"><img src="index_files/figure-html/unnamed-chunk-20-1.png" class="img-fluid" alt="Proportion of positive responses within assigned clusters" width="2100"></a></p>
<div>
<figure class="figure">
<p><a href="index_files/figure-html/unnamed-chunk-20-1.png" class="lightbox" data-gallery="quarto-lightbox-gallery-3"><img src="index_files/figure-html/unnamed-chunk-20-1.png" class="img-fluid figure-img" alt="Proportion of positive responses within assigned clusters" width="2100"></a></p>
</figure>
</div>
</div>
</div>
<p>Finally, let us check how well each model assigns respondents to the true cluster which is obviously not possible in real unsupervised applications. The figure below shows the true number of respondents by cluster as a dashed box and the assigned respondents as bars. The figure shows that <span class="math inline">\(K\)</span>-modes is the only model that is able to consistently assign respondents to their correct cluster.</p>
Expand All @@ -451,7 +463,11 @@ <h2 class="anchored" data-anchor-id="model-comparison">Model comparison</h2>
<span id="cb21-17"><a href="#cb21-17" aria-hidden="true" tabindex="-1"></a> <span class="at">title =</span> <span class="st">"Number of assigned respondents by cluster"</span>,</span>
<span id="cb21-18"><a href="#cb21-18" aria-hidden="true" tabindex="-1"></a> <span class="at">subtitle =</span> <span class="st">"Dashed box indicates true number of respondents by cluster"</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div class="cell-output-display">
<p><a href="index_files/figure-html/unnamed-chunk-21-1.png" class="lightbox" data-gallery="quarto-lightbox-gallery-4" title="Number of assigned respondents by cluster"><img src="index_files/figure-html/unnamed-chunk-21-1.png" class="img-fluid" alt="Number of assigned respondents by cluster" width="2100"></a></p>
<div>
<figure class="figure">
<p><a href="index_files/figure-html/unnamed-chunk-21-1.png" class="lightbox" data-gallery="quarto-lightbox-gallery-4"><img src="index_files/figure-html/unnamed-chunk-21-1.png" class="img-fluid figure-img" alt="Number of assigned respondents by cluster" width="2100"></a></p>
</figure>
</div>
</div>
</div>
<p>Let me end this post with a few words of caution: first, the ultimate outcome heavily depends on the seed chosen at the beginning of the post. The results might be quite different for other draws of respondents or initial conditions for clustering algorithms. Second, there are many more models out there that can be applied to the current setting. However, with this post I want to emphasize that it is important to consider different models at the same time and to compare them through a consistent set of measures. Ultimately, choosing the optimal number of clusters in practice requires a judgment call, but at least it can be informed as much as possible.</p>
Expand Down Expand Up @@ -619,8 +635,15 @@ <h2 class="anchored" data-anchor-id="model-comparison">Model comparison</h2>
// Special case sections, only their first couple elements
const container = document.createElement("div");
if (note.children && note.children.length > 2) {
for (let i = 0; i < 2; i++) {
container.appendChild(note.children[i].cloneNode(true));
container.appendChild(note.children[0].cloneNode(true));
for (let i = 1; i < note.children.length; i++) {
const child = note.children[i];
if (child.tagName === "P" && child.innerText === "") {
continue;
} else {
container.appendChild(child.cloneNode(true));
break;
}
}
typesetMath(container);
return container.innerHTML
Expand Down Expand Up @@ -857,7 +880,7 @@ <h2 class="anchored" data-anchor-id="model-comparison">Model comparison</h2>
});
</script>
</div> <!-- /content -->
<script>var lightboxQuarto = GLightbox({"openEffect":"zoom","selector":".lightbox","closeEffect":"zoom","descPosition":"bottom","loop":false});</script>
<script>var lightboxQuarto = GLightbox({"loop":false,"selector":".lightbox","descPosition":"bottom","openEffect":"zoom","closeEffect":"zoom"});</script>



Expand Down
Loading

0 comments on commit efc362c

Please sign in to comment.