How do i add a fixed text beside bar chart using D3 - javascript

I am trying to add a text beside a Bar chart . it will be look like
two bar chart both of them will have a text in their right side. I tried in many ways but couldn't find or may i didn't understand because i am beginners in D3 . This is my first question in stackoverflow .
I wrote this
var w = 500;
var h = 100;
var barPadding = 5;
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
//Create SVG element Men 2010
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (w / dataset.length);
})
.attr("y", function(d) {
return h - (d * 4);}
)
.attr("width", w / dataset.length - barPadding)
.attr("height", function(d) {
return d*4; //Just the data value
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
///for the fixed text
var svgContainertext = d3.select("body").append("svg")
.attr("width", 100)
.attr("height", 20);
svgContainertext.append("g")
.selectAll("text")
.append("text")
.text("2010")
.attr("x",20)
.attr("y",10)
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "black");
But the code is not showing the result. I am new to D3 .
Thanks in advance .

Your text is not showing because you ad the text after .selectAll("text"), which results in an empty selection, hence nowhere to add your text.
Furthermore, the text you are adding is in a new svg, and is not linked anyhow to your chart. I created a plunk to show how to put the text in the same svg: http://plnkr.co/edit/EHVB65sn7Oc67s7woKrj?p=preview
Updated code:
var w = 500;
var h = 100;
var barPadding = 5;
var textWidth = 30;
var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25
];
//Create SVG element Men 2010
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * ((w - textWidth) / dataset.length);
})
.attr("y", function(d) {
return h - (d * 4);
})
.attr("width", w / dataset.length - barPadding)
.attr("height", function(d) {
return d * 4; //Just the data value
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
///for the fixed text
svg.append("g")
.append("text")
.text("2010")
.attr("x", w - textWidth)
.attr("y", h / 2)
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "black");
What I did is use the same svg to append the text (in a group). I also reduced the space available for the bar chart using a textWidth variable, allowing to view the text and position it properly.

Removing .selectAll("text") will show the text 2010. I made a JSFiddle to show this.
If you want to read about selections, I suggest you have a read of this article
basically it is not working because the .selectAll('text') returns an empty selection and after that you append a text node to nothing.
It works for the rects drawn earlier because the .data() method is used on that selection.
var svgContainertext = d3.select("body").append("svg")
.attr("width", 100)
.attr("height", 20);
svgContainertext.append("g")
.append("text")
.text("2010")
.attr("x",20)
.attr("y",10)
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "black");

Related

Change the colours of the bars at mouseout in svg-tooltip.html

My question is based on a little modification in the code shown below. I code in Python, and HTML/CSS are new to me. I have the following code.
In the code below , modify the code such that on mouse out the values of the bars remain there, but they are white in color.
How can I accomplish the same. Many thanks. I am learning this.
//Width and height
var w = 600;
var h = 250;
var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25
];
var xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0, w])
.paddingInner(0.05);
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, h]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create bars
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => xScale(i))
.attr("y", d => h - yScale(d))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d))
.attr("fill", d => "rgb(100, 0, " + (d * 10) + ")")
.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.bandwidth() / 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")
.text(d);
})
.on("mouseout", () => d3.select("#tooltip").remove());
//Remove the tooltip
rect:hover {
fill: orange;
}
<script src="//d3js.org/d3.v5.min.js" charset="utf-8"></script>

How to make a clickable transition bar graph in d3 v4?

How to make a clickable transition bar graph in d3 v4?
Current code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: A bar chart that transitions to new data!</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<p>Click on this text to update the chart with new data values (once).</p>
<script type="text/javascript">
//Width and height
var w = 600;
var h = 250;
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
var xScale = d3.scaleBand()
.rangeRound([0, w])
.padding(0.05);
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, h]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create bars
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return h - yScale(d);
})
.attr("width", xScale.bandwidth())
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
//Create labels
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return xScale(i) + xScale.bandwidth() / 2;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
//On click, update with new data
d3.select("p")
.on("click", function() {
//New values for dataset
dataset = [ 11, 12, 15, 20, 18, 17, 16, 18, 23, 25,
5, 10, 13, 19, 21, 25, 22, 18, 15, 13 ];
//Update all rects
svg.selectAll("rect")
.data(dataset)
.transition() // <-- This makes it a smooth transition!
.attr("y", function(d) {
return h - yScale(d);
})
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
//Update all labels
svg.selectAll("text")
.data(dataset)
.text(function(d) {
return d;
})
.attr("x", function(d, i) {
return xScale(i) + xScale.band() / 2;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
});
});
</script>
</body>
</html>
Code above from:
https://github.com/alignedleft/d3-book/blob/master/chapter_09/05_transition.html
http://examples.oreilly.com/0636920026938/chapter_09/05_transition.html
I am getting errors after switching the code to v4. I fixed the errors I knew about but now I am getting these one errors in the JavaScript console:
Error: attribute x: Expected length, "NaN".
You are not setting the domain of the x scale:
var xScale = d3.scaleBand()
.domain(d3.range(dataset.lengh))
.rangeRound([0, w])
.padding(0.1);
Also, pay attention to xScale.band(), which doesn't exist: it should be xScale.bandwidth() instead.
Here is a working code, with the domain:
var w = 600;
var h = 250;
var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25
];
var xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0, w])
.padding(0.1);
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, h]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create bars
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return h - yScale(d);
})
.attr("width", xScale.bandwidth())
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
//Create labels
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return xScale(i) + xScale.bandwidth() / 2;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
//On click, update with new data
d3.select("p")
.on("click", function() {
//New values for dataset
dataset = [11, 12, 15, 20, 18, 17, 16, 18, 23, 25,
5, 10, 13, 19, 21, 25, 22, 18, 15, 13
];
//Update all rects
svg.selectAll("rect")
.data(dataset)
.transition() // <-- This makes it a smooth transition!
.attr("y", function(d) {
return h - yScale(d);
})
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
//Update all labels
svg.selectAll("text")
.data(dataset)
.text(function(d) {
return d;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
});
});
<script src="https://d3js.org/d3.v4.min.js"></script>
<p>Click on this text to update the chart with new data values (once).</p>

Add chart to tooltip in d3

I am attempting to add a simply bar chart to my tooltip; it consists of 2 variables -- men and women. I was hoping someone might be able to help me put this inside of the tooltip instead of appending it to where it is currently being appended. I've given this a particular area to be appended just so that I know that it is, in fact, showing up(which it is), but I don't know how to get it into the tool tip. Any help is much appreciated. Oh, and this needs to be done in d3, which is partial to why I am asking this question -- I saw a similar question that wasn't implemented in pure d3, and I couldn't completely follow what was going on to emulate it in this example.
.on("mouseover", function(d)
{
tip.show(d);
var state = d.properties.name;
var men = d.properties.men;
var women = d.properties.women;
var dataset = [men, women];
var barHeight = 20;
var x = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, width/2]);
var chart = d3.select(".chart")
.attr("width", width)
.attr("height", barHeight * dataset.length);
var bar = chart.selectAll("g")
.data(dataset)
.enter().append("g")
.attr("transform", function(d, i)
{
return "translate(0," + i * barHeight + ")";
});
bar.append("rect")
.attr("width", x)
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", function(d)
{
return x(d)/2+5;
})
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d)
{
return "$" + d;
});
})
Since you didn't shared the whole code to create the chart, this answer will deal with your question's title only:
How to create a chart inside a tooltip?
I'm not a d3.tip() user, since I create my own tooltips. But what you want is not complicated at all: As the tooltips are <div> elements, you can definitely add a SVG inside them.
However, you have to know where to create the SVG. So, in the following demo, I'm creating this d3.tip tooltip:
var tool_tip = d3.tip()
.attr("class", "d3-tip")
.offset([20, 120])
.html("<p>This is a SVG inside a tooltip:</p>
<div id='tipDiv'></div>");
//div ID here --^
The important part here is this: there is a inner <div> inside the d3.tip div, with a given ID (in that case, tipDiv). I'm gonna use that ID to create my SVG inside the tooltip:
selection.on('mouseover', function(d) {
tool_tip.show();
var tipSVG = d3.select("#tipDiv")
//select the div here--^
.append("svg")
//etc...
})
Here is the demo:
var svg = d3.select("body")
.append("svg")
.attr("width", 300)
.attr("height", 300);
var tool_tip = d3.tip()
.attr("class", "d3-tip")
.offset([20, 120])
.html("<p>This is a SVG inside a tooltip:</p><div id='tipDiv'></div>");
svg.call(tool_tip);
var data = [14, 27, 19, 6, 17];
var circles = svg.selectAll("foo")
.data(data)
.enter()
.append("circle");
circles.attr("cx", 50)
.attr("cy", function(d, i) {
return 20 + 50 * i
})
.attr("r", function(d) {
return d
})
.attr("fill", "teal")
.on('mouseover', function(d) {
tool_tip.show();
var tipSVG = d3.select("#tipDiv")
.append("svg")
.attr("width", 200)
.attr("height", 50);
tipSVG.append("rect")
.attr("fill", "steelblue")
.attr("y", 10)
.attr("width", 0)
.attr("height", 30)
.transition()
.duration(1000)
.attr("width", d * 6);
tipSVG.append("text")
.text(d)
.attr("x", 10)
.attr("y", 30)
.transition()
.duration(1000)
.attr("x", 6 + d * 6)
})
.on('mouseout', tool_tip.hide);
.d3-tip {
line-height: 1;
padding: 6px;
background: wheat;
border-radius: 4px solid black;
font-size: 12px;
}
p {
font-family: Helvetica;
}
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<p>Hover over the circles:</p>

Created A Bar Chart But Height Is Not Reciprocating Changes

Hello Created A Bar Char Using D3 Using Below Code
var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25];
var w = 500;
var h = 100;
var barpadding = 1;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var rect = svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function (d, i) {
return i * (w / dataset.length)
})
.attr("y", function (d) {
return (h - d);
})
.attr("height", function (d) {
return (d *2)
})
.attr("width", w / dataset.length - barpadding)
.attr("fill", function (d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
<div class="bar"></div>
As You Can See At Starting My Height Attribute Is Like
.attr("height", function (d) {
return (d *2)
})
And Corresponding Image Is
Now I Have Changed It To 5 Times Like
.attr("height", function (d) {
return (d *5)
})
But Can't See Any Changes In My Bar's Height Any Help ??
fiddle link
You need to multiply the 'd' variable in the 'y' attribute change as well as the height. So the 'y' function ends up as:
.attr("y", function (d) {
return (h - (d * 5));
})
If you took out the subtracting from 'h' in the 'y' attribute and just left the 'y' attribute with no change, you see that your graph's height does change. The y attribute function is regulating the position of each rectangle so that the extended portion from multiplying it by 2 or 5 is hidden below the graph.

D3 - loading xml data from file, using scales for barchart

I'm following this great tutorial on d3 here
http://chimera.labs.oreilly.com/books/1230000000345/ch09.html#_modernizing_the_bar_chart
which introduces a bar chart in this chapter using scales. Now I wanted to load my data from an xml file but of course my code doesn't work. I'm guessing that in creating xScale and yScale variables I don't get the length of the dataset
Here is the xml file
<data>
<value>5</value>
<value>10</value>
<value>53</value>
<value>19</value>
<value>61</value>
<value>25</value>
<value>22</value>
<value>18</value>
<value>15</value>
<value>13</value>
<value>11</value>
<value>12</value>
<value>15</value>
<value>20</value>
<value>18</value>
<value>17</value>
<value>16</value>
<value>18</value>
<value>23</value>
<value>25</value>
</data>
And the code itself
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vjezba - 9.poglavlje - barchart</title>
<script type="text/javascript" src="d3/d3.v3.js"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<script type="text/javascript">
d3.xml("values.xml","application/xml", function(dataset) {
var w = 600;
var h = 250;
//var dataset = [ 5, 10, 53, 19, 61, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
//radi jednakog razmaka stupova
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, w], 0.05);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, h]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create bars
svg.selectAll("rect")
.data(dataset.documentElement.getElementsByTagName("value"))
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return h - yScale(d);
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
});
/*
//Create labels
svg.selectAll("text")
.data(xml.documentElement.getElementsByTagName("value"))
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return xScale(i) + xScale.rangeBand() / 2;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
*/
</script>
</body>
Simple mistake. You need to use the "d.value" instead of "d". Your sample data is just an array of numbers, but your JSON data is an array of objects with a "value" attribute.
Try this to see your example:
http://jsfiddle.net/5edkw/1/
Since I need code to post jsfiddle links...here's a snippet of what you already know:
.attr("height", function(d) {
return yScale(d.value);
})
The "/0/" version is the original you posted to pastebin.

Categories