Different color between line and area graph - d3.js

Question

edit image
I am using d3 v4. In which I created area and line chart. data formation is.
Chart => [1,4,5,2.4,6]
line => [3,3,3,3,3]
Now my requirement is below the line chart, area graph should have a different color.
If there is any other library which can do this, then also suggest.
Here is my function to draw the line and area graph.
so if dailyConsValue> targetConsValue ? 'no color' : 'show color'
dailydate is year [Jan 2017 - dec 2017] => this is dynamically.
Below is my code:
function drawGraph(drawData, highlightedData, first, last) {
let margin, width, height, parseDate, xScale, yScale, area,
dailyConsumption, targetConsumption, svg;
margin = {
top: 10,
right: 60,
bottom: 10,
left: 60
},
width = document.querySelector('#graph').clientWidth - margin.left - margin.right,
height = document.querySelector('#graph').clientHeight - margin.top - margin.bottom;
parseDate = d3.timeParse('%b %Y');
// x axis
xScale = d3.scaleTime().domain([parseDate(first), parseDate(last)]).range([0, width]);
// y axis
yScale = d3.scaleLinear().domain([-1, 2 + Math.max.apply(this, drawData.map(function(o){return o.dailyConsValue; }))])
.range([height, 0]);
area = d3.area()
.x(function(d) { return xScale(d['dailyDate']); })
.y0(function(d) { return yScale(d['targetConsValue']); })
.y1(function(d) { return yScale(d['dailyConsValue']); });
// define the line
dailyConsumption = d3.line().x(function(d) {return xScale(d['dailyDate']); })
.y(function(d) {return yScale(d['dailyConsValue']); });
targetConsumption = d3.line().x(function(d) {return xScale(d['dailyDate']); })
.y(function(d) {return yScale(d['targetConsValue']); });
svg = d3.select('#graph').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform',
'translate(' + margin.left + ',' + margin.top + ')');
// add axis
svg.append('g')
.attr('transform', 'translate(0,0)').attr('class', 'Xaxis')
.call(d3.axisTop(xScale).ticks(drawData.length).tickSize(-innerHeight).tickFormat(d3.timeFormat('%b %Y')));
svg.append('g').attr('class', 'Yaxis')
.call(d3.axisLeft(yScale).tickSize(0));
// Prepare data
drawData.forEach(function( d ) {
d['dailyDate'] = parseDate( d['dailyDate'] );
d['targetConsValue'] = d['targetConsValue'];
d['dailyConsValue'] = d['dailyConsValue'];
} );
highlightedData.forEach(function( d ) {
d['dailyDate'] = parseDate( d['dailyDate'] );
d['dailyConsValue'] = d['dailyConsValue'];
d['active'] = d['active'];
} );
// add the area
svg.append('path').data([drawData]).attr('class', 'area')
.attr('d', area)
.transition().duration(2500).attrTween( 'd', this.tween( drawData, area ) );
// add data for first line
svg.append('path')
.data([drawData])
.attr('class', 'daily').attr('d', targetConsumption).transition()
.duration(2500).delay(1500 / 2).attrTween( 'd', this.tween( drawData, targetConsumption ) );
// add data for futureConsumption
svg.append('path')
.data([drawData])
.attr('class', 'target').attr('data-legend', 'CST')
.attr('d', dailyConsumption);
createLengends(drawData);
drawCircle(drawData, '10', '#037DA6');
drawCircle(drawData, '5', '#003A54');
/**
* legends start
* #param datalegendsData
*/
function createLengends(datalegendsData) {
let legend;
legend = svg.selectAll('.legend').data([datalegendsData])
.enter().append('g').attr('class', 'legend')
.attr('transform', function(d, i) { return 'translate(0,' + i * 20 + ')'; });
// making a line for legend
legend.append('line')
.attr('x1', width - 335).attr('x2', width - 305).attr('y1', height - 1)
.attr('y2', height - 1).style('stroke', '5,5').style('stroke', '#4682B4');
legend.append('text').attr('x', width - 300).attr('y', height - 1)
.attr('dy', '.35em').style('text-anchor', 'start').text('IST Verbrauch WOB')
.style('fill', '#666').style('font-weight', 'normal');
legend.append('line').attr('x1', width - 130).attr('x2', width - 100)
.attr('y1', height - 1).attr('y2', height - 1).style('stroke-dasharray', '5,5')
.style('stroke', '#003A54');
legend.append('text').attr('x', width - 96).attr('y', height - 1).attr('dy', '.35em')
.style('text-anchor', 'start').text('CST Sollwert').style('fill', '#666')
.style('font-weight', 'normal');
}
// legends end
/**
* highlighted data points start
* #param data
* #param r
* #param color
*/
function drawCircle(data, r, color) {
let tooltip;
tooltip = d3.select('#graph').append('div')
.attr('class', 'tooltip').style('display', 'none');
svg.selectAll('.dot').data(data).enter().append('circle') // Uses the enter().append() method
.attr('class', 'circle_' + r).attr('cx', function(d) { return xScale(d['dailyDate']); })
.attr('cy', function(d) {return yScale(d['dailyConsValue']); }).attr('r', r).attr('fill', color)
.on( 'mouseover', function( d) {
let arr, date;
d3.select( this ).classed('circle circle__highlighted', true);
d['active'] = true;
tooltip.transition().duration(200).style('display', 'block');
arr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
date = arr[d['dailyDate'].getMonth()] + ', ' + d['dailyDate'].getFullYear();
tooltip.html('Month ' + date + '<br/> Consumption- ' + d['dailyConsValue'] + ' unit')
.style('left', (parseInt(this.getAttribute('cx'), 10) + 70) + 'px').style('top', (this.getAttribute('cy')) + 'px');
/*tooltip.html('Month ' + date + '<br/> Consumption- ' + d['dailyConsValue'] + ' unit')
.style('left', (d3.event.offsetX + 20) + 'px').style('top', (d3.event.offsetY - 28) + 'px');*/
} ).on( 'mouseout', function( d ) {
d3.selectAll('.circle').classed('circle', true).classed('circle__highlighted', false);
d['active'] = false;
tooltip.transition().duration(500).style('display', 'none');
} );
}
// highlighted data points end
}
Thanks in advance.

Answer 1

In your style fill just create a function and compare the two values and return a color based on the condition like so:
svg.append('path')
.data([drawData]).attr('class', 'area')
.attr('d', area)
.style('fill', function(d){
for (i in d) {
if (d[i]['dailyConsValue'] < d[i]['targetConsValue']) {
return "green"
} else {
return "blue"
}
}
})
.transition().duration(2500)
.attrTween( 'd', this.tween( drawData, area ) );
This will work based on only the last value of the data. If you want different colors at every point of the chart depending on your condition, you will have to create a linearGradient with multiple color stops (dynamically) as far as I know.
Now to create a linearGradient, I have created a linear scale using d3 to calculate the offset for color stops and assign color based on your condition. To dynamically create a linearGradient refer to this fiddle
https://jsfiddle.net/aditya_kk29/gsy5dt8h/