I have an external JSON file structured like so:
{
data: [
{
0: 'cat',
1: 232,
2: 45
},
{
0: 'dog',
1: 21,
2: 9
},
{
0: 'lion',
1: 32,
2: 5
},
{
0: 'elephant',
1: 9,
2: 4
},
]
}
Using d3.js I want to access the data with key 2 for the height in a bar chart, so I have set this up:
d3.select('#chart').append('svg')
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('width', barWidth)
.attr('height', function(d) {
return d.data['2'];
});
I can see the SVG canvas but I can't get the rectangles for the bar chart height, any ideas anyone?
Thanks
I changed a few things to make the code function how a default bar chart would. Your main problem was using d.data instead of d. After that, you have to set the x and y coordinates and an alternating color (or a padding with x) so that the rectangles don't overlap each other.
var width = 30;
var padding = 5;
var chartheight = 100;
d3.select('#chart').append('svg')
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('width', width)
.attr('height', function(d) {
return d[2];
})
.attr('x', function(d, i) {
return i*(width + padding);
})
.attr('y', function(d, i) {
return chartheight - d[2];
});
d3.selectAll('rect')
.style('fill', function(d, i) {
return i % 2 == 0 ? "#0f0" : "#00f";
});
The d variable sent to your function is already your data, and its called for each item in your array:
.attr('height', function(d) {
return d['2'];
});
Related
This question already has answers here:
D3 Appending Text to a SVG Rectangle
(2 answers)
Display text on rect using D3.js
(2 answers)
SVG: text inside rect
(5 answers)
Closed 2 years ago.
I am currently trying to get D3 running in Jupyter Notebook, kind of following this guide: https://www.stefaanlippens.net/jupyter-custom-d3-visualization.html
Using the following code i wanted to add numbers to the bars in the bar chart:
%%javascript
(function(element) {
require(['d3'], function(d3) {
var data = [1, 2, 4, 8, 16, 8, 4, 2, 1]
var svg = d3.select(element.get(0)).append('svg')
.attr('width', 400)
.attr('height', 200);
svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('width', function(d) {return d*10})
.attr('height', 24)
.attr('x', 0)
.attr('y', function(d,i) {return i*30})
.style('fill', 'darkgreen')
svg.selectAll('rect')
.append('text')
.text('mynumberhere')
.attr('color', 'FF0000')
})
})(element);
Currently only the bar chart is displayed, but no numbers are displayed. Using the HTML inspector though, i can see that inside the element is a element. Although it is not diplayed. Any ideas why that could be?
It's not possible to append a text to a rect element, they're not meant to have children! You can choose to use g-groups instead, and put both the rect and the text inside:
(function(element) {
var data = [1, 2, 4, 8, 16, 8, 4, 2, 1]
var svg = d3.select(element).append('svg')
.attr('width', 400)
.attr('height', 200);
var g = svg.selectAll('g')
.data(data)
.enter()
.append('g');
g.append('rect')
.attr('width', function(d) {
return d * 10
})
.attr('height', 24)
.attr('x', 0)
.attr('y', function(d, i) {
return i * 30
})
.style('fill', 'darkgreen')
g
.append('text')
.text(function(d) { return d; })
.attr('color', 'FF0000')
.attr('dy', 16)
.attr('dx', 3)
.attr('x', function(d) {
return d * 10
})
.attr('y', function(d, i) {
return i * 30
})
})(document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
I have a codepen here - https://codepen.io/anon/pen/xpaYYw?editors=0010
Its a simple test graph but the date will be formatted like this.
I have dates on the x axis and amounts on the y
How can I use the x scale to set the width and x position of the bars.
layers.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('height', function(d, i) {
return height - y(d.one);
})
.attr('y', function(d, i) {
return y(d.one);
})
.attr('width', function(d, i) {
return 50;
})
.attr('x', function(d, i) {
return 80*i;
})
.style('fill', (d, i) => {
return colors[i];
});
The problem with your question has nothing to do with programming, or JavaScript, or D3... the problem is a basic dataviz concept (that's why I added the data-visualization tag in your question):
What you're trying to do is not correct! You should not use bars with a time scale. Time scales are for time series (in which we use dots, or dots connected by lines).
If you use bars with time in the x axis you'll face problems:
Positioning the bar: the left margin of the bar will be always at the date you set. The whole bar will lie after that date;
Setting the width of the bar: in a real bar chart, which uses categorical variables for the x axis, the width has no meaning. But in a time scale the width represents time.
However, just for the sake of explanation, let's create this bar chart with a time scale (despite the fact that this is a wrong choice)... Here is how to do it:
First, set the "width" of the bars in time. Let's say, each bar will have 10 days of width:
.attr("width", function(d){
return x(d3.timeDay.offset(d.date, 10)) - x(d.date)
})
Then, set the x position of the bar to the current date less half its width (that is, less 5 days in our example):
.attr('x', function(d, i) {
return x(d3.timeDay.offset(d.date, -5));
})
Finally, don't forget to create a "padding" in the time scale:
var x = d3.scaleTime()
.domain([d3.min(data, function(d) {
return d3.timeDay.offset(d.date, -10);
}), d3.max(data, function(d) {
return d3.timeDay.offset(d.date, 10);
})])
.range([0, width]);
Here is your code with those changes:
var keys = [];
var legendKeys = [];
var maxVal = [];
var w = 800;
var h = 450;
var margin = {
top: 30,
bottom: 40,
left: 50,
right: 20,
};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
var colors = ['#FF9A00', '#FFEBB6', '#FFC400', '#B4EDA0', '#FF4436'];
var data = [{
"one": 4306,
"two": 2465,
"three": 2299,
"four": 988,
"five": 554,
"six": 1841,
"date": "2015-05-31T00:00:00"
}, {
"one": 4378,
"two": 2457,
"three": 2348,
"four": 1021,
"five": 498,
"six": 1921,
"date": "2015-06-30T00:00:00"
}, {
"one": 3404,
"two": 2348,
"three": 1655,
"four": 809,
"five": 473,
"six": 1056,
"date": "2015-07-31T00:00:00"
},
];
data.forEach(function(d) {
d.date = new Date(d.date)
})
for (var i = 0; i < data.length; i++) {
for (var key in data[i]) {
if (!data.hasOwnProperty(key) && key !== "date")
maxVal.push(data[i][key]);
}
}
var x = d3.scaleTime()
.domain([d3.min(data, function(d) {
return d3.timeDay.offset(d.date, -10);
}), d3.max(data, function(d) {
return d3.timeDay.offset(d.date, 10);
})])
.range([0, width]);
var y = d3.scaleLinear()
.domain([0, d3.max(maxVal, function(d) {
return d;
})])
.range([height, 0]);
var svg = d3.select('body').append('svg')
.attr('class', 'chart')
.attr('width', w)
.attr('height', h);
var chart = svg.append('g')
.classed('graph', true)
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var layersArea = chart.append('g')
.attr('class', 'layers');
var layers = layersArea.append('g')
.attr('class', 'layer');
layers.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('height', function(d, i) {
return height - y(d.one);
})
.attr('y', function(d, i) {
return y(d.one);
})
// .attr('width', function(d, i) {
// return 50;
// })
.attr("width", function(d) {
return x(d3.timeDay.offset(d.date, 10)) - x(d.date)
})
.attr('x', function(d, i) {
return x(d3.timeDay.offset(d.date, -5));
})
.style('fill', (d, i) => {
return colors[i];
});
chart.append('g')
.classed('x axis', true)
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x)
.tickFormat(d3.timeFormat("%Y-%m-%d")).tickValues(data.map(function(d) {
return new Date(d.date)
})));
chart.append('g')
.classed('y axis', true)
.call(d3.axisLeft(y)
.ticks(10));
<script src="https://d3js.org/d3.v4.min.js"></script>
So I'm working through some d3 tutorials and learning a bit about why things work the way they do, and I've run into a peculiar instance of selection not behaving as expected. So I'm wondering if anyone can explain this to me.
var sales = [
{ product: 'Hoodie', count: 7 },
{ product: 'Jacket', count: 6 },
{ product: 'Snuggie', count: 9 },
];
var rects = svg.selectAll('rect')
.data(sales).enter();
var maxCount = d3.max(sales, function(d, i) {
return d.count;
});
var x = d3.scaleLinear()
.range([0, 300])
.domain([0, maxCount]);
var y = d3.scaleBand()
.rangeRound([0, 75])
.domain(sales.map(function(d, i) {
return d.product;
}));
rects.append('rect')
.attr('x', x(0))
.attr('y', function(d, i) {
return y(d.product);
})
.attr('height', y.bandwidth())
.attr('width', function(d, i) {
return x(d.count);
});
This all works good and fine, generates 3 horizontal bars that correspond to the data in sales, but here's where I'm seeing the ambiguity:
sales.pop();
rects.data(sales).exit().remove();
The last line is supposed to remove the bar that was popped, from the visual but it doesn't work. I think that there must be something going on with the d3 selection that I'm missing, because this does work:
d3.selectAll('rect').data(sales).exit().remove();
Also when I break out the first one that doesn't work, it does appear to be selecting the correct element on exit, but just doesn't seem to be removing it. Anyway if anyone can explain what's going on here that would be very helpful, thanks!
Note: using d3 v4
This is your rects selection:
var rects = svg.selectAll('rect')
.data(sales).enter();
So, when you do this:
rects.data(sales).exit().remove();
You are effectively doing this:
svg.selectAll('rect')
.data(sales)
.enter()
.data(sales)
.exit()
.remove();
Thus, you are binding data, calling enter, binding data again and calling exit on top of all that! Wow!
Solution: just create a regular, old-fashioned "update" selection:
var rects = svg.selectAll('rect')
.data(sales);
Here is a basic demo with your code, calling exit after 2 seconds:
var svg = d3.select("svg")
var sales = [{
product: 'Hoodie',
count: 7
}, {
product: 'Jacket',
count: 6
}, {
product: 'Snuggie',
count: 9
}, ];
draw();
function draw() {
var rects = svg.selectAll('rect')
.data(sales);
var maxCount = d3.max(sales, function(d, i) {
return d.count;
});
var x = d3.scaleLinear()
.range([0, 300])
.domain([0, maxCount]);
var y = d3.scaleBand()
.rangeRound([0, 75])
.domain(sales.map(function(d, i) {
return d.product;
}))
.padding(.2);
var rectsEnter = rects.enter().append('rect')
.attr('x', x(0))
.attr('y', function(d, i) {
return y(d.product);
})
.attr('height', y.bandwidth())
.attr('width', function(d, i) {
return x(d.count);
});
rects.exit().remove();
}
d3.timeout(function() {
sales.pop();
draw()
}, 2000)
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
rects is already a d3 selection, so you only need rects.exit().remove()
Hi i'm new to D3 and I'm trying to convert a normal bar chart to a stacked bar chart.
This is my code
var data = [4, 8, 15, 16, 23, 42, 200];
var height = 200;
var width = 200;
var barWidth = 35;
var barOffset = 5;
var myChart = d3.select(".chart").append('svg')
.attr('width', width)
.attr('height', height)
.style("background", "grey")
.selectAll('rect')
.data(data)
.enter().append('rect').
style("fill", "blue")
.attr("width", barWidth)
.attr("height", function(d){ return d;})
.attr('x', function(d, i)
{ return i *(barWidth + barOffset);})
.attr('y', function(d){
return height - d;
});
Any help or hint in to the right direction would be much appreciated.
just for the comment on above answer..
here is the code -
var data = [
[4, 8, 15, 16, 23, 42, 200],
[50, 60, 20, 100, 30, 50, 40]
];
//console.log(data)
//console.log("REMAP---------------------------");
var remapped =data[0].map(function(dat,i){
return data.map(function(d,ii){
return {x: ii, y: d[i] };
})
});
var w = 200,
h = 200
// create canvas
var svg = d3.select(".chart").append("svg:svg")
.attr("width", w)
.attr("height", h )
.append("svg:g")
.attr("transform", "translate(0,"+h+")");
var x = d3.scale.ordinal().rangeRoundBands([0, w], 0.5)
var y = d3.scale.linear().range([0, h])
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]).domain(data[0].map(function(d,i){return i;}));
//console.log("LAYOUT---------------------------");
var stacked = d3.layout.stack()(remapped)
//console.log(stacked)
x.domain(stacked[0].map(function(d) { return d.x; }));
y.domain([0, d3.max(stacked[stacked.length - 1], function(d) { return d.y0 + d.y; })]);
// show the domains of the scales
console.log("x.domain(): " + x.domain())
console.log("y.domain(): " + y.domain())
// Add a group for each column.
var valgroup = svg.selectAll("g.valgroup")
.data(stacked)
.enter().append("svg:g")
.attr("class", "valgroup")
.style("fill", function(d, i) { return color(i); })
.style("stroke", function(d, i) { return d3.rgb(color(i)).darker(); });
// Add a rect for each date.
var rect = valgroup.selectAll("rect")
.data(function(d){return d;})
.enter().append("svg:rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return -y(d.y0) - y(d.y); })
.attr("height", function(d) { return y(d.y); })
.attr("width", x.rangeBand());
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="chart"></div>
Here data plays an important role.
You need to modify the data, compatible with the chart type.
Here is the solution for your problem.
hope, this will surely help you. thanks :)
var data = [4, 8, 15, 16, 23, 42, 200];
data = data.map(function(d) { return [{x: 0, y: d}] });
var stack = d3.layout.stack();
var stackData = stack(data);
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]).domain(data.map(function(d,i){return i;}));
var height = 200;
var width = 200;
var barWidth = 35;
var barOffset = 5;
var lastData = stackData[stackData.length-1][0]; //to get the max value
var y = d3.scale.linear()
.rangeRound([height, 0]).domain([0, lastData.y+lastData.y0]);
var myChart = d3.select(".chart").append('svg')
.attr('width', width)
.attr('height', height)
.style("fill", "grey")
.selectAll('rect')
.data(stack(data))
.enter().append('rect').
style("fill", function(d,i) {
return color(i);
})
.attr("width", barWidth)
.attr('x', 0)
.attr("y", function(d) {
return y(d[0].y0+d[0].y);
})
.attr("height", function(d) {
return height - y(d[0].y);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="chart"></div>
yes!! ideally stacked bar chart must require a 2D array
following are few scenarios that will makes your understanding clear
scenario 1 -
we need to visualise sales of MAC(only one product) for 5 years
then the data will be : sales: [$2000, $5555, $20177, $9999, $80805]
so here we need simple bar chart, where each bar will show the sales in respective year
senario 2 -
we need to visualise sales of 3 products(MAC, iPad, iPhone) for 5 years
then the data will be :
sales of MAC: [$2000, $5555, $20177, $9999, $80805]
sales of iPad: [$2000, $5555, $20177, $9999, $80805]
sales of iPhone: [$2000, $5555, $20177, $9999, $80805]
here we need stacked bar chat, where each stack will show the sales of 3 products in respective year
if we have multiple array then.. in addition to above code we need, x scale
you can follow the exapmle
hope this will help :) thank you :)
New here. I'm working with D3 and basically I have 2 datasets in the form of arrays. What I want to achieve is upon button click, the new dataset overwrites the old one (I have achieved this much) and then the new dataset is bound and redraws the stacked bar charts. This doesn't happen for me. When the button is pressed it just deletes a couple of the bars.
Would appreciate any tips. I think it's awkward because I'm working with stacked bar charts and not normal ones.
Thanks! :)
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
// .ticks(5);
//Width and height
var w = 600;
var h = 300;
var barPadding = 50;
//Original data
var dataset = [
[
{ y: 20 }, //male
{ y: 4 },
{ y: 16},
{ y: 53},
{ y: 15 }
],
[
{ y: 12 }, //female
{ y: 4 },
{ y: 3 },
{ y: 36 },
{ y: 2 }
],
];
console.log(dataset);
// var myDataSet = dataset;
// var totalDeaths = d.y0 + d.y1;
//Set up stack method
var stack = d3.layout.stack();
//Data, stacked
stack(dataset);
//Set up scales
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset[0].length))
.rangeRoundBands([0, w], 0.05);
var yScale = d3.scale.linear()
.domain([0,
d3.max(dataset, function(d) {
return d3.max(d, function(d) {
return d.y0 + d.y;
});
})
])
.range([0, h]);
//Easy colors accessible via a 10-step ordinal scale
// var colors = d3.scale.category20c();
var color = d3.scale.ordinal()
.domain(["Male", "Female"])
.range(["#00B2EE", "#FF69B4"]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
// Add a group for each row of data
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.style("fill", function(d, i) {
return color(i);
});
// Add a rect for each data value
var rects = groups.selectAll("rect")
.data(function(d) { return d; })
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.on("mouseover", function(d) {
//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() / 2;
var yPosition = parseFloat(d3.select(this).attr("y")) + 14;
//Create the tooltip label
svg.append("text")
.attr("id", "tooltip")
.attr("x", xPosition)
.attr("y", yPosition)
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("font-weight", "bold")
.attr("fill", "black")
.html("Female deaths: " + d.y + "\n" + " \nMale deaths: " + d.y0);
})
.on("mouseout", function() {
//Remove the tooltip
d3.select("#tooltip").remove();
})
.attr("width", xScale.rangeBand())
.attr("y", function(d) {
return h - yScale(d.y0) - yScale(d.y) ;
})
.attr("height", function(d) {
return yScale(d.y);
});
d3.select("#target")
.on("click", function() { //event listener on button click
// alert("heeeey");
//New values for dataset
dataset = [
[
{ y: 100 }, //male
{ y: 20 },
{ y: 16},
{ y: 53},
{ y: 15 }
],
[
{ y: 5 }, //female
{ y: 4 },
{ y: 3 },
{ y: 36 },
{ y: 2 }
],
];
console.log(dataset);
//Data, stacked
// stack(dataset);
//Update all rects
var gas = svg.selectAll("rect")
.data(dataset)
// .transition()
// .duration(1000)
// .ease("cubic-in-out")
.attr("width", xScale.rangeBand())
.attr("y", function(d) {
return h - yScale(d.y0) - yScale(d.y) ;
})
.attr("height", function(d) {
return yScale(d.y);
})
.attr("x", function(d, i) {
return xScale(i);
});
});