├── bar-chart-race ├── index.js ├── package.json ├── index.html ├── LICENSE.txt ├── README.md ├── inspector.css ├── 3ff9fa2c6593d814@3048.js ├── runtime.js └── files │ └── aec3792837253d4c6168f9bbecdf495140a5f9bb1cdb12c7c8113cec26332634a71ad29b446a1e8236e0a45732ea5d0b4e86d9d1568ff5791412f093ec06f4f1 ├── README.md ├── LICENSE ├── index.html └── runtime.js /bar-chart-race/index.js: -------------------------------------------------------------------------------- 1 | export {default} from "./3ff9fa2c6593d814@3048.js"; 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Example: A Standalone Observable Notebook 2 | 3 | This example has moved to https://github.com/observablehq/examples/tree/main/standalone 4 | -------------------------------------------------------------------------------- /bar-chart-race/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@d3/bar-chart-race", 3 | "main": "3ff9fa2c6593d814@3048.js", 4 | "version": "3048.0.0", 5 | "homepage": "https://observablehq.com/@d3/bar-chart-race", 6 | "author": { 7 | "name": "D3", 8 | "url": "https://observablehq.com/@d3" 9 | }, 10 | "type": "module", 11 | "peerDependencies": { 12 | "@observablehq/runtime": "4" 13 | } 14 | } -------------------------------------------------------------------------------- /bar-chart-race/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
This is an example of a standalone Observable notebook. Data: John Burn–Murdoch
19 | 20 | 21 | 22 | 51 | -------------------------------------------------------------------------------- /bar-chart-race/3ff9fa2c6593d814@3048.js: -------------------------------------------------------------------------------- 1 | // https://observablehq.com/@d3/bar-chart-race@3048 2 | export default function define(runtime, observer) { 3 | const main = runtime.module(); 4 | const fileAttachments = new Map([["category-brands.csv",new URL("./files/aec3792837253d4c6168f9bbecdf495140a5f9bb1cdb12c7c8113cec26332634a71ad29b446a1e8236e0a45732ea5d0b4e86d9d1568ff5791412f093ec06f4f1",import.meta.url)]]); 5 | main.builtin("FileAttachment", runtime.fileAttachments(name => fileAttachments.get(name))); 6 | main.variable(observer()).define(["md"], function(md){return( 7 | md`# Bar Chart Race 8 | 9 | This chart animates the value (in $M) of the top global brands from 2000 to 2019. Color indicates sector. See [the explainer](/d/e9e3929cf7c50b45) for more. Data: [Interbrand](https://www.interbrand.com/best-brands/)` 10 | )}); 11 | main.variable(observer("data")).define("data", ["FileAttachment"], function(FileAttachment){return( 12 | FileAttachment("category-brands.csv").csv({typed: true}) 13 | )}); 14 | main.variable(observer("viewof replay")).define("viewof replay", ["html"], function(html){return( 15 | html`