I have list of bars that are being displayed on the canvas and when I hover on the bar their respective values are getting displayed but that value is coming out of canvas at down. So please help and suggest thank you in advance!!
Here is my html file where I have my tooltip implementation
var margin = {
top: 20,
right: 0,
bottom: 80,
left: 40
};
var width = 700 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var xScale = d3.scale.ordinal().rangeRoundBands([0, width], .1);
var yScale = d3.scale.linear().range([height, 0]);
var hAxis = d3.svg.axis().scale(xScale).orient('bottom')
.ticks(4).tickSubdivide(2).tickSize(5, 5, 0)
.tickFormat(d3.time.format("%Y-%m-%d"))
var vAxis = d3.svg.axis().scale(yScale).orient('left');
var tooltip = d3.select('body').append('div')
.style('position', 'absolute')
.style('background', '#f4f4f4')
.style('padding', '5 15px')
.style('border', '1px #333 solid')
.style('border-radius', '5px')
.style('opacity', 'o');
var line = d3.svg.line()
.x(function(d) {
return xScale(d.date);
})
.y(function(d) {
return yScale(d.value);
})
.interpolate("linear")
.tension(0.9);
function render(filterByDates) {
d3.select('svg').remove();
if (filterByDates) {
selectDate = true;
//tempData = fliterdata;
console.log("before date fliter data", fliterdata);
var date1 = new Date(document.getElementById('field1').value);
var date2 = new Date(document.getElementById('field2').value);
tempData = fliterdata.filter(function(d) {
console.log(date1, date2);
// alert(date1);
return d.date >= date1 && d.date <= date2;
});
console.log("After date tempData", tempData);
}
xScale.domain(tempData.map(function(d) {
return d.date;
}) .sort(function(a, b) {
return a - b;
}
)
);
yScale.domain([0, d3.max(tempData, function(d) {
return +d.value;
})]);
var svg = d3.select('#chart').append('svg')
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg
.append('g')
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(hAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", "-.55em")
.attr("transform", "rotate(-90)");
svg
.append('g')
.attr("class", "yaxis")
.call(vAxis)
if (chartType == 'bar') {
svg
.selectAll(".bar") //makes bar
.data(tempData)
.enter().append("rect")
.attr("class", "bar")
.style("fill", "teal")
.attr("x", function(d) {
return xScale(d.date);
}).attr("width", xScale.rangeBand())
.attr("y", function(d) {
return yScale(d.value);
}).attr("height", function(d) {
console.log("as", d.value);
return height - yScale(d.value);
})
//.text(function(d){return d.value + "%";})
.on('mouseover', function(d) {
tooltip.transition()
.style('opacity', 3)
tooltip.html(d.value)
.style('left', (d3.event.pageX) + 'px')
.style('top', (d3.event.pagey) + 'px')
d3.select(this).style('opacity', 0.5)
}).on('mouseout', function(d) {
tooltip.transition()
.style('opacity', 0)
d3.select(this).style('opacity', 1)
});
}
if (chartType == 'line') {
svg.append("path") // Add the line path.
.data(tempData)
.attr("class", "line")
.attr("d", line(tempData));
}
}
d3.json(jsonURL, function(data) {
myData = data; //data from json in mydata
myData.forEach(function(d) {
d.date = new Date(d.date);
d.date = new Date(d.date + " UTC");
});
console.log( 'mydatajson', myData);
$("#listbox").on("click", function() {
var key = $(this).val();
//console.log("key:", key);
var value = $('#listbox option:selected').text();
selectop = String(key);
selectop= "val0"+selectop;
fliterdata=myData.filter(function(d){
return d[key].slice(3) ==value;
}).map(function(d){
return {date:d.date,value:d[selectop].toString().replace(",",".")};
});
tempData=fliterdata;
if (selectDate)
render(true);
});
});
function selectChartType(type) {
chartType = type;
render(true);
}
</script>
Related
I want to update the point and axis as different option selection along with using tooltips. I select the value as a different option and select a different option. This code can also update the line with tooltips but when the line has updated the point of the previous line is exits but I want to remove those points when the line is updated.
var div = d3.select('body').append('div')
var margin = {top: 30, right: 30, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%d").parse;
// var parseDate = d3.time.format("%d-%b-%y").parse;
var formatTime = d3.time.format("%e %B");
console.log(formatTime);
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
// .tickFormat(formatPct)
.orient("left");
var line = d3.svg.line()
.x(function (d) {
return x(d.date);
})
.y(function (d) {
return y(d.pop);
});
var div = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var dataFiltered = {};
var dataNested = {};
d3.csv("data2.csv", function (error, data) {
data.forEach(function (d) {
d.date = parseDate(d.year);
d.pop = +d.population;
d.value = +d.days;
});
var dataNested = d3.nest()
.key(function (d) {
return d.days
})
.entries(data)
div.append('select')
.attr('id', 'variableSelect')
.on('change', variableChange)
.selectAll('option')
.data(dataNested).enter()
.append('option')
.attr('value', function (d) {
return d.key
})
.text(function (d) {
return d.key
})
var dataFiltered = dataNested.filter(function (d) {
return d.key === d3.select('#variableSelect').property('value')
})
x.domain(d3.extent(dataFiltered[0].values, function (d) {
return d.date;
}));
y.domain(d3.extent(dataFiltered[0].values, function (d) {
return d.pop;
}));
// svg.append("path")
// .attr("class", "line")
// .attr("d", line(data));
// svg.select("dot")
// .data(data)
// .enter().append("circle")
// .attr("r", 4)
// .attr("cx", function (d) {
// return x(d.date);
// })
// .attr("cy", function (d) {
// return y(d.pop);
// })
function toolstip(div) {
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function (d) {
return x(d.date);
})
.attr("cy", function (d) {
return y(d.pop);
})
.on("mouseover", function (d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html(formatTime(d.date) + "," + d.pop)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function (d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
}
toolstip(div);
// xFormat = "%d-%m-%y";
svg.append("g")
.attr("class", "xAxis")
.attr("transform", "translate(0," + height + ")")
// .call(d3.axisBottom(xAxis).tickFormat(d3.timeFormat(xFormat)));
.call(xAxis);
svg.append("g")
.attr("class", "yAxis")
.call(yAxis)
// .call(d3.axisLeft(yAxis))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end");
// .text("Cumulative Return");
svg.append("path")
.datum(dataFiltered[0].values)
.attr("class", "line")
.attr("d", line);
function variableChange() {
var value = this.value;
var dataFiltered = dataNested.filter(function (d) {
return d.key === value
})
console.log(dataFiltered);
x.domain(d3.extent(dataFiltered[0].values, function (d) {
return d.date;
}));
y.domain(d3.extent(dataFiltered[0].values, function (d) {
return d.pop;
}));
toolstip();
// svg.selectAll("dot")
d3.select('.xAxis').transition().duration(1000).call(xAxis)
d3.select('.yAxis').transition().duration(1000).call(yAxis)
d3.select('.line').datum(dataFiltered[0].values).attr('d', line)
}
}
);
I am trying to use the date I get from my JSON data on the X-Axis using the ScaleLog. Like this one https://bl.ocks.org/andrewdblevins/f4ea65f70dbcb34abc1e4c3d75cfa142 only for time. I have a setting on my chart that is supposed to show a year's worth of data on the X-Axis.
My Code:
var svg = d3.select("#main-chart svg"),
margin = {top: 20, right: 20, bottom: 100, left: 75},
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", "toolTip");
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
y = d3.scaleLinear().rangeRound([height, 0]);
var colours = d3.scaleOrdinal()
.range(["#d9534f", "#d9534f"]);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json(url, function(error, data) {
if (error) throw error;
x.domain(data.map(function(d) {
let get_date = "";
if($('#day').hasClass("active")) {get_date = moment(d.date, 'YYYY-MM-DD').format('MMM DD, YYYY')}
else if($('#month').hasClass("active")) {get_date = moment(d.date, 'YYYY-MM-DD').format('MMM, YYYY')}
return get_date;
}));
y.domain([d3.min(data, function(d) {return d.total_valid_subscribers-1000000; }), d3.max(data, function(d) { return d.total_valid_subscribers; })]);
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).ticks(5))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)" );
g.append("g").call(d3.axisLeft(y).ticks(10).tickFormat(function(d) {return parseInt(d); }).tickSizeInner([-width]));
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("x", function(d) {let get_date = "";
if($('#day').hasClass("active")) {get_date = moment(d.date, 'YYYY-MM-DD').format('MMM DD, YYYY')}
else if($('#month').hasClass("active")) {get_date = moment(d.date, 'YYYY-MM-DD').format('MMM, YYYY')}
return x(get_date);
})
.attr("y", function(d) {return y(d.total_valid_users); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.total_valid_subscribers); })
.attr("fill", function(d) { return colours(d.date); })
.on("mousemove", function(d){
tooltip
.style("left", d3.event.pageX - 50 + "px")
.style("top", d3.event.pageY - 70 + "px")
.style("pointer-events", "none")
.style("display", "inline-block")
.html((d.date) + "<br>" + (d.total_valid_users));
})
.on("mouseout", function(d){ tooltip.style("display", "none");});
});
When I do "Last 7 Days". I get:
But when I do "This Year", all my data gets smushed together:
I was hoping to get something like this on both my scales, for X-Axis:
and for Y-Axis:
Is there anyways to do this?
Why is the y-axis is not aligned with the graph. Graph response height exceeds y-axis data.
Expected output should not have graph height overflow from plot area/exceed y axis height.
Here is my javascript:
function getD3Chart(chartData){
var formattime = d3.time.format("%a-%d");
var widther = window.outerWidth - 35;
if(widther > 750){
widther = 430;
}
var margin = {top: 20, right: 20, bottom: 30, left: 30},
width = widther - margin.left - margin.right,
height = 235 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b-%Y:%H").parse,
bisectDate = d3.bisector(function(d) { return d.date; }).left,
formatValue = d3.format(",.3f"), // its use for after decimal we can show number of fractional digit
formatCurrency = function(d) { return 1000*formatValue(d)+"ms, "; };
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.innerTickSize(0)
.outerTickSize(0)
.tickPadding(10)
.tickFormat(formattime)
.ticks(7);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.innerTickSize(0)
.outerTickSize(0);
var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d.avgResponse); });
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.avgResponse); });
var svg = d3.select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var data = chartData.map(function(d) {
return{
date : parseDate(d.date),
avgResponse : d.avgResponse
};
});
data.sort(function(a, b) {
return a.date - b.date;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.avgResponse; })]);
svg.append("path")
.data([data])
.attr("class", "area")
.attr("d", area);
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.style("position", "absolute")
.style("font-weight", "bold")
.text("Avg ResponseTime in ms");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.style("position", "absolute")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.style("position", "absolute")
.call(yAxis);
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
var focus = svg.append("g")
.attr("class", "focus")
.style("display", "none");
focus.append("circle")
.attr("r", 6.5);
focus.append("text")
.attr("x", 9)
.attr("dy", ".35em");
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.attr("background-color", "#EDE3D1")
.attr('opacity', 0)
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
function mousemove() {
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
var hour = d.date.getHours();
hour = (hour < 10)? "0"+hour : hour;
focus.attr("transform", "translate(" + x(d.date) + "," + y(d.avgResponse) + ")");
focus.select("text").text(formatCurrency(d.avgResponse) +" "+months[d.date.getMonth()]+" "+ d.date.getDate()+"th " +hour+":00h");
focus.select("text").attr("class", "graphDataClass");
if(d3.mouse(this)[0] > 260) {
focus.select("text").attr("x", -120);
}else{
focus.select("text").attr("x", 9);
}
}
}
I am drawing charts with d3 4.2.2 in my Angular2 project. I created a multi series line chart and added zoom and drag properties. Now the chart is zooming on mouse scroll event but it zoom only X-axis and Y-axis. And it can be dragged only X-axis & Y-axis but chart cannot be dragged. When I do zooming or dragging those events are applying only to the two axis es but not for the chart. Following is what I am doing with my code.
// set the dimensions and margins of the graph
var margin = {
top: 20,
right: 80,
bottom: 30,
left: 50
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var zoom = d3.zoom()
.scaleExtent([1, 5])
.translateExtent([[0, -100], [width + 90, height + 100]])
.on("zoom", zoomed);
var svg = d3.select(this.htmlElement).append("svg")
.attr("class", "line-graph")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.attr("pointer-events", "all")
.call(zoom);
var view = svg.append("rect")
.attr("class", "view")
.attr("x", 0.5)
.attr("y", 0.5)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("fill", "#EEEEEE")
.style("stroke", "#000")
.style("stroke-width", "0px");
// parse the date / time
var parseDate = d3.timeParse("%Y-%m-%d");
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var z = d3.scaleOrdinal(d3.schemeCategory10);
// define the line
var line = d3.line()
.x( (d) => {
return x(d.date);
})
.y( (d) => {
return y(d.lookbookcount);
});
z.domain(d3.keys(data[0]).filter(function (key) {
return key !== "date";
}));
// format the data
data.forEach( (d)=> {
d.date = parseDate(d.date);
});
var lookBookData = z.domain().map(function (name) {
return {
name: name,
values: data.map( (d) => {
return {date: d.date, lookbookcount: d[name], name: name};
})
};
});
x.domain(d3.extent(data, (d) => {
return d.date;
}));
y.domain([
d3.min([0]),
d3.max(lookBookData, (c) => {
return d3.max(c.values,
(d) => {
return d.lookbookcount;
});
})
]);
z.domain(lookBookData.map( (c) => {
return c.name;
}));
var xAxis = d3.axisBottom(x)
.ticks(d3.timeDay.every(1))
.tickFormat(d3.timeFormat("%d/%m"));
var yAxis = d3.axisLeft(y)
.ticks(10);
// Add the X Axis
var gX = svg.append("g")
.style("font", "14px open-sans")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
var gY = svg.append("g")
.style("font", "14px open-sans")
.attr("class", "axis axis--x")
.call(yAxis)
.style("cursor", "ns-resize");
// Add Axis labels
svg.append("text")
.style("font", "14px open-sans")
.attr("text-anchor", "end")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.text("Sales / Searches");
svg.append("text")
.style("font", "14px open-sans")
.attr("text-anchor", "end")
.attr("dx", ".71em")
.attr("transform", "translate(" + width + "," + (height +
(margin.bottom)) + ")")
.text("Departure Date");
var chartdata = svg.selectAll(".chartdata")
.data(lookBookData)
.enter().append("g")
.attr("class", "chartdata");
chartdata.append("path")
.classed("line", true)
.attr("class", "line")
.attr("d", function (d) {
return line(d.values);
})
.style("fill", "none")
.style("stroke", function (d) {
return z(d.name);
})
.style("stroke-width", "2px");
chartdata.append("text")
.datum(function (d) {
return {
name: d.name, value: d.values[d.values.length - 1]
};
})
.attr("transform", function (d) {
return "translate(" +
x(d.value.date) + "," + y(d.value.lookbookcount) + ")";
})
.attr("x", 3)
.attr("dy", "0.35em")
.style("font", "14px open-sans")
.text(function (d) {
return d.name;
});
// add the dots with tooltips
chartdata.selectAll(".circle")
.data(function (d) {
return d.values;
})
.enter().append("circle")
.attr("class", "circle")
.attr("r", 4)
.attr("cx", function (d) {
console.log(d);
return x(d.date);
})
.attr("cy", function (d) {
return y(d.lookbookcount);
})
.style("fill", function (d) { // Add the colours dynamically
return z(d.name);
});
function zoomed() {
view.attr("transform", d3.event.transform);
gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
}
function resetted() {
svg.transition()
.duration(750)
.call(zoom.transform, d3.zoomIdentity);
}
Any suggestions would be highly appreciated.
Thank you
I am trying to fix a hover, tool tip problem on my stream graph. I have a data set of decades and immigration data. When I hover over the graph it only shows the data for one decade, but the entire graph shows all the data.
I also am trying to correct axis labels.
For instance, the data for Russia should be , at the highest point: 433,427
<script src="http://d3js.org/d3.v2.js"></script>
<div class="chart">
</div>
<script>
chart("Data.csv", "blue");
var datearray = [];
var colorrange = [];
function chart(csvpath, color) {
if (color == "blue") {
colorrange = ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"];
}
else if (color == "pink") {
colorrange = ["#980043", "#DD1C77", "#DF65B0", "#C994C7", "#D4B9DA", "#F1EEF6"];
}
else if (color == "orange") {
colorrange = ["#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"];
}
strokecolor = colorrange[0];
var format = d3.time.format("%m/%d/%y");
var margin = {top: 20, right: 40, bottom: 30, left: 30};
var width = document.body.clientWidth - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;
var tooltip = d3.select("body")
.append("div")
.attr("class", "remove")
.style("position", "absolute")
.style("z-index", "20")
.style("visibility", "hidden")
.style("top", "30px")
.style("left", "55px");
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height-10, 0]);
var z = d3.scale.ordinal()
.range(colorrange);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(d3.time.years);
var yAxis = d3.svg.axis()
.scale(y);
var yAxisr = d3.svg.axis()
.scale(y);
var stack = d3.layout.stack()
.offset("silhouette")
.values(function(d) { return d.values; })
.x(function(d) { return d.date; })
.y(function(d) { return d.value; });
var nest = d3.nest()
.key(function(d) { return d.key; });
var area = d3.svg.area()
.interpolate("cardinal")
.x(function(d) { return x(d.date); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
var svg = d3.select(".chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
/* correct this function
var graph = d3.csv(csvpath, function(data) {
data.forEach(function(d) {
d.date = format.parse(d.date);
d.value = +d.value;
});*/
var graph = d3.csv(csvpath, function(raw) {
var data = [];
raw.forEach(function (d) {
data.push({
key: d.Country,
date : new Date(1980),
value : parseInt(d['1980-1989'].replace(',','')) //get rid of the thousand separator
});
data.push({
key: d.Country,
date : new Date(1990),
value : parseInt(d['1990-1999'].replace(',',''))
});
data.push({
key: d.Country,
date : new Date(2000),
value : parseInt(d['2000-2009'].replace(',','') )
});
});
var layers = stack(nest.entries(data));
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);
svg.selectAll(".layer")
.data(layers)
.enter().append("path")
.attr("class", "layer")
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d, i) { return z(i); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + ", 0)")
.call(yAxis.orient("right"));
svg.append("g")
.attr("class", "y axis")
.call(yAxis.orient("left"));
svg.selectAll(".layer")
.attr("opacity", 1)
.on("mouseover", function(d, i) {
svg.selectAll(".layer").transition()
.duration(250)
.attr("opacity", function(d, j) {
return j != i ? 0.6 : 1;
})})
.on("mousemove", function(d, i) {
mousex = d3.mouse(this);
mousex = mousex[0];
var invertedx = x.invert(mousex);
invertedx = invertedx.getMonth() + invertedx.getDate();
var selected = (d.values);
for (var k = 0; k < selected.length; k++) {
datearray[k] = selected[k].date
datearray[k] = datearray[k].getMonth() + datearray[k].getDate();
}
mousedate = datearray.indexOf(invertedx);
pro = d.values[mousedate].value;
d3.select(this)
.classed("hover", true)
.attr("stroke", strokecolor)
.attr("stroke-width", "0.5px"),
tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "visible");
})
.on("mouseout", function(d, i) {
svg.selectAll(".layer")
.transition()
.duration(250)
.attr("opacity", "1");
d3.select(this)
.classed("hover", false)
.attr("stroke-width", "0px"), tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "hidden");
})
var vertical = d3.select(".chart")
.append("div")
.attr("class", "remove")
.style("position", "absolute")
.style("z-index", "19")
.style("width", "1px")
.style("height", "380px")
.style("top", "10px")
.style("bottom", "30px")
.style("left", "0px")
.style("background", "#fff");
d3.select(".chart")
.on("mousemove", function(){
mousex = d3.mouse(this);
mousex = mousex[0] + 5;
vertical.style("left", mousex + "px" )})
.on("mouseover", function(){
mousex = d3.mouse(this);
mousex = mousex[0] + 5;
vertical.style("left", mousex + "px")});
});
}
</script>
I am adapting the code from this post: http://bl.ocks.org/WillTurman/4631136
My data would be per decade so 1980-1989,1990-1999, 2000-2009
1980-1989 1990-1999 2000-2009
i.e, Russia 33,311 433,427 167,152