Detective Example

Welcome to Detective

Highlight the code

Do you know how to create a plot?

ggplot(data = iris) +
  aes(
    x = Sepal.Length,
    y = Sepal.Width
  ) +
  geom_point()

Highlight the code

First, use ggplot function to select the data

ggplot(data = iris) +
  aes(
    x = Sepal.Length,
    y = Sepal.Width
  ) +
  geom_point()

Highlight the code

Then, use aes function to select the variables

ggplot(data = iris) +
  aes(
    x = Sepal.Length,
    y = Sepal.Width
  ) +
  geom_point()

Highlight the code

Finally, use geom_* function to create a geometric element

ggplot(data = iris) +
  aes(
    x = Sepal.Length,
    y = Sepal.Width
  ) +
  geom_point()

Oh, that’s nice!

Highlight the code

Use .detective and data-detective-search to search words to highlight

ggplot(data = iris) +
  aes(
    x = Sepal.Length,
    y = Sepal.Width
  ) +
  geom_point()

:::{.detective data-detective-search="ggplot, aes, geom_point"}

your chunk here...

:::

Highlight the code

Use data-detective-bg-color to modify the background color

ggplot(data = iris) +
  aes(
    x = Sepal.Length,
    y = Sepal.Width
  ) +
  geom_point()

:::{.detective data-detective-search="ggplot, aes, geom_point" data-detective-bg-color="#4287f5"}

your chunk here...

:::

Use hex colors or CSS variables

ggplot(data = iris) +
  aes(
    x = Sepal.Length,
    y = Sepal.Width
  ) +
  geom_point()

:::{.detective data-detective-search="ggplot, aes, geom_point" data-detective-bg-color="var(--r-primary-color)"}

your chunk here...

:::

* see custom.scss

Highlight the code

Combine multiple .detective

ggplot(data = iris) +
  aes(
    x = Sepal.Length,
    y = Sepal.Width
  ) +
  geom_point()

:::{.detective data-detective-search="ggplot"}
:::{.detective data-detective-search="aes" data-detective-bg-color="var(--r-primary-color)"}
:::{.detective data-detective-search="geom_point" data-detective-bg-color="black" data-detective-code-color="#fff"}

your chunk here...

:::
:::
:::

Highlight the code

• data-detective-search search for words to highlight. Use , for multiple words.

• data-detective-bg-color background color. Default is yellow

• data-detective-code-color code color. Default is black