diff --git a/README.md b/README.md
index a3545d1..8981e54 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,6 @@ The official repository of all publication ready ONS charts. See the [chart menu
| ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------- | ---------- | --------------- |
| Area stacked | [View](https://onsvisual.github.io/Charts/area-stacked/) | ❌ | ❌ | ✅ |
| Area stacked small multiple | [View](https://onsvisual.github.io/Charts/area-stacked-sm/) | ❌ | ❌ | ✅ |
-| Bar chart Split | [View](https://onsvisual.github.io/Charts/bar-chart-horizontal-split/) | ❌ | ❌ | ✅ |
| Bar chart horizontal | [View](https://onsvisual.github.io/Charts/bar-chart-horizontal/) | ❌ | ❌ | ✅ |
| Bar chart horizontal with dropdrown | [View](https://onsvisual.github.io/Charts/bar-chart-horizontal-with-dropdown/) | ❌ | ❌ | ✅ |
| Bar chart horizontal small multiple | [View](https://onsvisual.github.io/Charts/bar-chart-horizontal-sm/) | ❌ | ❌ | ✅ |
@@ -66,3 +65,4 @@ The official repository of all publication ready ONS charts. See the [chart menu
| Scatter plot small multiple | [View](https://onsvisual.github.io/Charts/scatter-plot-sm/) | ❌ | ❌ | ✅ |
| Scatter plot animated | [View](https://onsvisual.github.io/Charts/scatter-plot-animated/) | ❌ | ❌ | ❌ |
| Slope chart | [View](https://onsvisual.github.io/Charts/slope-chart/) | ❌ | ❌ | ✅ |
+| Split bar chart | [View](https://onsvisual.github.io/Charts/split-bar-chart/) | ❌ | ❌ | ✅ |
diff --git a/bar-chart-horizontal-split/chart.css b/bar-chart-horizontal-split/chart.css
deleted file mode 100644
index e158b9b..0000000
--- a/bar-chart-horizontal-split/chart.css
+++ /dev/null
@@ -1,74 +0,0 @@
-/* space between the plots */
-div.plots{
- padding-bottom:20px;
-}
-
-/* styles for plot titles */
-div.plots p.plot--title{
- font-weight: 700;
- margin-bottom:0;
-}
-
-div.column{
- padding-right:10px;
- display:inline-block
-}
-
-div.rowLabel{
- display: inline-block;
-}
-
-div.headers{
- margin-right: -10px;
- display: inline-block;
-}
-
-div.rowLabel span{
- font-size: 14px;
- color:#414042;
- text-align: right;
- vertical-align: middle;
- display:block;
- padding-right:10px;
- height:30px;
-}
-
-div.column span{
- font-weight: 600;
- font-size: 14px;
- color:#414042;
-}
-
-div.splitBar-inner--background{
- background: #ececec;
- height:30px;
- position: relative;
-}
-
-
-div.splitBar-row{
- display: flex;
- align-items: center;
- margin-bottom: 10px;
-}
-
-/* set the margin to 0 for the 2nd to last div so the zero is close */
-div.chart div:nth-last-child(2) {
- margin-bottom: 0;
-}
-
-div.splitBar-bar--value{
- position:absolute;
- top:0;
- height:100%;
-}
-
-div.splitBar-bar--label{
- text-align: left;
- padding:0 5px;
- line-height: 27px;
-}
-
-div.splitBar-label{
- margin-bottom:10px;
-}
\ No newline at end of file
diff --git a/bar-chart-horizontal-split/config.js b/bar-chart-horizontal-split/config.js
deleted file mode 100644
index ce8889b..0000000
--- a/bar-chart-horizontal-split/config.js
+++ /dev/null
@@ -1,46 +0,0 @@
-config = {
- "essential": {
- "graphic_data_url": "data.csv",
- "colour_palette_type": "categorical",
- // type can be mono, divergent, categorical
- "colour_palette_colours": [
- "#206095",
- "#27A0CC",
- "#871A5B",
- "#A8BD3A",
- "#F66068"
- ],
- // colours is an array for the colours of the bars
- // e.g. if mono use ["206095"]
- // e.g if divergent you can use ["#206095","#F66068"]
- // e.g if categorical ["#206095", "#27A0CC","#871A5B", "#A8BD3A","#F66068"]
- "numberFormat": ".0f",
- "rowWidth": "140",
- // rowWidth set the width of y category column in pixel
- "accessibleSummary":
- "This chart has been hidden from screen readers. The main message of the chart is summarised in the chart title.",
- "sourceText": "Office for National Statistics",
- "threshold_sm": 500
- },
- //Don't adjust this part - it only affects the chart build tool
- "chart_build": {
- "graphic_data_url": "text",
- "colour_palette_type": "radio",
- "colour_palette_type_options": ["mono", "divergent", "categorical"],
- "colour_palette_colours": "colour",
- "colour_palette_colours_options": [
- "#206095",
- "#27A0CC",
- "#871A5B",
- "#A8BD3A",
- "#F66068"
- ],
- "numberFormat": "dThreeFormat",
- "numberFormat_options": [".0f"],
- "rowWidth": "number",
- "accessibleSummary": "textarea",
- "sourceText": "text",
- "threshold_sm": "number"
- },
- "elements": { "select": 0, "nav": 0, "legend": 0, "titles": 0 }
-};
diff --git a/bar-chart-horizontal-split/data.csv b/bar-chart-horizontal-split/data.csv
deleted file mode 100644
index d60c108..0000000
--- a/bar-chart-horizontal-split/data.csv
+++ /dev/null
@@ -1,34 +0,0 @@
-plot,ycategory,xcategory,value
-Country,England,No cars or vans,66.45803492
-Country,England,1 car or van,46.1170011
-Country,England,2 cars or vans,23.3835249
-Country,Wales,No cars or vans,49.44778165
-Country,Wales,1 car or van,40.30512154
-Country,Wales,2 cars or vans,13.759689
-Region,London,No cars or vans,80.56518156
-Region,London,1 car or van,67.74719392
-Region,London,2 cars or vans,44.40901046
-Region,South East,No cars or vans,-49.16281699
-Region,South East,1 car or van,-72.58837136
-Region,South East,2 cars or vans,63.46911119
-Region,South West,No cars or vans,45.76204946
-Region,South West,1 car or van,67.3660344
-Region,South West,2 cars or vans,99.91081304
-Region,East of England,No cars or vans,59.9605932
-Region,East of England,1 car or van,21.77797177
-Region,East of England,2 cars or vans,27.31446944
-Region,East Midlands,No cars or vans,-12.77125895
-Region,East Midlands,1 car or van,27.94089648
-Region,East Midlands,2 cars or vans,51.54980878
-Region,West Midlands,No cars or vans,44.79812224
-Region,West Midlands,1 car or van,36.37235365
-Region,West Midlands,2 cars or vans,30.67034815
-Region,Yorkshire and The Humber,No cars or vans,20.67288064
-Region,Yorkshire and The Humber,1 car or van,71.36896294
-Region,Yorkshire and The Humber,2 cars or vans,26.92732815
-Region,North West,No cars or vans,32.40881237
-Region,North West,1 car or van,68.08925507
-Region,North West,2 cars or vans,26.54675587
-Region,North East,No cars or vans,74.42364709
-Region,North East,1 car or van,2.091265918
-Region,North East,2 cars or vans,26.94421516
\ No newline at end of file
diff --git a/bar-chart-horizontal-split/index.html b/bar-chart-horizontal-split/index.html
deleted file mode 100644
index 41312fe..0000000
--- a/bar-chart-horizontal-split/index.html
+++ /dev/null
@@ -1,40 +0,0 @@
-
-
-
-
-
-
- Split bar chart
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/bar-chart-horizontal-split/script.js b/bar-chart-horizontal-split/script.js
deleted file mode 100644
index 2fac1fe..0000000
--- a/bar-chart-horizontal-split/script.js
+++ /dev/null
@@ -1,205 +0,0 @@
-let graphic = d3.select('#graphic');
-let legend = d3.select('#legend');
-let pymChild = null;
-
-function drawGraphic() {
-
- // clear out existing graphics
- graphic.selectAll('*').remove();
- legend.selectAll('*').remove();
-
-
- if (parseInt(graphic.style("width")) < config.essential.threshold_sm) {
- size = "sm"
- } else {
- size = "not sm"
- }
-
- //population accessible summmary
- d3.select('#accessibleSummary').html(config.essential.accessibleSummary)
-
- formatNo = d3.format(config.essential.numberFormat)
-
- // set up scale
- x = d3.scaleLinear()
- .range([0, 100])
- .domain([d3.min([0, d3.min(graphic_data, d => +d.value)]), d3.max(graphic_data, d => +d.value)])
-
-
-
- // nest data
- groupedData = d3.groups(graphic_data, d => d.plot, d => d.ycategory)
-
- // unique columns
- xcategories = [...new Set(graphic_data.map(d => d.xcategory))]
-
- if (config.essential.colour_palette_type == "categorical") {
- colour = d3.scaleOrdinal()
- .range(config.essential.colour_palette_colours)
- .domain(xcategories)
-
- if(size=="sm"){
- // Set up the legend
- let legenditem = d3.select('#legend')
- .selectAll('div.legend--item')
- .data(d3.zip(xcategories, config.essential.colour_palette_colours))
- .enter()
- .append('div')
- .attr('class', 'legend--item')
-
- legenditem.append('div').attr('class', 'legend--icon--circle')
- .style('background-color', function(d) {
- return d[1]
- })
-
- legenditem.append('div')
- .append('p').attr('class', 'legend--text').html(function(d) {
- return d[0]
- })
- }
-
-
- }
-
- // create div for each plot, here England, Wales
- plots = graphic.selectAll('div.plots').data(groupedData)
- .join('div')
- .attr('class', 'plots')
-
- plots.append('p')
- .attr('class', 'plot--title')
- .html(d => d[0])
-
- // create a div for the chart
- chart = plots.append('div').attr('class', 'chart')
-
-
- if(size!="sm"){
- // create a div for the headers
- headers = chart.append('div').attr('class', 'splitBar-label')
-
- // create div for the first square
- headers.append('div')
- .attr('class', 'rowLabel')
- .style('width', config.essential.rowWidth + 'px')
-
- // create divs for the rest of the column headers
- headers.append('div').attr('class', 'headers')
- .style('width', `calc(100% - ${config.essential.rowWidth}px)`)
- .selectAll('div.column').data(xcategories)
- .join('div')
- .attr('class', 'column')
- .style('width', 100 / xcategories.length + '%')
- .append('span').html(d => d)
- }
-
-
- // create divs as rows
- rows = chart.selectAll('div.rows')
- .data(d => d[1])
- .join('div')
- .attr('class', 'splitBar-row')
-
- // first div as separate
- rows.append('div').attr('class', 'rowLabel')
- .style('width', config.essential.rowWidth + 'px')
- .append('span')
- .style('text-align', 'right')
- .html(d => d[0])
-
- // then create another div to hold all split bars
- splitBar = rows.append('div').attr('class', 'headers')
- .style('width', `calc(100% - ${config.essential.rowWidth}px)`)
- .selectAll('div.splitBar')
- .data(d => d[1])
- .join('div')
- // then add a div for each x category
- .attr('class', 'column')
- .style('width', 100 / xcategories.length + '%')
-
- // divs for inside the splitBar
- splitBarInner = splitBar.append('div').attr('class', 'splitBar-inner')
- // then div for the background
- .append('div')
- .attr('class', 'splitBar-inner--background')
-
- // add a div to help draw a line for 0
- splitBarInner.append('div')
- .attr('class', 'splitBar-bar--value')
- .style('left', 0)
- .style('width', x(0) + "%")
- .style('border-right', "1.5px solid #b3b3b3")
- .style('height', "calc(100% + 15px)")
- .style('top', "-8px")
-
- // then div for the value
- splitBarInner.append('div')
- .attr('class', 'splitBar-bar--value')
- .style('left', d => +d.value > 0 ? x(0) + "%" : x(+d.value) + "%")
- .style('right', d => +d.value > 0 ? 100 - x(+d.value) + "%" : (100 - x(0)) + "%")
- .style('background', function(d) {
- if (config.essential.colour_palette_type == "mono") {
- return config.essential.colour_palette_colours[0]
- } else if (config.essential.colour_palette_type == "divergent") {
- return +d.value > 0 ? config.essential.colour_palette_colours[0] : config.essential.colour_palette_colours[1]
- } else if (config.essential.colour_palette_type == "categorical") {
- return colour(d.xcategory)
- }
- })
- .append('div')
- // then a div to hold the value
- .attr('class', 'splitBar-bar--label')
- .style('margin-left', (d) => {
- if (d.value > 0) {
- return Math.abs(+x(d.value) - x(0)) < 20 ? "100%" : "calc(100% - 35px)" // you'll need to adjust these calcs if you want to move the text slightly left or right
- } else {
- return Math.abs(+x(d.value) - x(0)) > 20 ? "0%" : "calc(0% - 35px)"
- }
- })
- .append('span')
- .style('color', d => Math.abs(+x(d.value) - x(0)) < 20 ? "#222222" : "#fff")
- .html(d => formatNo(d.value))
-
- // final div for the zero indicator
- finalrow = chart.append('div').attr('class', 'finalRow')
- // first div as separate
- finalrow.append('div').attr('class', 'rowLabel')
- .style('width', config.essential.rowWidth + 'px')
-
- finalrow.append('div').attr('class', '')
- .style('margin-right', '-10px')
- .style('width', `calc(100% - ${config.essential.rowWidth}px)`)
- .style('display', 'inline-block')
- .selectAll('div.column').data(xcategories)
- .join('div')
- .attr('class', 'column')
- .style('width', 100 / xcategories.length + '%')
- .style('padding-right', '8px')
- .style('display', 'inline-block')
- .append('span')
- .style('position', 'relative')
- .style('left', 'calc(' + x(0) + "%" + ' - 5px)')
- .html(0)
-
- //create link to source
- d3.select("#source")
- .text("Source: " + config.essential.sourceText)
-
-
-
- //use pym to calculate chart dimensions
- if (pymChild) {
- pymChild.sendHeight();
- }
-}
-
-d3.csv(config.essential.graphic_data_url)
- .then(data => {
- //load chart data
- graphic_data = data
-
- //use pym to create iframed chart dependent on specified variables
- pymChild = new pym.Child({
- renderCallback: drawGraphic
- });
- });
diff --git a/split-bar-chart/config.js b/split-bar-chart/config.js
index 64678c1..e01ca0f 100644
--- a/split-bar-chart/config.js
+++ b/split-bar-chart/config.js
@@ -15,12 +15,15 @@ config = {
// e.g if divergent you can use ["#206095","#F66068"]
// e.g if categorical ["#206095", "#27A0CC","#871A5B", "#A8BD3A","#F66068"]
"numberFormat": ".0f",
- "rowWidth": "140",
+ "rowWidth": {
+ "sm": 100,
+ "not sm": 140
+ },
// rowWidth set the width of y category column in pixel
"accessibleSummary":
"This chart has been hidden from screen readers. The main message of the chart is summarised in the chart title.",
"sourceText": "Office for National Statistics",
- "threshold_sm": 500
+ "threshold_sm": 510
},
//Don't adjust this part - it only affects the chart build tool
"chart_build": {
diff --git a/split-bar-chart/script.js b/split-bar-chart/script.js
index 08661d5..d78fe05 100644
--- a/split-bar-chart/script.js
+++ b/split-bar-chart/script.js
@@ -93,13 +93,13 @@ function drawGraphic() {
headers
.append('div')
.attr('class', 'rowLabel')
- .style('width', config.essential.rowWidth + 'px');
+ .style('width', config.essential.rowWidth[size] + 'px');
// create divs for the rest of the column headers
headers
.append('div')
.attr('class', 'headers')
- .style('width', `calc(100% - ${config.essential.rowWidth}px)`)
+ .style('width', `calc(100% - ${config.essential.rowWidth[size]}px)`)
.selectAll('div.column')
.data(xcategories)
.join('div')
@@ -120,7 +120,7 @@ function drawGraphic() {
rows
.append('div')
.attr('class', 'rowLabel')
- .style('width', config.essential.rowWidth + 'px')
+ .style('width', config.essential.rowWidth[size] + 'px')
.append('span')
.style('text-align', 'right')
.html((d) => d[0]);
@@ -129,7 +129,7 @@ function drawGraphic() {
splitBar = rows
.append('div')
.attr('class', 'headers')
- .style('width', `calc(100% - ${config.essential.rowWidth}px)`)
+ .style('width', `calc(100% - ${config.essential.rowWidth[size]}px)`)
.selectAll('div.splitBar')
.data((d) => d[1])
.join('div')
@@ -196,13 +196,13 @@ function drawGraphic() {
finalrow
.append('div')
.attr('class', 'rowLabel')
- .style('width', config.essential.rowWidth + 'px');
+ .style('width', config.essential.rowWidth[size] + 'px');
finalrow
.append('div')
.attr('class', '')
.style('margin-right', '-10px')
- .style('width', `calc(100% - ${config.essential.rowWidth}px)`)
+ .style('width', `calc(100% - ${config.essential.rowWidth[size]}px)`)
.style('display', 'inline-block')
.selectAll('div.column')
.data(xcategories)