close and fix #143

bumpchart labels are now correct when using padding

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.

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',
+  },
+}

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

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'