# ChatGPT - pasting code

**URL:** <https://talk.observablehq.com/t/chatgpt-pasting-code/7731>\
**Category:** Help\
**Created:** [March 12, 2023, 2:48pm UTC](https://talk.observablehq.com/t/chatgpt-pasting-code/7731 "2023-03-12T14:48:34Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![MarkGStacey](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/markgstacey/32/4700_2.png) [@MarkGStacey](https://talk.observablehq.com/u/MarkGStacey)\
**Post date:** [March 12, 2023, 2:48pm UTC](https://talk.observablehq.com/t/chatgpt-pasting-code/7731/1 "2023-03-12T14:48:34Z")

</div>

I asked chat GPT to generate some observablehq code, it out put a block of code that looks reasonable.

But trying to paste it, it seems like I’d have to paste each line one at a time, it doesn’t split the code up.

Surely there’s a way to do this?

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [March 12, 2023, 3:21pm UTC](https://talk.observablehq.com/t/chatgpt-pasting-code/7731/2 "2023-03-12T15:21:10Z")

</div>

That’s impossible to answer without seeing the actual code. 🙂

---

<div class="post-metadata">

**Author:** ![MarkGStacey](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/markgstacey/32/4700_2.png) [@MarkGStacey](https://talk.observablehq.com/u/MarkGStacey)\
**Post date:** [March 12, 2023, 7:38pm UTC](https://talk.observablehq.com/t/chatgpt-pasting-code/7731/3 "2023-03-12T19:38:44Z")

</div>

How do you mean? It’s a pretty generic question.

How do I get code pasted into observablehq to split into cells automatically?

But even just pasting the first imports will illustrate what I mean:

import {data as covidData} from “@observablehq/inputs”;  
import {select, selectAll} from “d3-selection”;  
import {timeFormat} from “d3-time-format”;  
import {scaleLinear} from “d3-scale”;  
import {axisBottom, axisLeft} from “d3-axis”;  
import {max, min} from “d3-array”;  
import Plotly from “plotly.js-dist-min”;

As far as I can see, I’d have to copy and paste each line individually to get observablehq to work

---

<div class="post-metadata">

**Author:** ![MarkGStacey](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/markgstacey/32/4700_2.png) [@MarkGStacey](https://talk.observablehq.com/u/MarkGStacey)\
**Post date:** [March 12, 2023, 7:39pm UTC](https://talk.observablehq.com/t/chatgpt-pasting-code/7731/4 "2023-03-12T19:39:24Z")

</div>

Here’s the whole code that was generated:

```javascript
import {data as covidData} from "@observablehq/inputs";
import {select, selectAll} from "d3-selection";
import {timeFormat} from "d3-time-format";
import {scaleLinear} from "d3-scale";
import {axisBottom, axisLeft} from "d3-axis";
import {max, min} from "d3-array";
import Plotly from "plotly.js-dist-min";

// Filter the data to only include OECD countries
const oecdCountries = new Set([
  "Australia",
  "Austria",
  "Belgium",
  "Canada",
  "Chile",
  "Colombia",
  "Czechia",
  "Denmark",
  "Estonia",
  "Finland",
  "France",
  "Germany",
  "Greece",
  "Hungary",
  "Iceland",
  "Ireland",
  "Israel",
  "Italy",
  "Japan",
  "Korea, South",
  "Latvia",
  "Lithuania",
  "Luxembourg",
  "Mexico",
  "Netherlands",
  "New Zealand",
  "Norway",
  "Poland",
  "Portugal",
  "Slovakia",
  "Slovenia",
  "Spain",
  "Sweden",
  "Switzerland",
  "Turkey",
  "United Kingdom",
  "United States"
]);

const filteredData = covidData.filter(d => oecdCountries.has(d.location));

// Create a dictionary to store the data for each country
const dataByCountry = {};
filteredData.forEach(d => {
  if (!dataByCountry[d.location]) {
    dataByCountry[d.location] = {
      x: [],
      y: [],
      country: d.location
    };
  }
  dataByCountry[d.location].x.push(new Date(d.date));
  dataByCountry[d.location].y.push(d.total_cases);
});

// Create an array of objects containing the data for each country
const data = Object.values(dataByCountry);

// Create a time formatter for the x-axis tick labels
const formatTime = timeFormat("%Y-%m-%d");

// Define the margin and dimensions for the chart
const margin = {top: 20, right: 30, bottom: 50, left: 60};
const width = 700 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;

// Create the SVG element for the chart
const svg = select("#chart")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", `translate(${margin.left},${margin.top})`);

// Define the x and y scales for the chart
const x = scaleLinear().domain([min(data, d => min(d.x)), max(data, d => max(d.x))]).range([0, width]);
const y = scaleLinear().domain([0, max(data, d => max(d.y))]).range([height, 0]);

// Create the x-axis for the chart
const xAxis = axisBottom(x).tickFormat(d => formatTime(d));

// Create the y-axis for the chart
const yAxis = axisLeft(y);

// Add the x-axis to the chart
svg.append("g")
  .attr("class", "x-axis")
  .attr("transform", `translate(0,${height})`)
  .call(xAxis);

```

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [March 12, 2023, 8:03pm UTC](https://talk.observablehq.com/t/chatgpt-pasting-code/7731/5 "2023-03-12T20:03:33Z")

</div>

That’s not [Observable JavaScript](https://observablehq.com/@observablehq/observable-javascript). These are static ES imports that won’t work in cells even if you split them up. Observable’s “static import” syntax is reserved for imports from other notebooks.

I recommend to take a look at our documentation to familiarize yourself with the features (and limitations) of the platform:

> **[Observable documentation](https://observablehq.com/documentation/)**
>
> All your Observable questions answered

> [@MarkGStacey](#):
>
> How do you mean? It’s a pretty generic question.

Yes, your question was too generic to be answered unambiguously. We do support copying and pasting of multiple cells, but that is not applicable here.

> [@MarkGStacey](#):
>
> How do I get code pasted into observablehq to split into cells automatically?

Observable uses a special MIME type to identify when the clipboard contains copied cells from a cell selection. With some additional work this could be utilized to author a notebook that automatically generates pasteable clipboard content. See e.g. Tom Larkworthy’s implementation here: [Code generation with multi-cell clipboard pasting / Tom Larkworthy | Observable](https://observablehq.com/@tomlarkworthy/paste-codegen)

However, I suggest to paste your contents into a single cell and then split out a new cell by pressing Alt+Enter on the line that you want to split the cell at.

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hellonearthis/32/3935_2.png) [@hellonearthis](https://talk.observablehq.com/u/hellonearthis)\
**Post date:** [March 20, 2023, 2:59am UTC](https://talk.observablehq.com/t/chatgpt-pasting-code/7731/6 "2023-03-20T02:59:49Z")

</div>

A lot of the code is Hallucination.

I tried to port the Javascript to Observable format and found that it was incomplete.

The dataset was not correctly defined. The wrangling of the data was confused about the variables it was using. It didn’t know D3 was a standard library in observable. It wanted to use plotly but didn’t use plotly.

> **[ChatGPT doesn't know](https://observablehq.com/@hellonearthis/chatgpt-doesnt-know)**
>
> how to write code for observable. https://talk.observablehq.com/t/chatgpt-pasting-code/7731/5

Maybe GPT-4 could do it better but GPT-3 has issues with writing complete code.

---

<div class="post-metadata">

**Author:** ![MarkGStacey](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/markgstacey/32/4700_2.png) [@MarkGStacey](https://talk.observablehq.com/u/MarkGStacey)\
**Post date:** [March 20, 2023, 9:21am UTC](https://talk.observablehq.com/t/chatgpt-pasting-code/7731/7 "2023-03-20T09:21:55Z")

</div>

Great, thanks. Worth a try, but these chat bots don’t seem to be ready yet, despite the hype

---

<div class="post-metadata">

**Author:** ![MarkGStacey](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/markgstacey/32/4700_2.png) [@MarkGStacey](https://talk.observablehq.com/u/MarkGStacey)\
**Post date:** [March 20, 2023, 7:17pm UTC](https://talk.observablehq.com/t/chatgpt-pasting-code/7731/8 "2023-03-20T19:17:23Z")

</div>

FYI I tried GPT-4 and it was just as bad