2c:null 2d:["$","title",null,{"children":"SVGYoko | kominami | Observable"}] 32:T748,App = () => { const[dataset,setDataset] = React.useState(d3.shuffle(d3.range(40, 200, 50))); const click = React.useCallback((e) => { setDataset(dataset.concat([Math.ceil(d3.randomNormal(100, 30)())])); console.log(dataset); }, [dataset]); React.useEffect(() => { const colorSet = [{color:"#def"},{color:"#bce"},{color:"#89c"},{color:"#56a"}] const width = 600; const height = 500; const svg = d3 .select('svg.ReactSvg') .attr('width', width) .attr('height', height); let yScale = d3 .scaleBand() .domain(dataset) .range([0, height]) .padding(0.1); let xScale = d3 .scaleLinear() .domain([0,d3.max(dataset)]) .range([0, width]); svg .select('g.background') .selectAll('rect') .data(colorSet) .join('rect') .attr('width', (d,i) => width*(colorSet.length-i)/colorSet.length) .attr('height', height) .attr('fill', d => d.color) svg .select('g.rect') .selectAll('rect') .data(dataset) .join('rect') .attr('x', (d) => 0) .attr('y', d => yScale(d)) .attr('width', d => xScale(d)) .attr('height', yScale.bandwidth()) .attr('fill', '#8cc') .text(d => d); svg .select('g.text') .selectAll('text') .data(dataset) .join('text') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('x', (d, i) => xScale(d) -15) .attr('y', d => yScale(d) + yScale.bandwidth()/2.0) .attr('font-family', 'sans-serif') .attr('font-size', 11) .attr('fill', 'white') .text(d => d); },[dataset]); return htm`

`; }33:T51a,{ const dataset = d3.shuffle(d3.range(40, 200, 10)); const colorSet = [{color:"#def"},{color:"#bce"},{color:"#89c"},{color:"#56a"}] const width = 600; const height = 500; const svg = d3 .create('svg') .attr('width', width) .attr('height', height); const yScale = d3 .scaleBand() .domain(dataset) .range([0, height]) .padding(0.1); const xScale = d3 .scaleLinear() .domain([0,d3.max(dataset)]) .range([0, width]); svg .append('g') .selectAll('rect') .data(colorSet) .join('rect') .attr('width', (d,i) => width*(colorSet.length-i)/colorSet.length) .attr('height', height) .attr('fill', d => d.color) svg .append('g') .selectAll('rect') .data(dataset) .join('rect') .attr('x', (d) => 0) .attr('y', d => yScale(d)) .attr('width', d => xScale(d)) .attr('height', yScale.bandwidth()) .attr('fill', '#8cc') .text(d => d); svg .append('g') .selectAll('text') .data(dataset) .join('text') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('x', (d, i) => xScale(d) -15) .attr('y', d => yScale(d) + yScale.bandwidth()/2.0) .attr('font-family', 'sans-serif') .attr('font-size', 11) .attr('fill', 'white') .text(d => d); return svg.node(); }34:[] 30:{"id":"13e18d9239fa515c","slug":"svgyoko","title":"SVGYoko","thumbnail":"09026b524081d476c5b56babd10dfc10a8ec69a173c182ddeda2133992a15398","access_level":"public","create_time":"$D2020-11-13T08:28:41.572Z","update_time":"$D2020-11-19T16:02:30.818Z","view_time":null,"first_public_time":"$D2020-11-19T16:18:15.968Z","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":109,"publish_version":109,"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":"SVGYoko","cells":[{"id":0,"value":"md`# SVGYoko`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"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":14,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"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":18,"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":20,"value":"React = r('react');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"ReactDOM = r(\"react-dom\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"