2d:null 2e:["$","title",null,{"children":"Demo of visx + react on observable | Harrison Shoff | Observable"}] 33:[] 31:{"id":"fe7718fe9d3e2ba0","slug":"visx-react-dots","title":"Demo of visx + react on observable","thumbnail":"3ed8a6a32f8a355105636a8fb3473b0c0e988e9538b1e423fede3b87406302e0","access_level":"public","create_time":"$D2018-05-15T15:11:31.741Z","update_time":"$D2023-07-13T15:08:06.033Z","view_time":null,"first_public_time":"$D2018-05-15T15:57:53.425Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"29636a1b0f7eec5d","login":"hshoff","name":"Harrison Shoff","avatar_url":"https://avatars-next.observableusercontent.com/b24f3c3317d3e20ffc65d5707387c3141ebb3c989c2893d5ef4b6d48e71fa6f3","tier":"starter_2024"},"version":208,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"67f79798f959c953","login":"hshoff","name":"Harrison Shoff","avatar_url":"https://avatars-next.observableusercontent.com/b24f3c3317d3e20ffc65d5707387c3141ebb3c989c2893d5ef4b6d48e71fa6f3","tier":null}],"members":[{"type":"individual","id":"67f79798f959c953","login":"hshoff","name":"Harrison Shoff","avatar_url":"https://avatars-next.observableusercontent.com/b24f3c3317d3e20ffc65d5707387c3141ebb3c989c2893d5ef4b6d48e71fa6f3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"title":"Demo of visx + react on observable","cells":[{"id":160,"value":"md`\n# Demo of visx + react on observable\n\nvisx 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`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"viewof height = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"viewof numPoints = html``","pinned":true,"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":"TileBackground = (props) => {\n return (\n React.createElement(React.Fragment, {}, [\n React.createElement(Gradient.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 = import('https://cdn.skypack.dev/@visx/shape@3.3.0?min')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"MockData = import('https://unpkg.com/@visx/mock-data@3.3.0/esm/index.js?module')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"Gradient = import('https://cdn.skypack.dev/@visx/gradient@3.3.0?min')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"Scale = import('https://cdn.skypack.dev/@visx/scale@3.3.0?min')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"React = import('https://cdn.skypack.dev/react@18.2.0?min')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"ReactDOM = import('https://cdn.skypack.dev/react-dom@18.2.0?min')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"x = d => d[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"y = d => d[1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"z = d => d[2]","pinned":true,"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":true,"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":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"