r-d3

diy.Rmd

---
title: "Calendar - DIYD3"
output: 
  html_document:
    df_print: paged
    # template: heatmap_template.html
---

```{r echo = F, results = 'asis'}
knitr::opts_chunk$set(
  echo = F
)
import::from(magrittr, "%>%")
library(ggplot2)
library(r2d3)
theme_set(theme_minimal())

daily_sales <- gt::pizzaplace %>% 
  dplyr::filter(size < "T") %>% 
  dplyr::transmute(
    date = readr::parse_date(date),
    size = forcats::as_factor(size) %>% 
      forcats::fct_relevel("S", "M", "L") %>% 
      forcats::fct_explicit_na()
  ) %>% 
  dplyr::count(date, size) %>%
  tidyr::complete(
    date = tidyr::full_seq(date, 1), 
    tidyr::nesting(size), 
    fill = list(n = 0)
  ) %>% 
  tidyr::spread(size, n) %>% 
  dplyr::transmute(
    date,
    date_day_week = lubridate::wday(date),
    date_day_week_lbl = lubridate::wday(date, label = T),
    date_day_month = lubridate::day(date),
    date_day_year = lubridate::yday(date),
    date_week_month = magrittr::subtract(
      lubridate::week(date),
      lubridate::floor_date(date, "month") %>% 
       lubridate::week() - 1
    ),
    date_week_year = lubridate::week(date),
    date_month_year = lubridate::month(date, label = T),
    date_year = lubridate::year(date),
    S = ifelse(date_day_week %in% c(1, 7) & runif(365) <= 0.975, 0, S),
    M = ifelse(date_day_week %in% c(1, 7) & runif(365) <= 0.975, 0, M),
    L = ifelse(date_day_week %in% c(1, 7) & runif(365) <= 0.975, 0, L),
    alpha = ifelse(
      (S + M + L) > 0,
      (S + M + L) / max(S + M + L),
      1
    ),
    fill = ifelse(
      (S + M + L) > 0,
      "#ef4136",
      "#bcbdbc"
    )
  )
htmltools::tags$script(src = "https://code.jquery.com/jquery-3.1.1.min.js")
htmltools::tags$script(src = "https://d3js.org/d3.v4.min.js")
daily_sales %>% 
  jsonlite::toJSON(
    dataframe = "rows"
  ) %>% 
  sprintf("var sales = %s", .) %>% 
  htmltools::tags$script()
htmltools::tags$script(src = "./heatmap.js")
```

# Heatmap

heatmap.js

document.addEventListener("DOMContentLoaded", function(e) {
    var w = parseInt(d3.select("#heatmap").style("width"))
    var h = w / 3
    
    var heatmap = d3.select("body")
        .select("#heatmap")
        .append("svg")
        .attr("width", w)
        .attr("height", h)
    
    heatmap.selectAll("rect")
        .data(sales)
        .enter()
        .append('rect')
            .attr('width', '8px')
            .attr('height', '8px')
            .attr('x', function(d) { return d.date_week_year * 12})
            .attr('y', function(d) { return (d.date_day_week) * 12})
            .attr('fill', function(d) {return d.fill})
            .attr('stroke', '#bcbdbe')
            .attr('stroke-wdith', '1px')
            .attr('data-toggle', 'tooltip')
            .attr('data-placement', 'top')
            .attr('title', 'hello')
            .style('opacity', function(d) { return d.alpha  })
            .on('mouseover', function(d, i) {
                d3.select(this)
                .attr('stroke', '#231f20')
                .attr('stroke-wdith', '5px');
            })
            .on('mouseout', function(d, i) {
                d3.select(this).attr('stroke', '#bcbdbe');
                d3.select(this).attr('stroke-wdith', '1px');
                d3.select('#lbl-' + i).remove()
            })
});