32:T402,showTooltip = ( d, elementId ) => { console.log( d ) const chartCoords = document.getElementById( elementId ).getBoundingClientRect() let xPosition = d3.event.pageX + 20 let yPosition = d3.event.pageY + 20 xPosition = ( xPosition > ( chartCoords.right - 200 ) ) ? xPosition - 200 : xPosition yPosition = ( yPosition > ( chartCoords.bottom - 150 ) ) ? yPosition - 200 : yPosition const keys = keysByTotals.map( ( e, c ) => `

${ e }: ${ d3.format( ',.0f' )( d[ e ] ) }

` ) const tooltip = d3.select(".tooltip") .style("left", xPosition + "px") .style("top", yPosition + "px") .style("display", "inline-block") .html(`

${ d.date }

${ keys.join('') }

`) }33:T456,drawAxis = ( node, xScale ) => { node.append( 'g' ) .attr( 'class', 'axis' ) .attr( 'transform', `translate(0,${ height })` ) .call( d3.axisBottom( xScale ) .tickValues( uniqueDates.map( d => ( ( xScale == xLine ) ? new Date( d ) : d ) ) ) .tickFormat( d => d3.timeFormat( '%Y' )( ( d instanceof Date ) ? d : new Date( d ) ) ) ); const yGrids = []; for ( let i = 0; i < 4; i++ ) { const stepY = ( i / 3 * yMax ); yGrids.push( stepY ) } node.append("g") .attr("class", "grid") .attr( 'transform', `translate(-${ margin.left },0)` ) .call(d3.axisLeft( y ) .tickValues(yGrids) .tickSize( - width - margin.left ) .tickFormat('') ) .call(g => g.select(".domain").remove()) node.append( 'g' ) .attr( 'class', 'axis' ) .call( d3.axisLeft( yTicks ).tickValues( yGrids ).tickFormat( d=> ( ( d != 0 ) ? d3.format( '.3s' )( d ) : 0 ))) node.selectAll( '.domain' ).remove() node.selectAll( '.axis' ).selectAll( '.tick' ).select( 'line' ).remove() }34:T50a,drawBars = ( node ) => { const barGroup = node.append( 'g' ) .attr( 'class', 'bars' ) .selectAll( 'g' ) .data( data ) .enter().append( 'g' ) .attr( 'transform', d => `translate(${ x0( d.date ) },0)` ) .attr( 'class', 'bargroup' ) barGroup.append( 'rect' ) .attr( 'class', 'barfocus' ) .attr( 'x', 0 ) .attr( 'y', 0 ) .attr( 'width', x1.range()[1] ) .attr( 'height', height ) .attr( 'opacity', '0' ) barGroup.selectAll( '.bar' ) .data( d => keysByTotals.map( ( key, i ) => ( { key: key, value: d[ key ] } ) ) ) .enter().append( 'rect' ) .attr( 'class', 'bar' ) .attr( 'x', d => x1( d.key ) ) .attr( 'y', d => y( d.value ) ) .attr( 'width', x1.bandwidth() ) .attr( 'height', d => ( height - y( d.value ) ) ) .attr( 'fill', ( d, i ) => d3.interpolateViridis( z( i ) ) ) barGroup.append( 'rect' ) .attr( 'class', 'barmouse' ) .attr( 'x', 0 ) .attr( 'y', 0 ) .attr( 'width', x1.range()[ 1 ] ) .attr( 'height', height ) .attr( 'opacity', '0' ) .on( 'mouseover', handleMouseOverBarChart ) .on( 'mouseout', handleMouseOutBarChart ) const tooltip = d3 .select( 'body' ) .append( 'div' ) .attr( 'class', 'tooltip' ); }35:T95f,drawLines = ( node ) => { const dateSpaces = uniqueDates.map( ( d, i ) => { const xNow = xLine( new Date( d ) ) const xPrev = ( i >= 1) ? xLine( new Date( uniqueDates[ i - 1 ] ) ) : xLine( new Date( uniqueDates[ 0 ] ) ); const xNext = ( i < ( uniqueDates.length - 1 ) ) ? xLine( new Date( uniqueDates[ i + 1 ] ) ) : xLine( new Date( uniqueDates[ uniqueDates.length - 1 ] ) ); let xWidth = ( i === 0 ) ? ( xNext - xNow ) : ( xNow - xPrev ); let xStart = ( i === 0 ) ? 0 : xNow - ( xWidth / 2 ); xWidth = ( i === 0 || i === ( uniqueDates.length - 1 ) ) ? ( xWidth / 2 ) : xWidth; return { date: d, start: ( uniqueDates.length > 1 ) ? xStart : 0, width: ( uniqueDates.length > 1 ) ? xWidth : width, }; } ); const g = node.append("g") const focus = g.selectAll( '.focus-space' ) .data( dateSpaces ) .enter().append("g") .attr( 'class', 'focus-space' ) focus.append( 'line' ) .attr( 'class', 'focus-grid' ) .style( 'stroke', 'lightgray' ) .style( 'stroke-width', 1 ) .attr( 'x1', d => xLine( new Date( d.date ) ) ) .attr( 'y1', 0 ) .attr( 'x2', d => xLine( new Date( d.date ) ) ) .attr( 'y2', height ) .attr( 'opacity', '0' ) focus.append( 'rect' ) .attr( 'class', 'focus-g' ) .attr( 'x', d => d.start ) .attr( 'y', 0 ) .attr( 'width', d => d.width ) .attr( 'height', height ) .attr( 'opacity', 0 ) .on( 'mouseover', handleMouseOverLineChart ) .on( 'mouseout', handleMouseOutLineChart ) const series = g.selectAll(".line-g") .data( lineData ) .enter().append("g") .attr( 'class', 'line-g' ) series.append("path") .attr("fill", "none") .attr("stroke-width",pathRange( pathThickness ) ) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke", ( d, i ) => d3.interpolateViridis( z( i ) ) ) .attr("d", d => line( d.values ) ); series.selectAll("circle") .data( ( d, i ) => ( d.values.map( row => ( { ...row, i } ) ) ) ) .enter().append("circle") .attr("r", 3.5) .attr("fill", d => d3.interpolateViridis( z( d.i ) ) ) .attr("stroke", "#fff" ) .attr("cx", d => xLine( new Date( d.date ) ) ) .attr("cy", d => y( d.value ) ); }36:[] 30:{"title":"Test 2 Grouped Bar and Multi-series Line Chart","cells":[{"id":0,"value":"md`# Test 2 Grouped Bar and Multi-series Line Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"viewof pathThickness = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1139,"value":"color = d3.scaleOrdinal(d3.interpolateViridis).domain(data.map(d => d.columns))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"legend = svg => {\n const g = svg\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .selectAll(\"g\")\n .data(color.domain().slice().reverse())\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${i * 20})`);\n\n g.append(\"rect\")\n .attr(\"width\", 19)\n .attr(\"height\", 19)\n .attr(\"fill\", color);\n\n g.append(\"text\")\n .attr(\"x\", 24)\n .attr(\"y\", 9.5)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"md`Line stroke equivalent = ${ Math.round(pathRange(pathThickness))}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"viewof drawLineChart = {\n const svg = d3.select(DOM.svg((width + margin.left + margin.right), (height + margin.top + margin.bottom)));\n const g = svg\n .attr( 'id', 'linechart' )\n .append(\"g\")\n .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n drawAxis( g, xLine );\n drawLines( g ); \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"viewof drawBarChart = {\n // only required for Observable to prevent multiple tooltips\n d3.selectAll(\".tooltip\").remove()\n //\n \n const svg = d3.select(DOM.svg((width + margin.left + margin.right), (height + margin.top + margin.bottom)));\n const g = svg\n .attr( 'id', 'barchart' )\n .append( 'g' )\n .attr( 'transform', `translate(${ margin.left },${ margin.top })`);\n drawAxis( g, x0 );\n drawBars( g );\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1021,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":775,"value":"handleMouseOverBarChart = ( d, i, nodes ) => {\n d3.select ( nodes[ i ].parentNode ).select( '.barfocus' ).attr( \"opacity\", \"0.1\" )\n showTooltip( d, 'barchart' )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":799,"value":"handleMouseOutBarChart = ( d, i, nodes ) => {\n d3.select ( nodes[ i ].parentNode ).select( '.barfocus' ).attr( 'opacity', '0' )\n \n const tooltip = d3.select(\".tooltip\").style(\"display\", \"none\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1029,"value":"handleMouseOverLineChart = ( d, i, nodes ) => {\n d3.select ( nodes[ i ].parentNode ).select( '.focus-grid' ).attr( \"opacity\", \"1\" )\n const pivotData = data.find( e => e.date == d.date );\n showTooltip( pivotData, 'linechart' )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"handleMouseOutLineChart = ( d, i, nodes ) => {\n d3.select ( nodes[ i ].parentNode ).select( '.focus-grid' ).attr( \"opacity\", \"0\" )\n const tooltip = d3.select(\".tooltip\").style(\"display\", \"none\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"pathRange = d3.scaleLinear().domain([0,100]).range([1,10])","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"x0 = d3.scaleBand()\n .domain( uniqueDates )\n .rangeRound([ 0, width ])\n .paddingInner(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"x1 = d3.scaleBand()\n .domain(keysByTotals)\n .rangeRound([0, x0.bandwidth()])\n .padding(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"xLine = d3.scaleTime()\n .domain( [ new Date( uniqueDates[ 0 ] ), new Date( uniqueDates[ uniqueDates.length - 1 ] ) ] )\n .rangeRound([ 0, width ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"yMax = Math.round( 1.1 * d3.max(lineData, d => d3.max(d.values.map(date => date.value))))","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"y = d3.scaleLinear()\n .domain([0, yMax])\n .rangeRound([height, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":940,"value":"yTicks = d3.scaleLinear()\n .domain([0, yMax])\n .rangeRound([height + 12, 12])","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"z = d3.scaleOrdinal()\n .range(d3.range(0, 1.1, ( 100 / ( keysByTotals.length - 1 ) ) / 100))","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"line = d3.line()\n .x( d => xLine( new Date( d.date ) ) )\n .y( d => y( d.value ) )","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"uniqueDates = [ ...( new Set( lineData.reduce( ( accum, { values } ) => {\n values.forEach( ( { date } ) => accum.push( date ) );\n return accum;\n}, [] ) ) ) ]\n .sort( (a, b) => {\n return parseDate( a ) - parseDate( b );\n } )","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"keysByTotals = {\n const keys = data.columns.slice(1)\n return keys.map( key => {\n return {\n key,\n total: data.reduce( ( a, c ) => {\n a += c[key];\n return a;\n }, 0 )\n };\n } ).sort( (a, b) => {\n return b.total - a.total;\n } ).map( d => d.key )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"margin = ({top: 0, right: 0, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"lineData = keysByTotals.map( key => (\n {\n key,\n values: data.map( d => (\n {\n date: d.date,\n value: d[key],\n }\n ) )\n }\n) )","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"data = d3.csv( 'https://raw.githubusercontent.com/monicamarcelac/test/master/AVG_Variables.csv', (d, i, columns) => {\n for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];\n return d;\n } )","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"stylesheet = html`