D3 Examples - d3 example with update pattern using ES6

xxxxxxxxxx
 
<!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>
​
    <script>
        class BarChart {
            static get defaults() {
                return {
                    margin: { top: 15, right: 15, bottom: 15, left: 15 },
                    data: [],
                    t: d3.transition().delay(1000)
                };
            }
​
            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>
    