d3wb.theme('dark')
let cv = d3wb.config()
    .attr('bgColor', d3wb.color.background)
    .data('https://gist.githubusercontent.com/BastiTee/19c84cfa1dc21a5167d1de25734e6294/raw/ee1b5bf8eb85d4eb83ee64663268c0b0c96eed50/data.csv')
    .toCanvas();

d3.csv(cv.data, function(error, data) {
    data.forEach(function(d) {
        d.link = d.link.replace(/\/name\./, "/name,")
    });
    data = data.sort(function(a, b) {
        return b.value - a.value
    })
    let chart = wbPackedBubbles()
        .width(cv.wid)
        .height(cv.hei)
        .fillRange([d3wb.color.blue, d3wb.color.blue.fade(10)])
        .colorRange([d3wb.color.foreground.fade(30), d3wb.color.foreground])
        .fadeOpacity([0.4, 1.0])
    cv.datum(data).call(chart);

    // create tooltips
    let tt = d3wb.mouse.tooltip().selector(function(d) {
        return d.data.id + "\n" +
            "2017: " + d.data.value + " Geburten\n" +
            "2016: " + d.data.valold + " Geburten\n" +
            "Differenz: " + d.data.valdiff + " Geburten";
    });
    cv.selectAll('.circles').call(tt);
    cv.selectAll('.texts').call(tt);

    // create a button
    let button = d3wb.html.button()
        .options(['Alle', 'Männlich', 'Weiblich'])
        .style('top', '10px')
        .style('right', '10px')
        .style('width', '150px')
        .style('background-color', d3wb.color.blue)
        .style('color', d3wb.color.foreground)
        .style('font-size', '150%')
        .style('border', 'none')
        .callback(function(value, idx) {
            let newOp;
            cv.selectAll('.circles')
                .transition().duration(500)
                .style('opacity', function(d) {
                    if (idx == 0) {
                        return d.data.gen == 'm' ? 1.0 : 0.1
                    } else if (idx == 1) {
                        return d.data.gen == 'w' ? 1.0 : 0.1
                    } else {
                        return chart.fadeScale()(d.value);
                    }

                });
        });
    cv.div.call(button);

    // create an info section
    let info = d3wb.html.infoBox()
        .style('top', '0px')
        .style('left', '8px')
        .infoContent(
`<b>Vornamen von Bonner Neugeborenen im Jahr 2017</b><br /><br />
Klick auf Button, um weibl./männl. Namen hervorzuheben.<br />
Klick auf Kreise für Namensherkunft.<br /><br />
Datenquelle: https://opendata.bonn.de/dataset/vornamen-von-neugeborenen-im-jahr-2017
`);
    cv.div.call(info);
});