2d:null 2e:["$","title",null,{"children":"Demo of vx + react on observable | timelyportfolio | Observable"}] 33:[] 31:{"id":"da3d7650bc84b106","slug":"demo-of-vx-react-on-observable","title":"Demo of vx + react on observable","thumbnail":"1665bcb50c20796cf0315fe4ade41cc8cf13c0176fbd9639fb1b57e362bc22c1","access_level":"public","create_time":"$D2018-06-28T21:46:01.167Z","update_time":"$D2018-06-29T01:36:38.598Z","view_time":null,"first_public_time":"$D2018-06-28T21:54:43.567Z","has_unpublished_edits":null,"fork":{"id":"fe7718fe9d3e2ba0","slug":"visx-react-dots","title":"Demo of visx + react on observable","owner":{"id":"29636a1b0f7eec5d","login":"hshoff","name":"Harrison Shoff"}},"stars":1,"starred":false,"owner":{"type":"team","id":"d77c15016dc2ccf9","login":"timelyportfolio","name":"timelyportfolio","avatar_url":"https://avatars-next.observableusercontent.com/9bef55d327befaf840e6acf550b7b4b5ca03dfb64509bb0e75c2f72c66614bb9","tier":"starter_2024"},"version":208,"publish_version":208,"role":null,"authored":false,"authors":[{"type":"individual","id":"fc5bafe907f72822","login":"timelyportfolio","name":"timelyportfolio","avatar_url":"https://avatars-next.observableusercontent.com/9bef55d327befaf840e6acf550b7b4b5ca03dfb64509bb0e75c2f72c66614bb9","tier":null}],"members":[{"type":"individual","id":"fc5bafe907f72822","login":"timelyportfolio","name":"timelyportfolio","avatar_url":"https://avatars-next.observableusercontent.com/9bef55d327befaf840e6acf550b7b4b5ca03dfb64509bb0e75c2f72c66614bb9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Demo of vx + react on observable","cells":[{"id":160,"value":"md`\n# Demo of vx + react on observable\n\nvx is a collection of reusable low-level visualization components. vx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM.\n\n

\n \n Docs\n \n •\n \n Gallery\n \n •\n \n Blog\n \n •\n \n Getting started tutorial\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"viewof height = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"viewof numPoints = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"// this doesn't work unfortunately; see invalid module below\nTileBackground = (props) => {\n return (\n React.createElement(React.Fragment, {}, [\n React.createElement(GradientPinkRed, {\n key: \"gradient\",\n id: \"pink-gradient\"\n }),\n React.createElement(\"rect\", {\n key: 'rect',\n ...props\n })\n ])\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"Dots = () => {\n return (\n React.createElement(React.Fragment, {}, points.map((point, i) => {\n return (\n React.createElement(\"circle\", {\n key: `dot-${i}`,\n fill: '#f6c431',\n cx: xScale(x(point)),\n cy: yScale(y(point)),\n r: i % 3 === 0 ? 3 : 2\n })\n );\n }))\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"Chart = React.createElement(\"svg\", { width, height }, [\n React.createElement(TileBackground, {\n key: 'bg',\n fill: \"url(#pink-gradient)\",\n width,\n height,\n rx: 14\n }),\n React.createElement(Dots, {\n key: 'dots'\n })\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"ReactDOM.render(\n Chart,\n document.getElementById(\"root\")\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"Shape = require(\"https://unpkg.com/@vx/shape@0.0.168/dist/vx-shape.umd.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"MockData = require(\"https://unpkg.com/@vx/mock-data@0.0.165/dist/vx-mock-data.umd.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"// couldn't get many of the vx modules to work so I did old school browserify standalone\n// and made available through Github Pages\nvx = require('https://timelyportfolio.github.io/vx/vx.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"//Gradient = require(\"https://unpkg.com/@vx/gradient@0.0.165/dist/vx-gradient.umd.js\")\nGradientPinkRed = vx.GradientPinkRed","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"Scale = require('https://unpkg.com/@vx/scale@0.0.165/dist/vx-scale.umd.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"// using https://beta.observablehq.com/@tmcw/semiotic-in-observable\nr = require.alias({\n \"react\": \"react@16/umd/react.production.min.js\",\n \"react-dom\": \"react-dom@16/umd/react-dom.production.min.js\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"React = r('react')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"ReactDOM = r('react-dom')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"x = d => d[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"y = d => d[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"z = d => d[2]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"points = MockData.genRandomNormalPoints(numPoints).filter((d, i) => {\n return i < numPoints;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"xScale = Scale.scaleLinear({\n domain: [1.3, 2.2],\n range: [0, width],\n clamp: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"yScale = Scale.scaleLinear({\n domain: [0.75, 1.6],\n range: [height, 0],\n clamp: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"