We Keep Coding

D3js Donut chart legend

I want to add a legend to my D3js donut chart, like this post, its supposed to be kind of simple but I can't get it and I don't know what I'm doing wrong, also the console is not throwing any errors, anyone can see the error?
my data comes from a csv and looks like this:
data = [{
value: 30,
key: "Alta"
}, {
value: 37,
key: "Media"
}, {
value: 15,
key: "Moderada"
}, {
value: 8,
key: "Baja"
},
{
value: 13,
key: "Muy baja"
},
]
and this is the part that adds the data to the chart:
var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = 500 - margin.right - margin.left,
height = 500 - margin.top - margin.bottom,
radius = width/2;
var color = d3.scaleOrdinal()
.range(["#B4DC70", "#FEFE2B", "#FE8E2B", "#FE2B2B", "#2B5EFE"]);
// arc generator
var arc = d3.arc()
.outerRadius(radius - 10)
.innerRadius(radius - 70);
// generate pie chart and donut chart
var pie = d3.pie()
.sort(null)
.value(function(d) { return d.value; });
// define the svg for pie chart
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
d3.csv("alertas.csv", function(error, data) {
if (error) throw error;
var amenazasCount = d3.nest()
.key(function(d) { return d.TEXTO_AMENAZA; })
.rollup(function(v) { return v.length; })
.entries(data);
amenazasCount.forEach(function(d) {
d.value = +d.value;
});
var g = svg.selectAll(".arc")
.data(pie(amenazasCount))
.enter().append("g")
.attr("class", "arc");
// append path
g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.key); });
var legendG = svg.selectAll(".legend")
.data(pie(amenazasCount))
.enter().append("g")
.attr("transform", function(d,i){
return "translate(" + (width - 110) + "," + (i * 15 + 20) + ")";
})
.attr("class", "legend");
legendG.append("rect")
.attr("width", 10)
.attr("height", 10)
.attr("fill", function(d) { return color(d.data.key); });
legendG.append("text")
.text(function(d){
return d.value + " " + d.data.key;
})
.style("font-size", 12)
.attr("y", 10)
.attr("x", 11);
});

The SVG and G elements are not sized correctly or consistently with the margins you had defined, so that legend was positioned too far to the right, and outside of the SVG view.
If you set up your SVG and g elements like this then it will work:
// set a width and height inclusive of the margins
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
// create a parent g element for everything to be included within
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// position the pie half of the width and height
var pieG = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("transform", "translate(" + width/2 + "," + height/2 + ")")
.attr("class", "arc");
And then append the legendG to the "g" element:
var legendG = g.selectAll(".legend")
.data(legendData)
.enter()
.append("g")
.attr("transform", function(d,i){
return "translate(" + (width - 60) + "," + (i * 15 + 20) + ")";
})
.attr("class", "legend");

Creating axis from array of strings in D3?

I've created a basic bar chart in d3 from an array of integers.
let maxWidth = $('body').width();
let chartWidth = maxWidth * 0.75; // also arbitrary
let chartHeight = chartWidth / _GoldenRatio;
let barWidth = (chartWidth / dataArray.length) - horizontalSpacing;
let barHeightUnit = chartHeight / d3.max(dataArray);
let mainChart = d3.select(containerSelector)
.append('svg')
.attr('width', chartWidth)
.attr('height', chartHeight);
mainChart.selectAll("rect")
.data(dataArray)
.enter()
.append("rect")
.attr("class", "bar")
.attr("height", function(d, i) { return (d * barHeightUnit) })
.attr("width",barWidth)
.attr("x", function(d, i) { return i * (barWidth + horizontalSpacing) + horizontalSpacing })
.attr("y", function(d, i) { return chartHeight - (d * barHeightUnit) });
I do this a few times with a few different arrays. Each list of integers corresponds with a list of strings that I'd like to display along the x-axis. Each string will lie below one bar to label it.
I can't figure out a way to do this easily with d3 or d3-axis. What is an easy way to construct an axis from this list of strings?

Hope this snippet using d3.v4 helps.
var margin = {
top: 100,
right: 100,
bottom: 100,
left: 100
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scaleBand()
.range([0, width])
.domain(["apple", "orange", "banana", "grapefruit"]);
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 + ")");
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
<script src="https://d3js.org/d3.v4.min.js"></script>

d3 timeline update issue

I got this piece of code in which the timeline updates his value by sliding(manually). Problem is That I got an error saying that projection is not a code. Can someone help me please.
Setting the size of the slider.
var margin = {
top: 50,
right: 90,
bottom: 50,
left: 50
},
width = 1000 - margin.left - margin.right,
height = 300 - margin.bottom - margin.top;
// scale function
var timeScale = d3.time.scale()
.domain([new Date('2016-01-01'), new Date('2016-12-31')])
.range([0, width])
.clamp(true);
// initial value
var startValue = timeScale(new Date('2012-03-20'));
startingValue = new Date('2016-08-12');
//////////
defines brush
var brush = d3.svg.brush()
.x(timeScale)
.extent([startingValue, startingValue])
.on("brush", brushed);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
// classic transform to position g
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
// put in middle of screen
.attr("transform", "translate(0," + height / 2 + ")")
// inroduce axis
.call(d3.svg.axis()
.scale(timeScale)
.orient("bottom")
.tickFormat(function(d) {
return formatDate(d);
})
.tickSize(0)
.tickPadding(12)
.tickValues([timeScale.domain()[0], timeScale.domain()[1]]))
.select(".domain")
.select(function() {
console.log(this);
return this.parentNode.appendChild(this.cloneNode(true));
})
.attr("class", "halo");
var slider = svg.append("g")
.attr("class", "slider")
.call(brush);
slider.selectAll(".extent,.resize")
.remove();
slider.select(".background")
.attr("height", height);
var handle = slider.append("g")
.attr("class", "handle")
handle.append("path")
.attr("transform", "translate(0," + height / 2 + ")")
.attr("d", "M 0 -20 V 20")
handle.append('text')
.text(startingValue)
.attr("transform", "translate(" + (-18) + " ," + (height / 2 - 25) + ")");
slider
.call(brush.event)
Sets the canvas with the projection.
var width = 1280;
var height = 900;
var projection = d3.geo.mercator()
.scale(200000)
.center([4.9, 52.36])
.translate([width / 2, height / 2]);
var canvas = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.call(d3.behavior.zoom().on("zoom", function () {
canvas.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
}))
.append("g")
Logs the events of the day and the coordinates to the console.
function brushed() {
var value = brush.extent()[0];
console.log()
if (d3.event.sourceEvent) { // not a programmatic event
value = timeScale.invert(d3.mouse(this)[0]);
brush.extent([value, value]);
}
handle.attr("transform", "translate(" + timeScale(value) + ",0)");
handle.select('text').text(formatDate(value));
slidedate = (formatDate(value));
console.log(slidedate)
console.log("dit is datum" + slidedate)
dataCsv.forEach(function(d) {
//console.log("datum is" + slidedate)
if (slidedate == d.Datepattern_startdate) {
console.log(slidedate)
console.log(d.Title)
coords = projection([+d["Longitude"],+d["Latitude"]]);
console.log(coords);
var circle = canvas.append("circle")
.attr("cx", coords[0] )
.attr("cy", coords[1] )
.attr("r", "6px")
.attr("fill", "orange")
.style("opacity", .6)
.append("title")
.text(function(dataCsv) {return d.Title})
} else {
//console.log(" Werkt niet")
}
});
Error = mapm.html:272 Uncaught TypeError: projection is not a function.

Specify view for zoomable heatmap in D3

I am doing a heatmap with zoom and pan functionalities, and realized that the data points is showing up on the left side of the y-axis when zooming and panning, after I increased the space to the left of the heatmap, in order to make space for the y-axis (See picture). How can I avoid this? A code sample is provided in below.
var zoom = d3.behavior.zoom()
.scaleExtent([dotWidth, dotHeight])
.x(xScale)
.on("zoom", zoomHandler);
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.call(zoom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function zoomHandler() {
var t = zoom.translate(),
tx = t[0],
ty = t[1];
tx = Math.min(tx, 0); // tx < 0
tx = Math.max(tx, -1000); //
zoom.translate([tx, ty]);
svg.select(".x.axis").call(xAxis);
svg.selectAll("ellipse")
.attr("cx", function(d) { return xScale(d.day); })
.attr("cy", function(d) { return yScale(d.hour); })
.attr("rx", function(d) { return (dotWidth * d3.event.scale); });
}
svg.selectAll("ellipse")
.data(dataset)
.enter()
.append("ellipse")
.attr("cx", function(d) { return xScale(d.day); })
.attr("cy", function(d) { return yScale(d.hour); })
.attr("rx", dotWidth)
.attr("ry", dotHeight)
.attr("fill", function(d) { return "rgba(100, 200, 200, " + colorScale(d.tOutC) + ")"; });

Zoom and pan image using manual scaling for CanvasRenderingContext2D.drawImage with d3. Preserves aspect ratio of the image
http://bl.ocks.org/robnagler/e245b69c473da73dfb85
or this one
http://www.d3noob.org/2014/02/generate-heatmap-with-leafletheat-and.html

I figured out that the solution was to create a clipping path. I used the clipping method from this example: http://bl.ocks.org/mbostock/4248145. Basically I added the following code:
svg.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("class", "mesh")
.attr("width", width)
.attr("height", height);
svg.append("g")
.attr("clip-path", "url(#clip)")
.selectAll(".hexagon")
.data(hexbin(points))
.enter().append("path")
.attr("class", "hexagon")
.attr("d", hexbin.hexagon())
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.style("fill", function(d) { return color(d.length); });
The code works fine with zooming features as well. Just call the zoom function when creating the your svg canvas. Like this:
// SVG canvas
var svg = d3.select("#chart")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.call(zoom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

How to apply the the enter() and data() methods for ds3 in-memory data

I have loaded data from a WebSocket connection into an array variable "data". I can see the 50 elements in the array and they do have the correct map elements.
The following snippet works properly: at the end the "data" elements have all rows transformed:
data.forEach(function (d) {
d[date] = parseDate(d[date]);
d[close] = +d[close];
});
Now, how to apply this data array to the internal d3 "values" so that the subsequent d3 dom manipulations use that data? In the next snippet I have made the attempt based on the examples / blogs I had seen:
var svg = d3.select("body").selectAll("svg")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
/* The following is NOT the correct place/way to do it.. need help here! */
.data(data)
.enter()
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
UPDATE Well I just tried moving those two data(data) and .enter() lines around - now placing them right after the selectAll().
var svg = d3.select("body").selectAll("svg")
.data(data)
.enter()
.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 + ")")
The results? Well we do have data now ! Maybe too much of a good thing?
EDIT Here is the entire function
function updateD3(data) {
var WIDTH = 1800, HEIGHT = 800;
var margin = {top: 120, right: 20, bottom: 120, left: 100},
width = WIDTH - margin.left - margin.right,
height = HEIGHT - margin.top - margin.bottom;
var parseDate = d3.time.format("%m-%d-%Y %H").parse;
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").ticks(31);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function (d) {
return x(d[date]);
})
.y(function (d) {
return y(d[close]);
});
var myNode = document.body;
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
var len = data.length;
console.log("data size=" + len + " date: " + data[0][date] + " close: " + data[0][close]
+ " last value: date: " + data[len-1][date] + " close: " + data[len-1][close]);
var date = "CALL_HOUR";
var close = "DROPPED_CALL";
data.forEach(function (d) {
d[date] = parseDate(d[date]);
d[close] = +d[close];
});
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 + ")");
x.domain(d3.extent(data, function (d) {
return d[date];
}));
y.domain(d3.extent(data, function (d) {
return d[close];
}));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-1.1em")
.attr("dy", ".15em")
.attr("transform", function (d) {
return "rotate(-65)"
});
svg.append("text") // text label for the x axis
.attr("x", width / 2)
.attr("y", height + margin.bottom)
.style("text-anchor", "middle")
.style("font-size", "14px")
.text("Call Date");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Dropped Calls");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "20px")
.style("text-decoration", "underline")
.text("No. of Dropped Calls vs Date Line Chart");
}

By biding your data to svg elements, you are creating as many svg elements as you have data items. I suspect that is not what you want. I created this FIDDLE exemplifying what you are doing but also showing how to bind the data to a single g.
Part of fiddle with data under a single g:
var data = [10,20,30];
var svg = d3.select("body")
.append("svg")
.attr("class","oneSvg")
.attr("width", 100)
.attr("height",100)
.append("g")
.attr("transform", "translate(0,0)");
circles = svg.selectAll("circle")
.data(data);
circles
.enter()
.append("circle")
.attr("cx",function (d) {return d;})
.attr("cy",20)
.attr("r",5)
.style("fill","blue");