25:["$","title",null,{"children":"React Histogram | stiansjoli | Observable"}] 4b:T46c,Histogram = component(({data}) => { const xScale = d3.scaleLinear() .domain([0, d3.max(data, d => d.total)]) .nice() .range([padding, width - padding]) const histogram = d3.histogram() .value(d => d.total) .domain([0,d3.max(data, d => d.total) + 50]) .thresholds(xScale.ticks(80)) const bins = histogram(data) const yScale = d3.scaleLinear() .domain([0, d3.max(bins, d => d.length) + 2]) .range([height-padding, padding]) .nice() return jsx`

Histogram of React contributions. The histogram shows a count of contributors, with a bin-size of 20, based on their total number of commits (x-axis) on the React repository the previous year.

` })4c:[] 47:{"id":"1b14cfb2cb43dfc1","slug":"react-histogram","title":"React Histogram","thumbnail":"c80909403218235133eab406c57b12b4e20dab69d5a3b3f35e49a07bafd7d6c9","access_level":"public","create_time":"$D2021-03-23T13:37:09.739Z","update_time":"$D2021-03-26T08:39:29.262Z","view_time":null,"first_public_time":"$D2021-03-25T12:13:57.654Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"0180fe38760cf17d","login":"stiansjoli","name":"","avatar_url":"https://avatars-next.observableusercontent.com/525d5eb4e53d0775e37aba98891c9c250af905d65d277309f7ade3a1b90dbbd1","tier":"starter_2024","bio":"","following":false},"version":749,"publish_version":749,"role":null,"authored":false,"authors":[{"type":"individual","id":"cca1bdf075ffc83b","login":"stiansjoli","name":"","avatar_url":"https://avatars-next.observableusercontent.com/525d5eb4e53d0775e37aba98891c9c250af905d65d277309f7ade3a1b90dbbd1","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"cca1bdf075ffc83b","login":"stiansjoli","name":"","avatar_url":"https://avatars-next.observableusercontent.com/525d5eb4e53d0775e37aba98891c9c250af905d65d277309f7ade3a1b90dbbd1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"bebb4b4f76b27d81","slug":"react","title":"React","owner":{"id":"0180fe38760cf17d","login":"stiansjoli","name":""}},"type":"notebook","body":{"titling":"auto","title":"React Histogram","cells":[{"id":0,"value":"md`# React Histogram`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"md` This notebook shows a histogram of React contributions where React is responsible for UI rendering, while d3 is the kernal calculating positions of the elements. A histogram consists of an y-axis, represented by the VerticalAxis component, an x-axis, represented by the Horizontal component and the bin-elements, represented by rect elements.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"md`### Histogram`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"HistogramContainer = component(() => {\n const [contributorData, setContributorData] = useState([]);\n \n useEffect(() => {\n fetch(\"https://api.github.com/repos/facebook/react/stats/contributors\")\n .then(res => res.json())\n .then(res => setContributorData(res))\n },[])\n return contributorData.length === 0 ? jsx`

`: jsx`<${Histogram} data=${contributorData} />`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"render(HistogramContainer)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"md`### Y-axis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"VerticalAxis = component(({scale}) => {\n \n const ticks = useMemo(() => {\n return scale.ticks()\n .map(value => ({value,yOffset: scale(value)}))\n }, [])\n \n return jsx`\n \n ${ticks.map(({ value, yOffset }) => {\n return jsx`\n \n \n \n ${ value }\n \n ` \n })}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"md`### X-axis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"HorizontalAxis = component(({scale}) => {\n const ticks = useMemo(() => { \n return scale.ticks()\n .map(value => ({value, xOffset: scale(value)}))\n }, [])\n \n return jsx`\n \n ${ticks.map(({ value, xOffset }) => {\n return jsx`\n \n \n \n ${ value }\n \n `\n })}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"md`## Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"padding = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import { jsx, useState, useEffect, useMemo, render, component} from '@j-f1/react-16'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null