JSFiddle - React, Tailwind, and code Playground

by Henry

HTML

<svg width="400" height="200">
    <g></g>
</svg>

CSS

text {
    fill: black
}

JavaScript

var fruit = [{
    "name": "Apple",
    "year": 2013,
    "win": "1"
}, {
    "name": "Banana",
    "year": 2013,
    "win": "1"
}, {
    "name": "Orange",
    "year": 2013,
    "win": "1"
}, {
    "name": "Grapefruit",
    "year": 2013,
    "win": "0"
}, {
    "name": "Grape",
    "year": 2014,
    "win": "0"
}, {
    "name": "Pineapple",
    "year": 2014,
    "win": "1"
}, {
    "name": "Melon",
    "year": 2014,
    "win": "1"
}, {
    "name": "Grape",
    "year": 2014,
    "win": "1"
}, {
    "name": "Pineapple",
    "year": 2014,
    "win": "1"
}, {
    "name": "Pineapple",
    "year": 2015,
    "win": "1"
}, ];

data = d3.nest()
    .key(function (d) {
    return d.year
}) // `GROUP BY date`
.rollup(function (values) {
    // `values` is all the rows of a particular date
    var counts = {}, keys = ['name', 'win']
    keys.forEach(function (key) {
        counts[key] = d3.sum(values, function (d) {
            return d[key]
        })
    })
    return counts
})
    .entries(fruit)
console.log(data);
var svg = d3.select('svg g')
    .selectAll('rect')
    .data(data)
    .enter();

svg.append('rect')
    .attr('x', function (d, i) {
    return i * 60
})
    .attr('y', function (d) {
    console.log(d.values.win);
    return 100 - d.values.win * 10
})
    .attr('width', 50)
    .attr('height', function (d) {
    console.log(d.values.win);
    return d.values.win * 10
})
    .style('fill', 'steelblue');