# 一些具有日期列的数据
library(tidyverse)
df <- data.frame(day = seq.Date(from = as.Date('2023-01-01'), 
                                to = as.Date('2023-06-15'), 
                                by = 'days')) %>%
  mutate(values = rnorm(mean = 10, sd = 2, n = n()))
# 通过ojs_define将数据传递给ojs
ojs_define(plot_data = df)

Chart = Plot.plot({
  marks: [
    Plot.line(transpose(plot_data), 
      {x: "day", y: "values"}, 
      { stroke: "black" }
    )
  ]}
)

<details>
<summary>英文:</summary>
I am using R and ojs code chunks in a quarto document where I do data manipulation in R and the pass the data frame to the ojs chunk by using the `ojs_define` function. 
My issue is that date seems to be interpreted as string in ojs chunk. The result is bad formatting in plots.
Any tips on how to pass a date from r to ojs in a way that the ojs plot function recognizes it as a date?
Example:
~~~
---
title: &quot;Code example&quot;
format: html
editor: visual
execute:
  echo: false
  warning: false
---
```{r}
#Some data with a date column
library(tidyverse)
df&lt;-data.frame(day=seq.Date(from=as.Date(&#39;2023-01-01&#39;), 
                            to=as.Date(&#39;2023-06-15&#39;), 
                            by=&#39;days&#39;))%&gt;%
  mutate(values=rnorm(mean= 10, sd=2, n =n()))
#Passing this to ojs through ojs_define
ojs_define(plot_data=df)

Chart = Plot.plot({
  marks: [
    Plot.line(transpose(plot_data), 
      {x: "day", y: "values"}, 
      { stroke: "black" }
    )
  ]}
)

</details>
# 答案1
**得分**: 2
由于在传递给 `ojs_define` 时，日期被解析为字符串，我们可以在 ojs 块中将字符串日期类型转换回日期时间类型。
在这里，我们将使用 [`d3.timeParse`](https://github.com/d3/d3-time-format#timeParse) 来创建一个日期时间解析器，并使用 [`Arquero`](https://observablehq.com/@uwdata/introducing-arquero) 库（灵感来自于 `dplyr` 的设计）来 [`派生`](https://observablehq.com/@uwdata/introducing-arquero#cell-351)（即变异）`day` 列以包含日期时间值。
这里需要注意两件事：
1. [`Arquero` 适用于数据表](https://observablehq.com/@uwdata/introducing-arquero#cell-24)。但是 `plot_data` 是 JSON 格式的。因此，我们需要将其 [`转置`](https://quarto.org/docs/interactive/ojs/data-sources.html#transpose) 以将其转换为对象数组，然后将其传递给 [`aq.from` 以将其转换为表格](https://observablehq.com/@uwdata/introducing-arquero#cell-64)。
2. 要在 `derive` 中使用该 `parser`，我们需要使用 [`aq.escape`](https://observablehq.com/@uwdata/introducing-arquero#cell-1102) 包装 `d => parse(d)`。
```markdown
---
title: "代码示例"
format: html
execute:
  echo: false
  warning: false
---
```{r}
library(dplyr)
df <- data.frame(day = seq.Date(
        from = as.Date('2023-01-01'),
        to = as.Date('2023-06-15'),
        by = 'days'
      )) %>%
  mutate(
    values = rnorm(mean = 10, sd = 2, n = n())
  )
ojs_define(plot_data=df)
```
```{ojs}
import { aq } from '@uwdata/arquero'
d3 = require("d3@7")
parser = d3.timeParse("%Y-%m-%d");
```
## 绘图
```{ojs}
final_data = aq.from(transpose(plot_data))
  .derive({ day: aq.escape(d => parser(d.day)) })
```
```{ojs}
Chart = Plot.plot({
  marks: [
    Plot.line(final_data, 
      {x: "day", y: "values"}, 
      { stroke: "black" }
    )
  ]}
)
```
```
[![observable plot with datetime axis][1]][1]
```
[1]: https://i.stack.imgur.com/ctAbL.png
```
<details>
<summary>英文:</summary>
Since dates are being parsed as string when passed through the `ojs_define`, we can transform back the string-dates type to datetime type in the ojs chunk.
Here we will use [`d3.timeParse`](https://github.com/d3/d3-time-format#timeParse) to create a datetime parser and will use the [`Arquero`](https://observablehq.com/@uwdata/introducing-arquero) library (inspired by the design of `dplyr`) to [`derive`](https://observablehq.com/@uwdata/introducing-arquero#cell-351) (i.e mutate) the `day` column to have datetime values.
Two things to note here, 
1. [`Arquero` work with data tables](https://observablehq.com/@uwdata/introducing-arquero#cell-24). But the `plot_data` is of JSON format. So we need to [`transpose`](https://quarto.org/docs/interactive/ojs/data-sources.html#transpose) it to convert it to an array of objects which then passed to [`aq.from` to convert as table](https://observablehq.com/@uwdata/introducing-arquero#cell-64).
2. To use that `parser` within `derive`, we need to wrap `d =&gt; parse(d)` with [`aq.escape`](https://observablehq.com/@uwdata/introducing-arquero#cell-1102)

library(dplyr)
df <- data.frame(day = seq.Date(
        from = as.Date('2023-01-01'),
        to = as.Date('2023-06-15'),
        by = 'days'
      )) %>%
  mutate(
    values = rnorm(mean = 10, sd = 2, n = n())
  )
ojs_define(plot_data=df)

import { aq } from '@uwdata/arquero'
d3 = require("d3@7")
parser = d3.timeParse("%Y-%m-%d");

final_data = aq.from(transpose(plot_data))
  .derive({ day: aq.escape(d => parser(d.day)) })

Chart = Plot.plot({
  marks: [
    Plot.line(final_data, 
      {x: "day", y: "values"}, 
      { stroke: "black" }
    )
  ]}
)

[![observable plot with datetime axis][1]][1]
  [1]: https://i.stack.imgur.com/ctAbL.png
</details>