25:["$","title",null,{"children":"React LineChart | stiansjoli | Observable"}] 4b:[] 47:{"id":"4e42d05aac529a7c","slug":"react-linechart","title":"React LineChart","thumbnail":"976d1f5b66cc3d306fea676c9fd72c035bdaf99d177ce6f004e9bd96fd0fa26b","access_level":"public","create_time":"$D2021-03-26T11:09:24.835Z","update_time":"$D2021-03-26T12:18:18.272Z","view_time":null,"first_public_time":"$D2021-03-26T12:18:54.168Z","has_unpublished_edits":null,"fork":{"id":"1b14cfb2cb43dfc1","slug":"react-histogram","title":"React Histogram","owner":{"id":"0180fe38760cf17d","login":"stiansjoli","name":""}},"stars":0,"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":783,"publish_version":783,"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":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"bebb4b4f76b27d81","slug":"react","title":"React","owner":{"id":"0180fe38760cf17d","login":"stiansjoli","name":""}},"type":"notebook","body":{"titling":"auto","title":"React LineChart","cells":[{"id":0,"value":"md`# React LineChart`","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 line chart of React contributions where React is responsible for UI rendering, while d3 is the kernal calculating positions of the 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`### LineChart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"ChartContainer = component(() => {\n const [contributorData, setContributorData] = useState([]);\n \n useEffect(() => {\n fetch(\"https://api.github.com/repos/facebook/react/stats/participation\")\n .then(res => res.json())\n .then(res => setContributorData(res.all))\n },[])\n return contributorData.length === 0 ? jsx`

`: jsx`<${LineChart} 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":"LineChart = component(({data}) => {\n console.log(data);\n const yScale = d3.scaleLinear()\n .domain([0, d3.max(data)])\n .nice()\n .rangeRound([height - padding, padding])\n \n const xScale = d3.scaleLinear()\n .domain([0, data.length])\n .range([padding, width - padding]) \n \n const line = d3.line()\n .curve(d3.curveCatmullRom.alpha(0.1))\n .x((d,i) => xScale(i))\n .y(d => yScale(d))\n \n return jsx`

Line chart of React contributions. The chart shows counted commits, per week for the previous year for the React repository.

\n`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"render(ChartContainer)","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":"$W4b","stdlib":"1"}} 24:null