D3 V5 Bar chart

Question

Okay I am trying to make a bar chart. This is the Javascript I have.

var data = [
{
    "date": "1459468800000",                            // 1 April 2016 
    "values": [{
        "name": "US",
        "value": 72580613,
        "domainname": "com"
    }, {
        "name": "US",
        "value": 161645,
        "domainname": "nl"
    }]
}, {
    "date": "1467331200000",                            // 1 Juli 2016
    "values": [{
        "name": "US",
        "value": 73129243,
        "domainname": "com"
    }, {
        "name": "US",
        "value": 166152,
        "domainname": "nl"
    }]
}
]

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

var tooltip = d3.select("body").append("div").attr("class");

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

var colours = d3.scaleOrdinal()
    .range(["#6F257F", "#CA0D59"]);

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

    x.domain(data.map(function(d) { return d.values.domainname; }));
    y.domain([0, d3.max(data, function(d) { return d.values.value; })]);

    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(25).tickFormat(function(d) { return parseInt(d / 1000) + "K"; }).tickSizeInner([-width]))
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .attr("fill", "#5D6971")
        .text("Aantal domeinen");

    g.selectAll(".bar")
        .data(data)
      .enter().append("rect")
        .attr("x", function(d) { return x(d.values.domainname); })
        .attr("y", function(d) { return y(d.values.value); })
        .attr("width", x.bandwidth())
        .attr("height", function(d) { return height - y(d.values.value); })
        .attr("fill", function(d) { return colours(d.values.domainname); })

As you can see I have the data in an array. In the data I have 2 different dates.

For now I only want to show the first date in the bar chart but both domains (com & nl as bars (In the future I will ad more domains to the dates). (If you are interested : The idea is to make a dropdown on the page so the user can select another date and the bars will update).

What I have now is that I can see the axises on my screen so that is working good. But I got this error :

So D3 is expecting a number but it doesn't get one on the Y axis and the heigth as I understand the error...

How can I fix that it is displaying the first date with the domains correct?

The problem here is that `values` is an array of objects, not a single value. Therefore, if you want to create a bar chart with just the first date, filter the data accordingly: https://jsfiddle.net/vtuz2rk5/ — Gerardo Furtado, Jan 14 '19 at 23:48
Thanks that worked for me but now I am stucked at the following : The first date is showing the correct bars. But now I want to show the other date if a user select that date in the dropdown (I have 6 other dates same data structure) I guess I need an Enter, Update & Exit function or is there another solution? — Rooney, Jan 15 '19 at 13:36
That should be a new question. However, if you just ask it like this, it will be *"too broad"*, so please share your attempt as well. — Gerardo Furtado, Jan 15 '19 at 22:26
Hi can you take a look at my code (I can update from april 2016 --> Juli 2016) but after that the code breaks, what am I doing wrong? https://stackblitz.com/edit/q53412789-rp3k9p?file=index.js — Rooney, Jan 18 '19 at 11:49

score 0 · Answer 1 · answered Jan 14 '19 at 23:26

The access to the values was incorrect instead of d.values.domainname or d.values.value you have to use d.values[i].domainname and d.values[i].value.

Here you can see your example running.

var data = [
{
    "date": "1459468800000",                            // 1 April 2016 
    "values": [{
        "name": "US",
        "value": 72580613,
        "domainname": "com"
    }, {
        "name": "US",
        "value": 161645,
        "domainname": "nl"
    }]
}, {
    "date": "1467331200000",                            // 1 Juli 2016
    "values": [{
        "name": "US",
        "value": 73129243,
        "domainname": "com"
    }, {
        "name": "US",
        "value": 166152,
        "domainname": "nl"
    }]
}
]

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

var tooltip = d3.select("body").append("div").attr("class");

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

var colours = d3.scaleOrdinal()
    .range(["#6F257F", "#CA0D59"]);

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

    x.domain(data.map(function(d, i) { return d.values[i].domainname; }));
    y.domain([0, d3.max(data, function(d, i) { return d.values[i].value; })]);

    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(25).tickFormat(function(d) { return parseInt(d / 1000) + "K"; }).tickSizeInner([-width]))
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .attr("fill", "#5D6971")
        .text("Aantal domeinen");

    g.selectAll(".bar")
        .data(data)
      .enter().append("rect")
        .attr("x", function(d, i) { return x(d.values[i].domainname); })
        .attr("y", function(d, i) { return y(d.values[i].value); })
        .attr("width", x.bandwidth())
        .attr("height", function(d, i) {return height - y(d.values[i].value)})
        .attr("fill", function(d, i) { return colours(d.values[i].domainname); })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

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

As a note the column nl looks especially small because the values are too different.

There is a little problem here, I'm afraid: by using the second argument (`i`) you're mixing the arrays, you're getting the first object in the first inner array and the second object in the second inner array. So, the code only works because of a fortunate coincidence! You can see this clearly if you swap the objects in the array. It should not make any difference, but it does: https://jsfiddle.net/vtuz2rk5/1/ — Gerardo Furtado, Jan 14 '19 at 23:51
Sorry, I did not notice, in that case I will try to provide a fixed solution tomorrow, please feel free to provide a valid solution. Thanks @GerardoFurtado — Daniel Doblado, Jan 15 '19 at 00:12

D3 V5 Bar chart

1 Answers1