var margins = {
top: 100,
left: 80,
bottom: 40,
right: 20
};
var width = 950;
var height = 600;
var totalWidth = width + margins.left + margins.right;
var totalHeight = height + margins.top + margins.bottom;
var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);
var graphGroup = svg.append("g")
.attr("transform", "translate(" + margins.left + "," + margins.top + ")");
var q12018Data = [{
'fmc': 'UBS',
'value': 2308.78
},
{
'fmc': 'Fidelity',
'value': 976.76
},
{
'fmc': 'JP Morgan',
'value': 837.19
},
{
'fmc': 'Value Partners',
'value': 787.39
},
{
'fmc': 'BlackRock',
'value': 664.42
},
{
'fmc': 'Krane',
'value': 445.13
},
{
'fmc': 'Investec',
'value': 407.40
},
{
'fmc': 'Nikko',
'value': 356.07
},
{
'fmc': 'Yuanta',
'value': 202.71
},
{
'fmc': 'Cathay Securities Invest',
'value': 174.46
}
];
var q22018Data = [{
'fmc': 'UBS',
'value': 2193.05
},
{
'fmc': 'BlackRock',
'value': 817.24
},
{
'fmc': 'Yuanta',
'value': 676.87
},
{
'fmc': 'Fubon',
'value': 660.11
},
{
'fmc': 'JP Morgan',
'value': 577.26
},
{
'fmc': 'Investec',
'value': 384.65
},
{
'fmc': 'Hang Seng',
'value': 289.92
},
{
'fmc': 'Cathay Securities Invest',
'value': 289.43
},
{
'fmc': 'Pictet',
'value': 232.74
},
{
'fmc': 'Nikko',
'value': 224.73
}
];
var q32018Data = [{
'fmc': 'ChinaAMC',
'value': 1074
},
{
'fmc': 'Fubon',
'value': 466.32
},
{
'fmc': 'Heungkuk',
'value': 458.23
},
{
'fmc': 'BlackRock',
'value': 361.34
},
{
'fmc': 'UBS',
'value': 350.01
},
{
'fmc': 'CSOP',
'value': 263.60
},
{
'fmc': 'Legal & General',
'value': 218.79
},
{
'fmc': 'SSgA',
'value': 188.35
},
{
'fmc': 'Fidelity',
'value': 134.06
},
{
'fmc': 'Morgan Stanley',
'value': 112.70
}
];
var q42018Data = [{
'fmc': 'ChinaAMC',
'value': 1994.02
},
{
'fmc': 'Fubon',
'value': 808.34
},
{
'fmc': 'Heungkuk',
'value': 676.26
},
{
'fmc': 'BlackRock',
'value': 668.64
},
{
'fmc': 'UBS',
'value': 595.27
},
{
'fmc': 'CSOP',
'value': 424.83
},
{
'fmc': 'Legal & General',
'value': 380.30
},
{
'fmc': 'SSgA',
'value': 366.85
},
{
'fmc': 'Fidelity',
'value': 285.09
},
{
'fmc': 'Morgan Stanley',
'value': 273.55
}
];
var q12019Data = [{
'fmc': 'UBS',
'value': 938.23
},
{
'fmc': 'BlackRock',
'value': 474.45
},
{
'fmc': 'Yuanta',
'value': 385.32
},
{
'fmc': 'Fubon',
'value': 349.73
},
{
'fmc': 'JP Morgan',
'value': 246.86
},
{
'fmc': 'Investec',
'value': 235.12
},
{
'fmc': 'Hang Seng',
'value': 230.23
},
{
'fmc': 'Cathay Securities Invest',
'value': 220.02
},
{
'fmc': 'Pictet',
'value': 213.76
},
{
'fmc': 'Nikko',
'value': 190.73
}
];
let counterRect = 0,
counterText = 0;
var heightScale = d3.scaleLinear()
.domain([150, 2500])
.range([10, 80]);
var column = graphGroup.selectAll("g")
.data(q12018Data)
.enter().append("g");
column.append("rect")
.attr("width", 150)
.attr("height", function(d) {
return heightScale(d.value)
})
.attr('y', function(d, i) {
let previous = counterRect;
return (counterRect += heightScale(d.value), previous)
})
.style('fill', 'gray')
.style("stroke", "white");
column.append("text")
.attr("x", 75)
.attr('y', function(d, i) {
let previous = counterText;
return (counterText += heightScale(d.value), previous + (heightScale(d.value)/2))
})
.attr("dominant-baseline", "central")
.attr('text-anchor', 'middle')
.text(function(d) {
return d.fmc;
});
<script src="https://d3js.org/d3.v5.min.js"></script>
