2c:null 2d:["$","title",null,{"children":"SVG2 | kominami | Observable"}] 32:T536,App = () => { const[dataset,setDataset] = React.useState(d3.range(40, 200, 10)); const click = React.useCallback((e) => { setDataset(dataset.concat(d3.shuffle(d3.range(40, 200, 10)))); console.log(dataset); }, [dataset]); React.useEffect(() => { const width = 400; const height = 100; const svg = d3 .select('svg.ReactSvg') .attr('width', width) .attr('height', height); svg .append('rect') .attr('width', width) .attr('height', height) .attr('fill', '#def'); const rects = svg .append('g') .selectAll('rect') .data(dataset) .join('rect') .attr('x', (d, i) => i * (width / dataset.length)) .attr('y', d => height - (d / d3.max(dataset)) * height) .attr('width', 1/dataset.length*300) .attr('height', d => d) .attr('fill', '#8cc') .text(d => d); svg .append('g') .selectAll('text') .data(dataset) .join('text') .attr('x', (d, i) => i * (width / dataset.length)) .attr('y', d => height - (d / d3.max(dataset)) * height) .attr('font-family', 'sans-serif') .attr('font-size', 11) .attr('fill', 'white') .text(d => d); },[dataset]); return htm`

`; }33:[] 30:{"id":"9b8bfbfdc7d43a90","slug":"svg2","title":"SVG2","thumbnail":"8758b0b1378e81008b9815408f8edbedd3b2b2207ce2d0425ca37ca61750bdb2","access_level":"public","create_time":"$D2020-11-13T06:46:50.725Z","update_time":"$D2020-11-13T08:21:53.348Z","view_time":null,"first_public_time":"$D2020-11-13T07:25:21.114Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c276f82f5bb5a0e9","login":"kominamiyuto","name":"kominami","avatar_url":"https://avatars-next.observableusercontent.com/1ac782347f415c947a22818ac2cf8c73a0804bcfbc4168980c82ca6a2b2cb551","tier":"starter_2024"},"version":132,"publish_version":132,"role":null,"authored":false,"authors":[{"type":"individual","id":"d9c4d2f39919a8bb","login":"kominamiyuto","name":"kominami","avatar_url":"https://avatars-next.observableusercontent.com/1ac782347f415c947a22818ac2cf8c73a0804bcfbc4168980c82ca6a2b2cb551","tier":null}],"members":[{"type":"individual","id":"d9c4d2f39919a8bb","login":"kominamiyuto","name":"kominami","avatar_url":"https://avatars-next.observableusercontent.com/1ac782347f415c947a22818ac2cf8c73a0804bcfbc4168980c82ca6a2b2cb551","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SVG2","cells":[{"id":0,"value":"md`# SVG2`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"datasets = [5, 25, 45, 65, 85, 105, 125, 145, 165, 185, 205, 225, 245, 265, 285, 305];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"{\n const elem = html`

`;\n ReactDOM.render(htm`<${App}/>`, elem);\n return elem;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"htm = import('https://unpkg.com/htm@3?module').then(r => r.default.bind(React.createElement))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"r = require.alias({\n react: \"react@17/umd/react.development.js\",\n \"react-dom\": \"react-dom@17/umd/react-dom.development.js\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"React = r('react');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"ReactDOM = r(\"react-dom\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"