Shoplifter.Doe
Reputation: 118
Add vertical line to d3js bar chart
Based on this example, I'm trying to replicate a bar chart. Then I have two datasets: one for the bar chart, and a single price.
What I want to do with that single price is to position it according to the bars. Check the code:
var price_data = [
{'priceRangeStart':'4000000','numberOfProperties':100},
{'priceRangeStart':'4100000','numberOfProperties':256},
{'priceRangeStart':'4200000','numberOfProperties':773},
{'priceRangeStart':'4300000','numberOfProperties':334},
{'priceRangeStart':'4400000','numberOfProperties':587},
{'priceRangeStart':'4500000','numberOfProperties':400},
{'priceRangeStart':'4600000','numberOfProperties':700},
{'priceRangeStart':'4700000','numberOfProperties':150},
{'priceRangeStart':'4800000','numberOfProperties':229},
{'priceRangeStart':'4900000','numberOfProperties':500},
{'priceRangeStart':'5000000','numberOfProperties':125},
{'priceRangeStart':'5100000','numberOfProperties':170},
{'priceRangeStart':'5200000','numberOfProperties':290},
{'priceRangeStart':'5300000','numberOfProperties':660},
{'priceRangeStart':'5400000','numberOfProperties':450},
{'priceRangeStart':'5500000','numberOfProperties':359},
{'priceRangeStart':'5600000','numberOfProperties':740},
{'priceRangeStart':'5700000','numberOfProperties':894},
{'priceRangeStart':'5900000','numberOfProperties':547},
{'priceRangeStart':'6000000','numberOfProperties':1250}
];
var property_price = 5050000;
var loadPriceComparisonChart = function (data, single_price) {
// removing svg/tip artifacts
d3.selectAll('.price-comparison-tip').remove();
d3.select(elem[0]).select('svg').remove();
// variables and helpers
var margin = {top: 0, right: 20, bottom: 25, left: 0},
width = 370,
height = 200;
var formatComma = d3.format(',');
// responsive SVG
// create responsive svg container for the graph
var svg = d3.select(elem[0])
.append('div')
.classed('svg-price-comparison-container', true)
.append('svg')
.attr('preserveAspectRatio', 'none')
.attr('viewBox', '0 0 370 225')
//class to make it responsive
.classed('svg-content-responsive', true);
// creating x and y scales
var x = d3.scaleBand().rangeRound([0, width]).paddingOuter(0.5).paddingInner(0.6),
x1 = d3.scaleBand().rangeRound([0, width]),
y = d3.scaleLinear().rangeRound([height, 0]),
y1 = d3.scaleLinear().rangeRound([0, (height - 100)]); //
// creating the group object
var g = svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
// processing the data
var new_dataset = data;
var transformation = [];
transformation = new_dataset.map(el => (
{priceRangeStart: el.priceRangeStart, numberOfProperties: el.numberOfProperties}
));
transformation.forEach(function(d) {
d.priceRangeStart = +d.priceRangeStart;
d.numberOfProperties = +d.numberOfProperties;
return d;
});
// using lodash
var minValue = _.first(transformation).priceRangeStart;
var maxValue = _.last(transformation).priceRangeStart;
// get max number of properties value
var maxNrProperties = d3.max(transformation, function(d) {return d.numberOfProperties;});
// x and y value domains
x.domain(transformation.map(function(d) {console.log(d.priceRangeStart);return d.priceRangeStart;}));
x1.domain(transformation.map(function(d) {return d.priceRangeStart;}));
y.domain([0, ((d3.max(transformation, function(d) {return d.numberOfProperties;})) + (1.15 * maxNrProperties))]);
y1.domain([0, (d3.max(transformation, function(d) {return d.numberOfProperties;}))]);
// create x axis (for guiding purposes) and then hide it
g.append('g')
.attr('transform', 'translate(0,' + height + ')')
.attr('class', 'axis axis--x')
.call(d3.axisBottom(x))
.style('opacity', 0)
.selectAll('text').remove();
// text for min price value and translate it to the start position of the first bar
g.append('text')
.attr('transform', 'translate(' + (x(_.first(transformation).priceRangeStart)) + ' ,' + (height * 1.1) + ')')
.style('text-anchor', 'start')
.style('font-size', '12px')
.text('CHF ' + formatComma(minValue));
// text for max price value and translate it to the end position of the last bar
g.append('text')
.attr('transform', 'translate(' + (x(_.last(transformation).priceRangeStart) + x.bandwidth()) + ' ,' + (height * 1.1) + ')')
.style('text-anchor', 'end')
.style('font-size', '12px')
.text('CHF ' + formatComma(maxValue));
// apppend the grey bars to the graph and styling them
g.selectAll('.bar')
.data(transformation)
.enter().append('rect')
.attr('class', 'bar')
.attr('x', function(d) {return x(d.priceRangeStart);})
.attr('y', function(d) {return height - y1(maxNrProperties);})
.attr('width', x.bandwidth())
.attr('height', function(d) {return y1(maxNrProperties);})
.style('fill', '#A4A9AD')
.style('opacity', 0.2);
// apppend the orange bars to the graph and styling them
g.selectAll(null)
.data(transformation)
.enter().append('rect')
.attr('class', 'bar')
.attr('x', function(d) {return x(d.priceRangeStart);})
.attr('y', function(d) {return y(d.numberOfProperties);})
.attr('width', x.bandwidth())
.attr('height', function(d) {return height - y(d.numberOfProperties);})
.style('fill', '#EDAA00')
.style('opacity', 1);
// append dashed line to show single property price position
g.append('line')
.attr('class', 'zero')
.attr('x1', function(d) {return x1(single_price);})
.attr('y1', function(d) {return (y1(maxNrProperties) - 10);})
.attr('x2', x(0))
.attr('y2', function(d) {return height;})
.style('stroke', '#003A5D')
.style('stroke-width', 1)
.style('stroke-dasharray', 6)
.attr('transform', 'translate(30,0)');
As you see by the single price of 5050000 should be positioned between the bars for the ranges 5000000 and 5100000. That single price should be a vertical dashed line instead of another bar, as you may see in the code. The problem is that I cannot position it correctly. I can't use the x domain I set for the bars for some reason.
In the end, it should look something like this:
Any ideas?
Upvotes: 1
Views: 2016
Answers (1)
Gerardo Furtado
Reputation: 102174
You made things complicated when you used those values as a categorical (qualitative) variable. However, there is a solution:
You can get the value immediately below that single price in the x scale domain using d3.bisectLeft:
var lineIndex = d3.bisectLeft(x.domain(), property_price);
And then, using that index, get the x position of the line:
.attr("x1", x(x.domain()[lineIndex]))
.attr("x2", x(x.domain()[lineIndex]))
Here is your code with that change:
var data = [{
'priceRangeStart': '4000000',
'numberOfProperties': 100
}, {
'priceRangeStart': '4100000',
'numberOfProperties': 256
}, {
'priceRangeStart': '4200000',
'numberOfProperties': 773
}, {
'priceRangeStart': '4300000',
'numberOfProperties': 334
}, {
'priceRangeStart': '4400000',
'numberOfProperties': 587
}, {
'priceRangeStart': '4500000',
'numberOfProperties': 400
}, {
'priceRangeStart': '4600000',
'numberOfProperties': 700
}, {
'priceRangeStart': '4700000',
'numberOfProperties': 150
}, {
'priceRangeStart': '4800000',
'numberOfProperties': 229
}, {
'priceRangeStart': '4900000',
'numberOfProperties': 500
}, {
'priceRangeStart': '5000000',
'numberOfProperties': 125
}, {
'priceRangeStart': '5100000',
'numberOfProperties': 170
}, {
'priceRangeStart': '5200000',
'numberOfProperties': 290
}, {
'priceRangeStart': '5300000',
'numberOfProperties': 660
}, {
'priceRangeStart': '5400000',
'numberOfProperties': 450
}, {
'priceRangeStart': '5500000',
'numberOfProperties': 359
}, {
'priceRangeStart': '5600000',
'numberOfProperties': 740
}, {
'priceRangeStart': '5700000',
'numberOfProperties': 894
}, {
'priceRangeStart': '5900000',
'numberOfProperties': 547
}, {
'priceRangeStart': '6000000',
'numberOfProperties': 1250
}];
var property_price = 5050000;
// variables and helpers
var margin = {
top: 0,
right: 20,
bottom: 25,
left: 0
},
width = 370,
height = 200;
var formatComma = d3.format(',');
// responsive SVG
// create responsive svg container for the graph
var svg = d3.select("body")
.append('svg')
.attr('preserveAspectRatio', 'none')
.attr('viewBox', '0 0 370 225')
//class to make it responsive
.classed('svg-content-responsive', true);
// creating x and y scales
var x = d3.scaleBand().rangeRound([0, width]).paddingOuter(0.5).paddingInner(0.6),
x1 = d3.scaleBand().rangeRound([0, width]),
y = d3.scaleLinear().rangeRound([height, 0]),
y1 = d3.scaleLinear().rangeRound([0, (height - 100)]); //
// creating the group object
var g = svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
// processing the data
var new_dataset = data;
var transformation = [];
transformation = new_dataset.map(el => ({
priceRangeStart: el.priceRangeStart,
numberOfProperties: el.numberOfProperties
}));
transformation.forEach(function(d) {
d.priceRangeStart = +d.priceRangeStart;
d.numberOfProperties = +d.numberOfProperties;
return d;
});
// using lodash
var minValue = _.first(transformation).priceRangeStart;
var maxValue = _.last(transformation).priceRangeStart;
// get max number of properties value
var maxNrProperties = d3.max(transformation, function(d) {
return d.numberOfProperties;
});
// x and y value domains
x.domain(transformation.map(function(d) {
return d.priceRangeStart;
}));
x1.domain(transformation.map(function(d) {
return d.priceRangeStart;
}));
y.domain([0, ((d3.max(transformation, function(d) {
return d.numberOfProperties;
})) + (1.15 * maxNrProperties))]);
y1.domain([0, (d3.max(transformation, function(d) {
return d.numberOfProperties;
}))]);
// create x axis (for guiding purposes) and then hide it
g.append('g')
.attr('transform', 'translate(0,' + height + ')')
.attr('class', 'axis axis--x')
.call(d3.axisBottom(x))
.style('opacity', 0)
.selectAll('text').remove();
// text for min price value and translate it to the start position of the first bar
g.append('text')
.attr('transform', 'translate(' + (x(_.first(transformation).priceRangeStart)) + ' ,' + (height * 1.1) + ')')
.style('text-anchor', 'start')
.style('font-size', '12px')
.text('CHF ' + formatComma(minValue));
// text for max price value and translate it to the end position of the last bar
g.append('text')
.attr('transform', 'translate(' + (x(_.last(transformation).priceRangeStart) + x.bandwidth()) + ' ,' + (height * 1.1) + ')')
.style('text-anchor', 'end')
.style('font-size', '12px')
.text('CHF ' + formatComma(maxValue));
// apppend the grey bars to the graph and styling them
g.selectAll('.bar')
.data(transformation)
.enter().append('rect')
.attr('class', 'bar')
.attr('x', function(d) {
return x(d.priceRangeStart);
})
.attr('y', function(d) {
return height - y1(maxNrProperties);
})
.attr('width', x.bandwidth())
.attr('height', function(d) {
return y1(maxNrProperties);
})
.style('fill', '#A4A9AD')
.style('opacity', 0.2);
// apppend the orange bars to the graph and styling them
g.selectAll(null)
.data(transformation)
.enter().append('rect')
.attr('class', 'bar')
.attr('x', function(d) {
return x(d.priceRangeStart);
})
.attr('y', function(d) {
return y(d.numberOfProperties);
})
.attr('width', x.bandwidth())
.attr('height', function(d) {
return height - y(d.numberOfProperties);
})
.style('fill', '#EDAA00')
.style('opacity', 1);
var lineIndex = d3.bisectLeft(x.domain(), property_price);
var line = svg.append("line")
.attr("x1", x(x.domain()[lineIndex]) - x.step() / 2 + x.bandwidth() / 2)
.attr("x2", x(x.domain()[lineIndex]) - x.step() / 2 + x.bandwidth() / 2)
.attr("y1", height - 100)
.attr("y2", height)
.style("stroke", "gray")
.style("stroke-width", 2)
.style("stroke-dasharray", "2,2")<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>Upvotes: 4
Related Questions
- horizontal lines along the y axis d3 bar chart
- Change bar chart to line chart in D3
- How add vertical line to bar char in d3js?
- Line Bar Chart in D3 js
- How to make bar chart with additional vertical lines below the x axis
- How to add a line on x-axis on a horizontal bar chart in d3
- How to add a fixed range vertical line to a D3.js chart
- How to add a line at top of stacked bar chart with d3.js?
- d3.js How to add lines to a bar chart
- Adding hard coded fixed line to d3 bar chart