diff --git a/CHANGELOG.md b/CHANGELOG.md index c375ca87..a683e932 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ Starting from this release, version naming will be based on Semantic Versioning. - _Barchart_: Padding in horizontal bar charts now works. - _Beeswarm plot_: Added error message when using negative values for size. +- _Bump chart_: labels are now correct when using padding - _Circle packing_: Added error message when using negative values for size. - _Circular dendrogram_: Added error message when using negative values for size. - _Grouped barcharts_: Fixed date formats. Axis ticks are now prettier when using dates. diff --git a/example/configurations/bumpchart - rankings.js b/example/configurations/bumpchart - rankings.js new file mode 100644 index 00000000..26b54c55 --- /dev/null +++ b/example/configurations/bumpchart - rankings.js @@ -0,0 +1,31 @@ +import chart from 'rawcharts/bumpchart' +import data from '../datasets/banks-rankings.tsv' + +export default { + chart: chart, + data, + dataTypes: { + Bank: 'string', + Year: { + type: 'date', + dateFormat: 'YYYY', + }, + Rank: 'number', + }, + mapping: { + // series: { value: ['Category'] }, + streams: { value: ['Bank'] }, + x: { value: ['Year'] }, + size: { value: ['Rank'] }, + //size: { value: ['Revenues-Adjusted'] }, + //color: { value: ['Category'] }, + }, + visualOptions: { + useSameScale: true, + streamsOffset: 'stackOffsetSilhouette', + streamsOrder: 'stackOrderInsideOut', + //interpolation: 'curveLinear', + streamsPadding: 5, + labelsType: 'On path', + }, +} diff --git a/example/datasets/banks-rankings.tsv b/example/datasets/banks-rankings.tsv new file mode 100644 index 00000000..f11dea64 --- /dev/null +++ b/example/datasets/banks-rankings.tsv @@ -0,0 +1,151 @@ +Bank Year Rank +Morgan Stanley 2017 1 +Morgan Stanley 2018 1 +Morgan Stanley 2019 2 +Morgan Stanley 2020 2 +Morgan Stanley 2021 2 +Morgan Stanley 2022 5 +Goldman Sachs & Co 2017 2 +Goldman Sachs & Co 2018 2 +Goldman Sachs & Co 2019 1 +Goldman Sachs & Co 2020 1 +Goldman Sachs & Co 2021 1 +Goldman Sachs & Co 2022 2 +JP Morgan 2017 3 +JP Morgan 2018 3 +JP Morgan 2019 3 +JP Morgan 2020 3 +JP Morgan 2021 3 +JP Morgan 2022 3 +BofA Securities Inc 2017 4 +BofA Securities Inc 2018 5 +BofA Securities Inc 2019 4 +BofA Securities Inc 2020 4 +BofA Securities Inc 2021 4 +BofA Securities Inc 2022 6 +Citi 2017 5 +Citi 2018 4 +Citi 2019 5 +Citi 2020 5 +Citi 2021 5 +Citi 2022 7 +UBS 2017 6 +UBS 2018 6 +UBS 2019 7 +UBS 2020 9 +UBS 2021 9 +UBS 2022 10 +Credit Suisse 2017 7 +Credit Suisse 2018 7 +Credit Suisse 2019 6 +Credit Suisse 2020 6 +Credit Suisse 2021 10 +Credit Suisse 2022 15 +Barclays 2017 8 +Barclays 2018 9 +Barclays 2019 8 +Barclays 2020 8 +Barclays 2021 8 +Barclays 2022 13 +Deutsche Bank 2017 9 +Deutsche Bank 2018 8 +Deutsche Bank 2019 15 +Deutsche Bank 2020 17 +Deutsche Bank 2021 19 +Deutsche Bank 2022 22 +RSC Capital Markets 2017 10 +RSC Capital Markets 2018 12 +RSC Capital Markets 2019 12 +RSC Capital Markets 2020 19 +RSC Capital Markets 2021 18 +RSC Capital Markets 2022 18 +Nomura 2017 11 +Nomura 2018 11 +Nomura 2019 19 +Nomura 2020 23 +Nomura 2021 20 +Nomura 2022 24 +BNP Paribas SA 2017 12 +BNP Paribas SA 2018 20 +BNP Paribas SA 2019 14 +BNP Paribas SA 2020 15 +BNP Paribas SA 2021 15 +BNP Paribas SA 2022 17 +CITIC 2017 13 +CITIC 2018 18 +CITIC 2019 9 +CITIC 2020 7 +CITIC 2021 6 +CITIC 2022 1 +Wells Fargo & Co 2017 14 +Wells Fargo & Co 2018 14 +Wells Fargo & Co 2019 16 +Wells Fargo & Co 2020 20 +Wells Fargo & Co 2021 22 +Wells Fargo & Co 2022 23 +Jefferies LLC 2017 15 +Jefferies LLC 2018 13 +Jefferies LLC 2019 13 +Jefferies LLC 2020 13 +Jefferies LLC 2021 11 +Jefferies LLC 2022 12 +China Securities Co Ltd 2017 16 +China Securities Co Ltd 2018 17 +China Securities Co Ltd 2019 17 +China Securities Co Ltd 2020 11 +China Securities Co Ltd 2021 13 +China Securities Co Ltd 2022 8 +China International Capital Co 2017 17 +China International Capital Co 2018 10 +China International Capital Co 2019 10 +China International Capital Co 2020 10 +China International Capital Co 2021 7 +China International Capital Co 2022 4 +HSBC Holdings PLC 2017 18 +HSBC Holdings PLC 2018 21 +HSBC Holdings PLC 2019 11 +HSBC Holdings PLC 2020 12 +HSBC Holdings PLC 2021 14 +HSBC Holdings PLC 2022 16 +Guotai Junan Securities 2017 19 +Guotai Junan Securities 2018 24 +Guotai Junan Securities 2019 20 +Guotai Junan Securities 2020 14 +Guotai Junan Securities 2021 16 +Guotai Junan Securities 2022 11 +Societe Generale 2017 20 +Societe Generale 2018 25 +Societe Generale 2019 26 +Societe Generale 2020 42 +Societe Generale 2021 34 +Societe Generale 2022 39 +Daiwa Securities Group Inc 2017 21 +Daiwa Securities Group Inc 2018 19 +Daiwa Securities Group Inc 2019 36 +Daiwa Securities Group Inc 2020 30 +Daiwa Securities Group Inc 2021 25 +Daiwa Securities Group Inc 2022 61 +Mizuho Financial Group 2017 22 +Mizuho Financial Group 2018 16 +Mizuho Financial Group 2019 23 +Mizuho Financial Group 2020 18 +Mizuho Financial Group 2021 21 +Mizuho Financial Group 2022 30 +BMO Capital Markets 2017 23 +BMO Capital Markets 2018 30 +BMO Capital Markets 2019 27 +BMO Capital Markets 2020 28 +BMO Capital Markets 2021 24 +BMO Capital Markets 2022 54 +Sumitomo Mitsui Finl Grp Inc 2017 24 +Sumitomo Mitsui Finl Grp Inc 2018 15 +Sumitomo Mitsui Finl Grp Inc 2019 22 +Sumitomo Mitsui Finl Grp Inc 2020 26 +Sumitomo Mitsui Finl Grp Inc 2021 28 +Sumitomo Mitsui Finl Grp Inc 2022 47 +Guosen Securities Co Ltd 2017 25 +Guosen Securities Co Ltd 2018 39 +Guosen Securities Co Ltd 2019 49 +Guosen Securities Co Ltd 2020 34 +Guosen Securities Co Ltd 2021 42 +Guosen Securities Co Ltd 2022 26 \ No newline at end of file diff --git a/src/bumpchart/render.js b/src/bumpchart/render.js index 8c78ea14..bdee6c65 100644 --- a/src/bumpchart/render.js +++ b/src/bumpchart/render.js @@ -256,6 +256,8 @@ export function render( }) }) + console.log(stackedData) + let localDomain = [ d3.min(stackedData, (d) => d3.min(d, (d) => d[0])), d3.max(stackedData, (d) => d3.max(d, (d) => d[1])), @@ -345,7 +347,7 @@ export function render( .line() .curve(d3[interpolation]) .x((d) => xScale(d.data[0])) - .y((d) => sizeScale((d[0] + d[1]) / 2)) + .y((d) => sizeScale((d[0] + d[1]) / 2) - d.padding) ) selection @@ -392,7 +394,12 @@ export function render( // get x position return xScale(d.maxElement.data[0]) }) - .attr('y', (d) => sizeScale((d.maxElement[0] + d.maxElement[1]) / 2)) + .attr( + 'y', + (d) => + sizeScale((d.maxElement[0] + d.maxElement[1]) / 2) - + d.maxElement.padding + ) .attr('text-anchor', (d) => xScale(d.maxElement.data[0]) > serieWidth - 10 ? 'end'