ChatGPT - pasting code

New To Observable
1

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?

2

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

3

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

4

Here’s the whole code that was generated:

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);
5

That’s not 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:

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.

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

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.

6

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.

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

7

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

8

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