${tooltipFormat(xValue(d))}

2d:null 2e:["$","title",null,{"children":"Line Chart | Adolfo Guimarães | Observable"}] 33:Ta0c,graph = { // Definins Sizes const size_axis_bottom = graph_paramters.width - graph_paramters.margin.left - graph_paramters.margin.right const size_axis_left = graph_paramters.height - graph_paramters.margin.top - graph_paramters.margin.bottom // Defining xScale const xValue = d => d[graph_paramters.x_axis.label]; const xDomain = d3.extent(graph_paramters.data[0], xValue); const xScale = d3.scaleTime() .domain(xDomain) .range([0, size_axis_bottom]) .nice(); const xAxisTickFormat = d3.timeFormat(graph_paramters.x_axis.format) // Defining yScale var max = -Infinity; for (const temp_data of graph_paramters.data) { const temp_max = Math.max(...temp_data.map(o=>o[graph_paramters.y_axis.label])); if (temp_max > max) { max = temp_max } } const yValue = d => d[graph_paramters.y_axis.label]; const yScale = d3.scaleLinear() .domain([0, graph_paramters.max_value ? graph_paramters.max_value : max]) .range([size_axis_left, 0]) .nice(); const numberAxisFormat = d3.format(graph_paramters.y_axis.format) const yAxisTickFormat = tickValue => numberAxisFormat(tickValue); // Defining Line const lineFunction = d3.line(); const curveStyle = d3.curveLinear; return jsx` ` }34:T4cf,Marks = component (({ data, xScale, yScale, xValue, yValue, lineFunction, curveStyle, withMarks, tooltipFormat, circleRadius, lineStyle, circleStyle, circleHightlight, highlight=false, color, }) => jsx` xScale(xValue(d))) .y(d => yScale(yValue(d))) .curve(curveStyle)(data) } /> ${ withMarks ? data.map(d => ( jsx` ${tooltipFormat(xValue(d))} ` )) : jsx`` } ` )35:T417,AxisLeft = component(({ axisScale, height, width, tickOffset, tickFormat, withLines=false }) => jsx` ${axisScale.ticks().map(tickValue => ( jsx` ${tickFormat(tickValue)} ` ))} ` )36:T10bc,all_data = [[ { 'ano': new Date(new Date('2009-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 4148720 }, { 'ano': new Date(new Date('2010-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 4626094 }, { 'ano': new Date(new Date('2011-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 5380856 }, { 'ano': new Date(new Date('2012-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 5791065 }, { 'ano': new Date(new Date('2013-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 7173563 }, { 'ano': new Date(new Date('2014-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 8722248 }, { 'ano': new Date(new Date('2015-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 7746427 }, { 'ano': new Date(new Date('2016-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 8627367 }, { 'ano': new Date(new Date('2017-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 6731341 }, { 'ano': new Date(new Date('2018-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 5513747 }, { 'ano': new Date(new Date('2019-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 5095270 }, { 'ano': new Date(new Date('2020-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 5095270 }, { 'ano': new Date(new Date('2021-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 3109762 } ], [ { 'ano': new Date(new Date('2009-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 3000000 }, { 'ano': new Date(new Date('2010-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 4000000 }, { 'ano': new Date(new Date('2011-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 5000000 }, { 'ano': new Date(new Date('2012-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 2000000 }, { 'ano': new Date(new Date('2013-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 3000000 }, { 'ano': new Date(new Date('2014-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 3000000 }, { 'ano': new Date(new Date('2015-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 5000000 }, { 'ano': new Date(new Date('2016-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 6000000 }, { 'ano': new Date(new Date('2017-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 8000000 }, { 'ano': new Date(new Date('2018-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 9000000 }, { 'ano': new Date(new Date('2019-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 8000000 }, { 'ano': new Date(new Date('2020-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 6000000 }, { 'ano': new Date(new Date('2021-01-01').toLocaleString("en-US", {timeZone: "UTC"})), 'total': 5000000 } ] ]37:[] 31:{"id":"99bd072d49e5e956","slug":"line-chart","title":"Line Chart","thumbnail":"c5bbec3ebb8ff9415e4a72d73751e9cb9833bb6901c755c3de887bdee03fe01c","access_level":"public","create_time":"$D2021-11-17T12:08:46.564Z","update_time":"$D2021-11-18T18:27:24.596Z","view_time":null,"first_public_time":"$D2021-11-18T17:03:16.945Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0fed76bc24ee2abb","login":"adolfoguimaraes","name":"Adolfo Guimarães","avatar_url":"https://avatars-next.observableusercontent.com/88672ad9fd16fb1365fed00041d8fc8d950122ea98716a8993e614c5c88bc2de","tier":"starter_2024"},"version":431,"publish_version":431,"role":null,"authored":false,"authors":[{"type":"individual","id":"f25e789ad38b28fb","login":"adolfoguimaraes","name":"Adolfo Guimarães","avatar_url":"https://avatars-next.observableusercontent.com/88672ad9fd16fb1365fed00041d8fc8d950122ea98716a8993e614c5c88bc2de","tier":null}],"members":[{"type":"individual","id":"f25e789ad38b28fb","login":"adolfoguimaraes","name":"Adolfo Guimarães","avatar_url":"https://avatars-next.observableusercontent.com/88672ad9fd16fb1365fed00041d8fc8d950122ea98716a8993e614c5c88bc2de","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Line Chart","cells":[{"id":0,"value":"# Line Chart\n\nBasic line chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"viz = {return render(() => graph)}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"## Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"graph_paramters = new Object({\n height: 420,\n width: 950,\n margin: {left: 50, right: 20, top: 50, bottom: 40},\n x_axis: {label: 'ano', 'format': '%Y'},\n y_axis: {label: 'total', 'format': '~s'},\n colors: ['#8A8A8A','#2471A3'],\n marks: [false, false],\n data: all_data,\n legend: [['Linha 1','#8A8A8A'],['Linha 2','#2471A3']]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"## Components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"Legend = component(({x,y, data=[]}) => jsx`\n \n ${\n data.map((d, i) => (\n jsx`\n \n \n ${d[0]}\n \n `\n ))\n }\n \n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"AxisBottom = component(({\n axisScale,\n width,\n height,\n tickOffset,\n tickFormat\n}) => jsx`\n \n \n ${axisScale.ticks().map(tickValue => (\n jsx`\n \n ${tickFormat(tickValue)}\n ` \n ))}\n \n `\n \n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"## Styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"css_style = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"## Toy data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {render, component, jsx, memo, forwardRef, React, ReactDOM, createElement, Children, createRef, createContext, lazy, Fragment, StrictMode, Suspense, cloneElement, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useDebugValue, createPortal} from \"@j-f1/react-16\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"