├── 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 | Bar Chart Race 4 | 5 | 6 | 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2019–2020 Observable, Inc. 2 | 3 | Permission to use, copy, modify, and/or distribute this software for any 4 | purpose with or without fee is hereby granted, provided that the above 5 | copyright notice and this permission notice appear in all copies. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES 8 | WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF 9 | MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR 10 | ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES 11 | WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN 12 | ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF 13 | OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. -------------------------------------------------------------------------------- /bar-chart-race/LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright 2019–2020 Observable, Inc. 2 | 3 | Permission to use, copy, modify, and/or distribute this software for any 4 | purpose with or without fee is hereby granted, provided that the above 5 | copyright notice and this permission notice appear in all copies. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES 8 | WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF 9 | MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR 10 | ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES 11 | WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN 12 | ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF 13 | OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. 14 | -------------------------------------------------------------------------------- /bar-chart-race/README.md: -------------------------------------------------------------------------------- 1 | # Bar Chart Race 2 | 3 | https://observablehq.com/@d3/bar-chart-race@3048 4 | 5 | View this notebook in your browser by running a web server in this folder. For 6 | example: 7 | 8 | ~~~sh 9 | python -m SimpleHTTPServer 10 | ~~~ 11 | 12 | Or, use the [Observable Runtime](https://github.com/observablehq/runtime) to 13 | import this module directly into your application. To npm install: 14 | 15 | ~~~sh 16 | npm install @observablehq/runtime@4 17 | npm install https://api.observablehq.com/@d3/bar-chart-race.tgz?v=3 18 | ~~~ 19 | 20 | Then, import your notebook and the runtime as: 21 | 22 | ~~~js 23 | import {Runtime, Inspector} from "@observablehq/runtime"; 24 | import define from "@d3/bar-chart-race"; 25 | ~~~ 26 | 27 | To log the value of the cell named “foo”: 28 | 29 | ~~~js 30 | const runtime = new Runtime(); 31 | const main = runtime.module(define); 32 | main.value("foo").then(value => console.log(value)); 33 | ~~~ 34 | -------------------------------------------------------------------------------- /bar-chart-race/inspector.css: -------------------------------------------------------------------------------- 1 | :root{--syntax_normal:#1b1e23;--syntax_comment:#a9b0bc;--syntax_number:#20a5ba;--syntax_keyword:#c30771;--syntax_atom:#10a778;--syntax_string:#008ec4;--syntax_error:#ffbedc;--syntax_unknown_variable:#838383;--syntax_known_variable:#005f87;--syntax_matchbracket:#20bbfc;--syntax_key:#6636b4;--mono_fonts:82%/1.5 Menlo,Consolas,monospace}.observablehq--collapsed,.observablehq--expanded,.observablehq--function,.observablehq--gray,.observablehq--import,.observablehq--string:after,.observablehq--string:before{color:var(--syntax_normal)}.observablehq--collapsed,.observablehq--inspect a{cursor:pointer}.observablehq--field{text-indent:-1em;margin-left:1em}.observablehq--empty{color:var(--syntax_comment)}.observablehq--blue,.observablehq--keyword{color:#3182bd}.observablehq--forbidden,.observablehq--pink{color:#e377c2}.observablehq--orange{color:#e6550d}.observablehq--boolean,.observablehq--null,.observablehq--undefined{color:var(--syntax_atom)}.observablehq--bigint,.observablehq--date,.observablehq--green,.observablehq--number,.observablehq--regexp,.observablehq--symbol{color:var(--syntax_number)}.observablehq--index,.observablehq--key{color:var(--syntax_key)}.observablehq--prototype-key{color:#aaa}.observablehq--empty{font-style:oblique}.observablehq--purple,.observablehq--string{color:var(--syntax_string)}.observablehq--error,.observablehq--red{color:#e7040f}.observablehq--inspect{font:var(--mono_fonts);overflow-x:auto;display:block;white-space:pre}.observablehq--error .observablehq--inspect{word-break:break-all;white-space:pre-wrap} -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Bar Chart Race 4 | 17 |

The most populous cities in the world, 1575–2020

18 |

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`