Develop Reference

D3 V4, How can I have a tick mark at every data point, but a label at only select data points

As you can see from the image I'm using monthly data. I'm trying to find a way to display every tick mark, but only the April month labels. example: Apr 2014, Apr 2015, Apr 2016 and Apr 2017 - and keep the tick marks in between.
Thanks in advance.
X axis generated from this code
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).ticks(d3.timeMonth.every(1))
.tickFormat(d3.timeFormat("%b %Y") )
);
g.select('.axis.axis--x')
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)" );
Thanks to Sira, this is what I ended up with:
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).ticks(d3.timeMonth.every(1))
.tickFormat(d3.timeFormat("%b %Y") )
);
g.select('.axis.axis--x')
.selectAll("text")
.style("text-anchor", "end")
.style("opacity", function(d){
if (d3.select(this).text().includes("Apr")){return "1"}else{return "0"}
})
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)" );

Take a look at d3.class with callback. Inside the callback, you will have an access to the datum, index and this respectively.
So if you want the ticks to only show up if it contains "Apr" in the data, you can do something like:
g.select('.axis.axis--x')
.selectAll("text")
.style("text-anchor", "end")
.attr("display", function(d, i, this) {
if (!d.contains("Apr") {
return "none";
}
})
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)" );
You can replace the if with other statements that will return "none" for the data point that you want it to disappear.

Trouble adding label to axes in d3

I have this code and I can't seem to create labels for the axes. I've tried copying what other scripts do but my knowledge of D3 is pretty lacking.
In particulare I was trying to merge this code with what I have to disasterous results:
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("Temperature (ºF)");
And what I have:
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("transform", "translate(" + width + ",0)")
.attr("y", -5)
.style("text-anchor", "end")
.text("Frequency");
Here is the bl.ocks.org link
And here is the gist

Your label is here in the DOM at the position you specified. You just need to style it to make it visible:
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("fill", "black") // <= Here
.attr("transform", "translate(" + width + ",0)")
.attr("y", -5)
.style("text-anchor", "end")
.text("Frequency");
Or simply use CSS:
.label {
fill: black;
}

How to change negative Y axis domain to be positive

I have this code:
y.domain([-arr2, arr2]).nice();
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("x", 150)
.attr("y", -10)
.attr("dy", ".71em")
.style("text-anchor", "end")
.attr("font-family", "sans-serif")
.attr("font-size", "34px")
.text("log(Lev)");
This is the graph with Y axis created by this code:
As you can see, Y axis have a negative portion (0 <--> -25) bellow X axis,
i whould like to change negative Y axis domain to be positive.
So i get something like:

You can use:
yAxis = Math.abs(yAxis);

You want to use a custom render for the axis labels. You can do it with yAxis.tickFormat(function(v){ return String(Math.abs(v)); }) (github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickFormat) – Prusse 10 mins ago

d3 x-axis label positioned below the x-axis

I'm trying to draw an x-axis label for one of my d3 graphs, and I'm having a lot of trouble positioning it below the axis itself. Here is my current code:
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", (width / 2))
.style("text-anchor", "middle")
.text("Users ordered by contribution");
And here is a screenshot of the problem. Is there a quick fix?

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", (width / 2))
.attr("y", height) //set your y attribute here
.style("text-anchor", "middle")
.text("Users ordered by contribution");
You can set your y position attribute for your svg text as per above

D3.js Plotting Multiple Data Sets from Separate Files

I'm trying to make a scatter plot with two sets of data from two tsv files. However, each one shares the x-axis with single scale. There are two y-axis each with their own scale. The graph I have right now will help visually.
Problem is, the 2nd data set (in orange) only plots partially as seen as a smudge at about 15,000 on the a-axis. it should really be a much larger line. Also, when I run this, sometimes the 2nd data set renders and the first does now. Not sure why this is happening..
Here are the two (likely) relevant blocks of code:
//1st data set
d3.tsv("datatest4.tsv", function(error, tsv1) {
tsv1.forEach(function(d) {
d.altit = +d.altit;
d.tmp = +d.tmp;
});
x.domain(d3.extent(tsv1, function(d) { return d.altit; })).nice();
y.domain(d3.extent(tsv1, function(d) { return d.tmp; })).nice();
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("Altitude (m)");
svg.append("g")
.attr("class", "y axis axis1")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end");
svg.selectAll(".dot")
.data(tsv1)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 1)
.attr("cx", function(d) { return x(d.altit); })
.attr("cy", function(d) { return y(d.tmp); })
.style("fill","steelblue");
});
and
//2nd data set
d3.tsv("datatest2.tsv", function(error, tsv2) {
tsv2.forEach(function(dd) {
dd.alti = +dd.alti;
dd.pressure = +dd.pressure;
});
x2.domain(d3.extent(tsv2, function(dd) { return dd.alti; })).nice();
y2.domain(d3.extent(tsv2, function(dd) { return dd.pressure; })).nice();
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis2)
.attr("x", width)
.attr("y", -6)
.text("Altitude (m)");
svg.append("g")
.attr("class", "y axis axis2")
.call(yAxis2)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end");
svg.selectAll(".dot")
.data(tsv2)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 1)
.attr("cx", function(dd) { return x2(dd.alti); })
.attr("cy", function(dd) { return y2(dd.pressure); })
.style("fill","orange");
});

The problem is that you're using the same selector, svg.selectAll(".dot"), for each dataset .data(tsv1) and .data(tsv2).
D3 thinks that the 2nd set is supposed to replace the first. You can fix it by assigning a unique class to each type of dot.
svg.selectAll(".blue.dot")// Select specifically blue dots
.data(tsv1)
.enter().append("circle")
.attr("class", "blue dot")// Assign two classes
...
svg.selectAll(".orange.dot")
.data(tsv2)
.enter().append("circle")
.attr("class", "orange dot")
...