Untitled

<html lang='en'>
    <head>
        <meta charset='utf-8'>

        <style>
            .bar {
                fill: steelblue;
            }
            .bar:hover {
                fill: brown;
            }
        </style>

        <title>Bar</title>
        <script src='https://d3js.org/d3.v5.js' charset='utf-8'></script>
        <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    </head>

    <body>

        <div id='year-selector-container'>
            <input id='year-slider' class='year-range' type='range' min='2000' max='2005' value='2004'>
            Year: <span id='year-span'>2004</span>
        </div>

        <div id='type-selector-container'>
            <form id='type-selector'>
                <input type='radio' name='type-selector' id='rb-1' value='type1' checked />
                <label for='rb-1'>Type 1</label>

                <input type='radio' name='type-selector' id='rb-2' value='type2' />
                <label for='rb-2'>Type 2</label>

                <input type='radio' name='type-selector' id='rb-3' value='type3' />
                <label for='rb-3'>Type 3</label>
            </form>
        </div>

        <div id='barchart'></div>

        <script>
            var data = [
                {"year": 2000, "type1": 30, "type2": 40, "type3": 30},
                {"year": 2001, "type1": 75.5, "type2": 4.5, "type3": 30},
                {"year": 2002, "type1": 0, "type2": 90, "type3": 10},
                {"year": 2003, "type1": 15, "type2": 20, "type3": 65},
                {"year": 2004, "type1": 20, "type2": 40, "type3": 40},
                {"year": 2005, "type1": 50, "type2": 25, "type3": 25}
            ];

            var yearSelected = d3.select('#year-span').text();
            var typeSelected = document.querySelector('input[name=type-selector]:checked', '#type-selector').value;
            console.log('yearSelected:', yearSelected);
            console.log('typeSelected:', typeSelected);

            var svg = d3.select("#barchart").append("svg").attr("width", 450).attr("height", 200);
            var margin = {top: 20, right: 20, bottom: 30, left: 40};
            var width = +svg.attr("width") - margin.left - margin.right;
            var height = +svg.attr("height") - margin.top - margin.bottom;

            var x = d3.scaleBand().rangeRound([0, width]).padding(0.1);
            var y = d3.scaleLinear().rangeRound([height, 0]);

            var g = svg.append("g").attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

            x.domain(data.map(function(d) {
                return d.year;
            }));
            y.domain([0, d3.max(data, function(d) {
                if(typeSelected == 'type1') return d.type1;
                if(typeSelected == 'type2') return d.type2;
                if(typeSelected == 'type2') return d.type3;
            })]);

            g.append("g")
                .attr("class", "axis axis--x")
                .attr("transform", "translate(0," + height + ")")
                .call(d3.axisBottom(x));

            g.append("g")
                .attr("class", "axis axis--y")
                .call(d3.axisLeft(y).ticks(10, "%"))
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", "0.71em")
                .attr("text-anchor", "end");

            // return the right data
            function getData(type) {
                var arr = [];
                data.forEach(function(item) {
                    if(type == 'type1') arr.push({"year": item.year, "value": item.type1});
                    if(type == 'type2') arr.push({"year": item.year, "value": item.type2});
                    if(type == 'type3') arr.push({"year": item.year, "value": item.type3});
                });
                return arr;
            }

            var initialData = getData('type1');
            draw(initialData);

            // draw barchart
            function draw(data) {
                g.selectAll(".bar")
                    .data(data)
                    .enter().append("rect")
                    .attr("class", "bar")
                    .attr("x", function(d) {
                        return x(d.year);
                    })
                    .attr("y", function(d) {
                        return y(d.value);
                    })
                    .attr("width", x.bandwidth())
                    .attr("height", function(d) {
                        return height - y(d.value);
                    });
            } // end draw

            var updateRadio = function() {
                typeSelected = document.querySelector('input[name=type-selector]:checked', '#type-selector').value;
                console.log('typeSelected:', typeSelected);
                d3.selectAll('rect').remove();
                draw(getData(typeSelected));
            }

            var updateSlider = function() {
                var slider = document.getElementById('year-slider');
                var output = document.getElementById('year-span');
                yearSelected = slider.value;
                output.innerHTML = yearSelected;
                console.log('yearSelected:', yearSelected);
            }

            d3.select('#type-selector').on('change', updateRadio);
            d3.select('#year-slider').on('input', updateSlider);
        </script>

    </body>
</html>

<html lang='en'>
    <head>
        <meta charset='utf-8'>

        <style>
            .arc text {
              font: 10px sans-serif;
              text-anchor: middle;
            }

            .arc path {
              stroke: #fff;
            }
        </style>

        <title>Donut</title>
        <script src='https://d3js.org/d3.v5.js' charset='utf-8'></script>
        <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    </head>

    <body>

        <div id='year-selector-container'>
            <input id='year-slider' class='year-range' type='range' min='2000' max='2005' value='2004'>
            Year: <span id='year-span'>2004</span>
        </div>

        <div id='type-selector-container'>
            <form id='type-selector'>
                <input type='radio' name='type-selector' id='rb-1' value='type1' checked />
                <label for='rb-1'>Type 1</label>

                <input type='radio' name='type-selector' id='rb-2' value='type2' />
                <label for='rb-2'>Type 2</label>

                <input type='radio' name='type-selector' id='rb-3' value='type3' />
                <label for='rb-3'>Type 3</label>
            </form>
        </div>

        <div id='donutchart'></div>

    <script>
        var data = [
            {"year": 2000, "type1": 30, "type2": 40, "type3": 30},
            {"year": 2001, "type1": 75.5, "type2": 4.5, "type3": 30},
            {"year": 2002, "type1": 0, "type2": 90, "type3": 10},
            {"year": 2003, "type1": 15, "type2": 20, "type3": 65},
            {"year": 2004, "type1": 20, "type2": 40, "type3": 40},
            {"year": 2005, "type1": 50, "type2": 25, "type3": 25}
        ];

        var yearSelected = d3.select('#year-span').text();
        var typeSelected = document.querySelector('input[name=type-selector]:checked', '#type-selector').value;
        console.log('yearSelected:', yearSelected);
        console.log('typeSelected:', typeSelected);

        data = d3.nest()
            .key(function(d) {
                return d.year;
            })
        .object(data);
        console.log('ndata:', data);

        var width = 400;
        var height = 200;
        var radius = Math.min(width, height) / 2;

        var color = d3.scaleOrdinal()
            .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

        var arc = d3.arc()
            .outerRadius(radius - 10)
            .innerRadius(radius - 60);

        var pie = d3.pie()
            .sort(null)
            .value(function(d) {
                return d.value;
            });

        var svg = d3.select("#donutchart").append("svg")
            .attr("width", width)
            .attr("height", height);

        // return the right data
        function getData(year) {
            var filterData = data[year].slice();
            console.log('nfilterData:', filterData);
            var arr = [{"typeData": "type1", "value": filterData[0].type1}, {"typeData": "type2", "value": filterData[0].type2}, {"typeData": "type3", "value": filterData[0].type3}];
            console.log('arr:', arr);
            return arr;
        }

        var initialData = getData(yearSelected);
        draw(initialData);

        function draw(data) {
            var svgG = svg.append("g")
                .attr('class', 'svgG')
                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

            var g = svgG.selectAll(".arc")
                .data(pie(data))
                .enter()
                .append("g")
                .attr("class", "arc");

            g.append("path")
                .attr("d", arc)
                .style("fill", function(d) {
                    return color(d.data.typeData);
                });

            g.append("text")
                .attr("transform", function(d) {
                    return "translate(" + arc.centroid(d) + ")";
                })
                .attr("dy", ".35em")
                .text(function(d) {
                    return d.data.typeData;
                });
        }

        var updateRadio = function() {
            typeSelected = document.querySelector('input[name=type-selector]:checked', '#type-selector').value;
            console.log('typeSelected:', typeSelected);
        }

        var updateSlider = function() {
            var slider = document.getElementById('year-slider');
            var output = document.getElementById('year-span');
            yearSelected = slider.value;
            output.innerHTML = yearSelected;
            console.log('yearSelected:', yearSelected);
            d3.selectAll('.svgG').remove();
            draw(getData(yearSelected));
        }

        d3.select('#type-selector').on('change', updateRadio);
        d3.select('#year-slider').on('input', updateSlider);
    </script>

    </body>
</html>