Megan's Note

        
function getWeather(){
            axios.get(
                'https://api.openweathermap.org/data/2.5/weather?lat=22.63&lon=120.30&units=metric&appid={這裡放API ID}&lang=zh_tw'
            )
            .then(response => {
                let thisData = response.data;
                let city = document.querySelector('#city');
                let temperature = document.querySelector('#temperature');
                let feel = document.querySelector('#feel');
                let weather = document.querySelector('#weather');
                let icon = document.querySelector('#icon');
                let sunrise = document.querySelector('#sunrise');
                let sunset = document.querySelector('#sunset');
                city.textContent = thisData.name;
                temperature.textContent = thisData.main.temp;
                feel.textContent = thisData.main.feels_like;
                weather.textContent = thisData.weather[0].description;
                icon.src = `http://openweathermap.org/img/w/${thisData.weather[0].icon}.png`;
                sunrise.textContent = new Date(thisData.sys.sunrise*1000).toLocaleTimeString();
                sunset.textContent = new Date(thisData.sys.sunset*1000).toLocaleTimeString();
            })
            .catch(error => {
                console.log(error);
            }) 
        };

function downloadPNG(dataUrl, filename) {
    const link = document.createElement('a');
    link.href = dataUrl;
    link.download = filename;
    link.click();
}
function png2File(){
    htmlToImage.toPng(document.getElementById('divList'))
    .then(function (dataUrl) {
        console.log(dataUrl);
        const outputFileName = 'yourFileName';
        downloadPNG(dataUrl, outputFileName);
});
}  

function svg2DataUrl(){
            function filter (node) {
                return (node.tagName !== 'i');
            }
            // html to svgURL
            htmlToImage.toSvg(document.getElementById('divList'), { filter: filter })
            .then(function (dataUrl) {
                console.log(dataUrl);
                const outputFileName = 'SVG';
                svgDataUrlToFile(dataUrl, outputFileName);

            })
            .catch(function (error) {
                console.error('oops, something went wrong!', error);
            });
    }

    function svgDataUrlToFile(svgDataUrl, outputFileName) {
        // parsing SVG Data URL
        const encodedData = svgDataUrl.substring("data:image/svg+xml;charset=utf-8,".length);
        const decodedData = decodeURIComponent(encodedData);

        // create Blob obj
        const blob = new Blob([decodedData], { type: "image/svg+xml" });

        // create downloadLink element
        const downloadLink = document.createElement("a");
        downloadLink.href = URL.createObjectURL(blob);
        downloadLink.download = outputFileName;
        console.log(downloadLink);
        // click downloadLink
        downloadLink.click();
    }

ggplot(data = faithful) + 
  geom_point(mapping = aes(x = eruptions, y = waiting))

# fits a model that predicts price from carat 
# and then computes the residuals (the difference between the predicted value and the actual value) ---


library(modelr)

# log transformation makes the pattern linear
mod <- lm(log(price) ~ log(carat), data = diamonds)

# add column "resid"
diamonds2 <- diamonds %>% 
  add_residuals(mod) %>% 
  mutate(resid = exp(resid))

# the following scatterplot show that the strong relationship between carat and price 
# have removed (?????)
ggplot(data = diamonds2) + 
  geom_point(mapping = aes(x = carat, y = resid))

# the relationship between "cut" and "price"
ggplot(data = diamonds2) + 
  geom_boxplot(mapping = aes(x = cut, y = resid))
# relative to their size, better quality diamonds are more expensive
# 然而我覺得以肉眼來看關係沒有很強......

ggplot(data = faithful, mapping = aes(x = eruptions)) + 
  geom_freqpoly(binwidth = 0.25)

# rewriting the previous plot more concisely
ggplot(faithful, aes(eruptions)) + 
  geom_freqpoly(binwidth = 0.25)

ggplot(data = diamonds) +
  geom_count(mapping = aes(x = cut, y = color))

diamonds %>% 
  count(color, cut)
#> # A tibble: 35 x 3
#>   color cut           n
#>   <ord> <ord>     <int>
#> 1 D     Fair        163
#> 2 D     Good        662
#> 3 D     Very Good  1513
#> 4 D     Premium    1603
#> 5 D     Ideal      2834
#> 6 E     Fair        224
#> # … with 29 more rows

diamonds %>% 
  count(color, cut) %>%  
  ggplot(mapping = aes(x = color, y = cut)) +
    geom_tile(mapping = aes(fill = n))

# show the distribution of cut within color

library(viridis)
diamonds %>%
  count(color, cut) %>%
  group_by(color) %>%
  mutate(prop = n / sum(n)) %>%
  ggplot(mapping = aes(x = color, y = cut)) +
  geom_tile(mapping = aes(fill = prop)) +
  scale_fill_viridis(limits = c(0, 1)) # from the viridis colour palette library

# show the distribution of color within cut
diamonds %>%
  count(color, cut) %>%
  group_by(cut) %>%
  mutate(prop = n / sum(n)) %>%
  ggplot(mapping = aes(x = color, y = cut)) +
  geom_tile(mapping = aes(fill = prop)) +
  scale_fill_viridis(limits = c(0, 1))

# how average flight delays vary by destination and month of year?
library("nycflights13")
flights %>%
  group_by(month, dest) %>%
  summarise(dep_delay = mean(dep_delay, na.rm = TRUE)) %>%
  ggplot(aes(x = factor(month), y = dest, fill = dep_delay)) +
  geom_tile() +
  labs(x = "Month", y = "Destination", fill = "Departure Delay")

library("nycflights13")
library(viridis)
flights %>%
  group_by(month, dest) %>%
  summarise(dep_delay = mean(dep_delay, na.rm = TRUE)) %>%
# set (na.rm = TRUE) to remove missing value
  group_by(dest) %>%
  filter(n() == 12) %>%
# (84 different levels of "dest") * (sample size = 12)
  ungroup() %>%
  mutate(dest = reorder(dest, dep_delay)) %>%
  ggplot(aes(x = factor(month), y = dest, fill = dep_delay)) +
  geom_tile() +
  scale_fill_viridis() +
  labs(x = "Month", y = "Destination", fill = "Departure Delay")

# aes(x = cut, y = color)
diamonds %>%
  count(color, cut) %>%
  ggplot(mapping = aes(y = color, x = cut)) +
  geom_tile(mapping = aes(fill = n))

# aes(y = cut, x = color)
diamonds %>%
  count(color, cut) %>%
  ggplot(mapping = aes(x = color, y = cut)) +
  geom_tile(mapping = aes(fill = n))

ggplot(data = diamonds) +
  geom_point(mapping = aes(x = carat, y = price))

# an exponential relationship between "carat" and "price"

ggplot(data = diamonds) + 
  geom_point(mapping = aes(x = carat, y = price), alpha = 1 / 100)

ggplot(data = smaller) +
  geom_bin2d(mapping = aes(x = carat, y = price))
# Error in ggplot(data = smaller) : object 'smaller' not found
# 遍尋不著 "smaller" 這個 dataset

# install.packages("hexbin")
ggplot(data = smaller) +
  geom_hex(mapping = aes(x = carat, y = price))
# Error in ggplot(data = smaller) : object 'smaller' not found

ggplot(data = smaller, mapping = aes(x = carat, y = price)) + 
# 依舊找不到 smaller 這個 dataset
  geom_boxplot(mapping = aes(group = cut_width(carat, 0.1)))
# cut "carat" into bins of width = 0.1

ggplot(data = smaller, mapping = aes(x = carat, y = price)) + 
  geom_boxplot(mapping = aes(group = cut_number(carat, 20)))

ggplot(
  data = diamonds,
  mapping = aes(color = cut_number(carat, 5), x = price)
) +
  geom_freqpoly() +
  labs(x = "Price", y = "Count", color = "Carat")

ggplot(
  data = diamonds,
  mapping = aes(color = cut_width(carat, 1, boundary = 0), x = price)
) +
  geom_freqpoly() +
  labs(x = "Price", y = "Count", color = "Carat")

#Plotted with a box plot with 10 bins with an equal number of observations
ggplot(diamonds, aes(x = cut_number(price, 10), y = carat)) +
  geom_boxplot() +
  coord_flip() +
  xlab("Price")

# The argument "boundary = 0" ensures that first bin is $0–$2,000.
# The argument "varwidth = TRUE" 
# make the width of the boxplot proportional to the number of points. ---
ggplot(diamonds, aes(x = cut_width(price, 2000, boundary = 0), y = carat)) +
  geom_boxplot(varwidth = TRUE) +
  coord_flip() +
  xlab("Price")

# faceted hexagonal heatmap of 2d bin counts, faceted geom_hex() ---
install.packages("hexbin")
library(viridis)
ggplot(diamonds, aes(x = carat, y = price)) +
  geom_hex() +
  facet_wrap(~cut, ncol = 1) +
  scale_fill_viridis()

ggplot(diamonds, aes(x = cut_number(carat, 5), y = price, color = cut)) +
  geom_boxplot()

# 相較於上一個方法，將 "carat" 離散化後作為上色變數，更能看出大克拉鑽石在價格上的異質性
ggplot(diamonds, aes(color = cut_number(carat, 5), y = price, x = cut)) +
  geom_boxplot()

ggplot(data = diamonds) +
  geom_point(mapping = aes(x = x, y = y)) +
  coord_cartesian(xlim = c(4, 11), ylim = c(4, 11))