vadallomany

readme.md

Vadallomany 1995 - 2018

ksh

Nagyvadak, aprovadak

Szamlalas februar vege

chart.js

const
    title = {height: 30, text: 'Vadállomány - Kilőtt vad [ezer db]'},
    legend = {height: 50},
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    bar = {marginRatio: 0.8, paddingRatio: 0.1},
    width = document.body.clientWidth - margin.left - margin.right,
    height = document.documentElement.clientHeight,
    y = d3.scaleLinear().range([
        height - margin.top - margin.bottom - legend.height - title.height, // the bottom
        margin.top + margin.bottom + legend.height]), // the top
    xOuter = d3.scaleBand().range([0, width]),
    xInner = d3.scaleBand(),
    colorScale = d3.scaleBand().range([0, 1]),
    colors = x => d3.schemeTableau10[Math.floor(10 * colorScale(x))],

    xAxis = d3.axisBottom().scale(xOuter),
    yAxis = d3.axisLeft().scale(y).tickFormat(d => `${d}`),

    isNumber = v => Number.isFinite(Number(v)),
    rowKeys = data => data && Object.keys(data).filter(isNumber),
    sanitize = str => typeof str == 'string' ? str.replace(/,/g, '') : str,
    rowVals = rowData => Object.values(rowData).map(sanitize).filter(isNumber),
    dataRows1 = [2, 3, 4, 5, 6, 8, 9, 10],
    breeds = data => data.filter((d, i) => (dataRows1.includes(i))).map(d => d.megnevezes), // 2-6, 8-10
    maxVal = data => {
        const rowMaxArr = data.map(d => Math.max(...rowVals(d)));
        return Math.max(...rowMaxArr);
    };

const svgNode = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom + legend.height + title.height)
    .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);


svgNode.append('text')
    .text(title.text)
    .attr('x', width / 2)
    .attr('y', margin.top / 2)
    .attr('text-anchor', 'middle')
    .attr('style', 'font-face:Times;font-size:20px;');

// global data
let legendData = null;
let labels;
// fix nodes
let legendNode;
const chartNode = svgNode
    .append("g")
    .attr('class', 'chart');

const tooltipNode = d3.select('body')
        .append('div')
        .attr('class', 'tooltip')
        .style('opacity', 0),
    tooltipContent = (text, value, killed) => `${text}<br/>` +
        `<span style='color:green'>${value}</span> | <span style='color:red'>${killed}</span>`;

const selectedData = d => {
    const selected = legendData.filter(l => l.selected).map(l => l.name);
    return d.filter(d => selected.includes(d.megnevezes));
};
const createLegend = (data) => {
    legendData = breeds(data).map((d, i) => ({name: d, selected: i < 2}));
    labels = rowKeys(data[dataRows1[0]]);
    xOuter.domain(labels);
    colorScale.domain(breeds(data));

    legendNode = svgNode.append('g')
        .attr('class', 'legend')
        .attr('transform', `translate(${margin.left},${title.height})`);
};

const drawLegend = data => {
    const breedsJoin = legendNode.selectAll('.breed')
        .data(legendData);

    const breed = breedsJoin
        .enter()
        .append('g')
        .attr('class', 'breed');

    breedsJoin
        .join()
        .select('circle')
        .attr('style', d => {
            const fillColor = d.selected ? colors(d.name) : 'none';
            const strokeColor = colors(d.name);
            return `fill:${fillColor};fill-opacity:0.6;stroke:${strokeColor};stroke-width:1`;
        });

    breed.on('click', d => {
        d.selected = !d.selected;
        draw(data);
        drawLegend(data);
    });

    breed
        .append('circle')
        .attr('cx', 5).attr('cy', 5)
        .attr('r', 5)
        .attr('style', d => {
            const fillColor = d.selected ? colors(d.name) : 'none';
            const strokeColor = colors(d.name);
            return `fill:${fillColor};fill-opacity:0.6;stroke:${strokeColor};stroke-width:1`;
        })
        .attr('transform', 'translate(0,-8)');

    breed.append('text')
        .text(d => d.name)
        .attr('transform', 'translate(15,0)');

    // adjust legend nodes width to text width
    breed.call(nodeList => {
        let lastLabelWidth = 0;
        nodeList.nodes().forEach(node => {
            const n = d3.select(node);
            n.attr('transform', `translate(${lastLabelWidth},0)`);
            lastLabelWidth += n.select('text').node().getComputedTextLength() + 15 + 15;
        });
    })
};

const draw = (data) => {
    // filteredData -> breeds selected on legend
    const filteredData = selectedData(data);

    xInner.range([0, xOuter.bandwidth() * bar.marginRatio]).domain(filteredData.map(f => f.megnevezes));

    y.domain([0, maxVal(filteredData)]); // always recalc

    // Always redraw Y axis REMOVE + APPEND
    svgNode.selectAll('g.axis').remove();
    svgNode.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".7em")
        .style("text-anchor", "end");

    svgNode.append("g")
        .attr("class", "x axis")
        // do we need this ?
        .attr("transform", `translate(0,${y(0)})`)
        .call(xAxis);

    const years = rowKeys(filteredData[0]);

    const nodeByYear = chartNode
        .selectAll('g.year-node')
        .data(years)
        .join('g')
        .attr('class', 'year-node')
        .attr('transform',
            (d, i) => `translate(${xOuter.bandwidth() * i + (xOuter.bandwidth() * bar.paddingRatio / 2)},0)`);

    const barsData = filteredData.slice(0, filteredData.length / 2),
        capsData = filteredData.slice(filteredData.length / 2);

    const barStyle = opacity => d =>
        `fill:${colors(d.megnevezes)};` +
        `stroke:${colors(d.megnevezes)};stroke-width:1px;` +
        `stroke-opacity:0.6;fill-opacity:${opacity};`;

    nodeByYear
        .selectAll('rect')
        .data(
            year => barsData.map((f, i) => ({
                megnevezes: f.megnevezes,
                val: isNumber(f[year]) ? f[year] : 0,
                killed: capsData[i][year],
                year: year
            })),
            d => d.megnevezes  // the key function !!!
        )
        .join(enter =>
                enter.append('rect')
                    .attr('class', 'bar')
                    .attr('x', d => xInner(d.megnevezes) + xOuter.bandwidth() * bar.paddingRatio)
                    .attr('width', xInner.bandwidth() * bar.marginRatio)
                    .attr('style', barStyle(0.6))
                    .attr('y', y(0))
                    .attr('height', 0)
                    .call(
                        enter => enter
                            .transition()
                            .duration(1000)
                            .attr('y', d => y(d.val))
                            .attr('height', d => y(0) - y(d.val))
                    ),
            update => update
                .call(
                    update => update
                        .transition()
                        .duration(1000)
                        .attr('x', d => xInner(d.megnevezes) + xOuter.bandwidth() * bar.paddingRatio)
                        .attr('width', xInner.bandwidth() * bar.marginRatio)
                        .attr('y', d => y(d.val))
                        .attr('height', d => y(0) - y(d.val))
                ),
            exit => exit
                .call(
                    exit => exit
                        .transition()
                        .duration(1000)
                        .attr('width', xInner.bandwidth() * bar.marginRatio)
                        .attr('y', y(0))
                        .attr('height', 0)
                        .remove()
                )
        )
        .on('mouseover', function (d, i) {
            d3.select(this)
                .attr('style', barStyle(0.4));

            let [x1, y1] = d3.mouse(this);
            // because we used transform on nodeByYear
            x1 += xOuter(d.year);

            tooltipNode
                .html(tooltipContent(d.megnevezes, d.val, d.killed))
                .style('left', `${x1}px`) // hard to not miss the px
                .style('top', `${y1}px`)
                .call(node => node.transition().duration(200)
                    .style('opacity', 0.9));
        })
        .on('mouseout', function (d) {
            d3.select(this)
                .transition()
                .duration(200)
                .attr('style', barStyle(0.6));

            tooltipNode.transition().duration(500)
                .style('opacity', 0);
        })
    ;

    nodeByYear
        .selectAll('line')
        .data(
            year => capsData.map(f => ({
                megnevezes: f.megnevezes,
                val: isNumber(f[year]) ? f[year] : 0
            })),
            d => d.megnevezes
        )
        .join(
            enter => enter.append('line')
                .attr('class', 'cap')
                .attr('x1', d => xInner(d.megnevezes) + xOuter.bandwidth() * bar.paddingRatio)
                .attr('x2', d => xInner(d.megnevezes) + xOuter.bandwidth() * bar.paddingRatio +
                    xInner.bandwidth() * bar.marginRatio)
                .attr('y1', d => y(0))
                .attr('y2', d => y(0))
                .attr('style',
                    d =>
                        `stroke:red;stroke-width:3px;` +
                        'stroke-opacity:0.6;fill-opacity:0.6;')
                .call(enter => enter
                    .transition()
                    .duration(1000)
                    .attr('x1', d => xInner(d.megnevezes) + xOuter.bandwidth() * bar.paddingRatio)
                    .attr('x2', d => xInner(d.megnevezes) + xOuter.bandwidth() * bar.paddingRatio +
                        xInner.bandwidth() * bar.marginRatio)
                    .attr('y1', d => y(d.val))
                    .attr('y2', d => y(d.val))
                )
            ,
            update => update.call(
                update => update.transition()
                    .duration(1000)
                    .attr('x1', d => xInner(d.megnevezes) + xOuter.bandwidth() * bar.paddingRatio)
                    .attr('x2', d => xInner(d.megnevezes) + xOuter.bandwidth() * bar.paddingRatio +
                        xInner.bandwidth() * bar.marginRatio)
                    .attr('y1', d => y(d.val))
                    .attr('y2', d => y(d.val))
            ),
            exit => exit.call(
                exit => exit.transition()
                    .duration(1000)
                    .attr('y1', d => y(0))
                    .attr('y2', d => y(0))
                    .remove()
            )
        );
};

// Let's kick-off the party
d3.csv("vadallomany.csv").then(data => {
    createLegend(data);
    draw(data);
    drawLegend(data);
});

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

    body {
        font: 10px sans-serif;
    }

    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }

    .x.axis path {
        display: none;
    }

    .y.axis path {
        display: none;
    }

    g.legend {
        cursor: pointer;
    }

    .breed circle {
        filter: drop-shadow( 1px 1px 1px rgba(0, 0, 0, .7));
    }

    div.tooltip {
        position: absolute;
        text-align: center;
        padding: 2px;
        font: 12px sans-serif;
        background: lightsteelblue;
        border: 0px;
        border-radius: 8px;
        pointer-events: none;
        font-weight: bolder;
    }

    svg {
        user-select: none;
    }

</style>
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="chart.js"></script>
</body>

thumbnail.png

vadallomany.csv