d3 example with update pattern using ES6

<!DOCTYPE html>
<html>
<head>
	<title>Charts</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.js"></script>
	<style type="text/css">
		body {
			font-family: "Helvetica Neue", Helvetica, sans-serif;
		}

.heading {
			font-size: 32px;
			font-weight: 300;
		}

.chart-bar {
			width: 500px;
			height: 300px;
			border: 1px solid #ddd;
		}
    .btn-update {
      margin-bottom: 15px;
    }
	</style>

</head>
<body>
	<h1 class="heading">D3 example</h1>
  <button class="btn-update">Update</button>
	<div class="chart chart-bar"></div>

constructor(config) {
				this.configure(config);
				this.init();
			}

configure(config) {
				Object.assign(this, BarChart.defaults, config);
			}

init() {
				let { element, margin, width, height, data } = this;

if (typeof element === 'string') {
					this.element = element = document.querySelector('.chart-bar');
				}

this.width = width = element.clientWidth;
				this.height = height = element.clientHeight;
				this.innerWidth = width - margin.left - margin.right;
				this.innerHeight = height - margin.top - margin.bottom;
        
        this.color = d3.scaleOrdinal(d3.schemeCategory20);
        
        this.x = d3.scaleLinear()
        	.range([0, this.innerWidth])
        ;
        
        this.y = d3.scaleLinear()
        	.range([this.innerHeight, 0])
        ;

this.svg = d3.select(element)
					.append('svg')
					.attr('width', width)
					.attr('height', height)
				.append('g')
					.attr('transform', `translate(${margin.left},${margin.top})`)
				;

this.loading = true;
				this.fetch();
				this.render(data);
			}

fetch() {
				const { url } = this;
				d3.json(url, (err, data) => {
					if (err) throw err;
					this.loading = false;
					this.render(data);
				});
			}

update(data) {
				this.render(data);
			}

renderLoader() {
				const { svg, loading, lang, innerWidth, innerHeight } = this;

if (!loading) {
					this.loader.remove();
					return;
				}

this.loader = svg.append('text')
					.attr('text-anchor', 'middle')
					.attr('x', innerWidth/2)
					.attr('y', innerHeight/2)
					.text(lang.loading)
				;
			}

renderBars(data) {
				const { svg, color, x, y, t, innerHeight, innerWidth } = this;

x.domain([0, d3.max(data)]);
				y.domain([0, d3.max(data)]);
        
				let selection = svg.selectAll('circle')
					.data(data, d => d)
				;

// UPDATE
				selection
        	.attr('class', 'update')
				;

// ENTER
				selection.enter()
					.append('circle')
        	.attr('class', 'enter')
					.attr('cy', innerHeight / 2)
        	.attr('cx', innerWidth / 2)
					.attr('r', 10)
					.transition(t)
					.attr('cx', x)
        	.attr('cy', y)
					.attr('fill', color)
				;

// EXIT
				selection.exit().remove();
			}

render(data) {
				this.renderLoader();
        
        if (!data) return;
        
				this.renderBars(data);
			}
		}

const chart = new BarChart({
			element: '.chart-bar',
			url: 'https://localhost/data.json',
			lang: {
				loading: 'Loading data please wait ...',
			}
		});

document.querySelector(".btn-update")
    	.addEventListener("click", function(event) {
      	let data = [];
      	data.push( Math.random() * 100 );
				data.push( Math.random() * 100 );
				data.push( Math.random() * 100 );
				data.push( Math.random() * 100 );
				data.push( Math.random() * 100 );
      
				chart.update(data);      
	    });

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.js