Observable Scrape

100%

Observable Scrape

✓ Published0🌍 Public

Last edited Mar 28, 2022

Created on Mar 28, 2022

This example demonstrates an Observable notebook scraping workflow that extracts reusable code blocks into files for use in React applications. The scrape process fetches notebook content from the Observable API using a provided API key, then searches for lines containing `BEGIN_EXTRACT` and `END_EXTRACT` markers to isolate specific named code blocks. Each extracted block gets saved as a separate ES module file with an `import d3 from 'd3'` statement, making the scraped code directly consumable in downstream projects. The custom `scrape.js` utility handles file writing with Node.js `fs` while managing iterative parsing through successive slices of the source lines.

AI-generated description

A DIY method of authoring ES modules in Observable and exporting into downstream workflows such as React apps.

Similar vizzes

Loading thumbnail…

Untitled

This example demonstrates asynchronous data loading in React by fetching a CSV file of CSS named colors and parsing the response. The code uses the browser’s `fetch` API with Promises to request the dataset from a GitHub Gist, then logs the response object to the console. It focuses on the initial steps of handling network requests and inspecting the raw response structure, without yet rendering the data visually or applying any parsing logic. The interaction is limited to observing the fetched result in the developer tools.

NNclKgn

61% match

Loading thumbnail…

Interaction with React

This example demonstrates how to integrate React with a data loading workflow using the Fetch API. It fetches a CSV file containing CSS color data from a GitHub gist URL and parses the response as text, logging the raw contents to the console. The code includes an asynchronous `fetchText` function that uses `await` and `response.text()` to handle the request. A commented-out alternative shows a promise-based approach with nested `.then()` calls. No visualization is rendered; the focus is on preparing the data pipeline and understanding asynchronous JavaScript patterns in a React context.

DDavid Beales

60% match

Loading thumbnail…

React + Observable

This example demonstrates how to embed an Observable Plot visualization inside a React application. It displays the classic Iris dataset, plotting petal length against petal width with points colored by species. The code uses `Plot.plot` and `Plot.dot` from `@observablehq/plot`, while React's `useRef` and `useEffect` manage the DOM element. Data is loaded asynchronously via `d3.csv` with `autoType`, and the chart fills the full browser window.

RRiderman de Sousa Barbosa

60% match

Loading thumbnail…

Fork of Fork of React & D3 Starter

This example demonstrates a decoupled React and D3 integration for rendering a scatter plot of the Iris dataset. The visualization plots sepal length against petal length, using SVG circles to represent individual data points. The code showcases a scalable architecture pattern with separate modules for data loading, visualization logic, and axes rendering, highlighting how D3's `scaleLinear` and `axisLeft`/`axisBottom` APIs combine with React's `useRef` and `useEffect` hooks. The visualization selects SVG elements via D3's `select` and `join` methods to manage circle rendering.

NNaveed945

60% match

Loading thumbnail…

Ep6

This example demonstrates how modular JavaScript code can be assembled using ES6 imports and exports, alongside a direct integration of the D3.js library (v7). The visualization outputs a simple text string built from a constant defined in a separate module, while also logging the imported `select` function from D3 to the console. It contrasts an "old school approach" with a React-based starter template, highlighting different methods for structuring D3 projects. The code relies on D3's distribution from unpkg and does not render any graphical charts, serving only as a code-level illustration.

JJun Alvarado

60% match

Loading thumbnail…

React Starter Code

This example shows a minimal React application that renders the text “Hello React” on a blank page. It demonstrates the basic setup for using React within an Observable-style notebook, including loading React and ReactDOM from CDN and mounting a functional component into the root DOM element. The code uses `ReactDOM.render` with a JSX component, and includes a simple CSS rule that changes the body text color to red. The visualization is a literal starting point, half way towards a smiley face, and serves as a template for building interactive charts with React.

ZZoe Ferencova

60% match

Loading thumbnail…

Observable JS Demo

This demo shows the Observable JS runtime running inside a plain HTML page using the `@hpcc-js/observable-md` library. It loads a `.ojs` file containing markdown, a generator that emits a ticking counter at 1-second intervals, and an imported brushable scatterplot from `@d3/brushable-scatterplot`. The user’s selection on that plot is displayed as a live JSON preview. The page resizes dynamically via the `Observable` API’s `resize()` and `lazyRender()` methods.

GGordonSmith

59% match

Loading thumbnail…

Fork of Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse data from an external JSON API, specifically the NOAA solar-cycle prediction feed, using `d3.json` within a React framework. The page displays the parsed data in the browser console, though a commented-out alternative using `fetch`, `async`/`await`, and `d3.csvParse` shows how to compute and render file size, row count, and column count into an HTML `<pre>` element. The code runs with D3 v5 and includes commented variations highlighting different asynchronous patterns, such as a callback-based “pyramid of doom” approach.

AAdaman32

59% match