Scaling the Y-axis above X-axis - javascript

for this example http://jsfiddle.net/5D5eD/8/. How to increase the Y-axis above X-axis also ?
main.append('g')
.attr('transform', 'translate(0,0)')
.attr('class', 'main axis date')
.call(yAxis)
what change should I make in this line .attr('transform', 'translate(0,0)') ?

In order to do this, you need to run the code for plotting the chart again (minus the line plotting part) on another g element that has been translated. In order to do this, it's easiest to wrap the part that draws the graph in a function and call that twice.
Complete demo here.

Related

How can I implement 2 x axis in D3 version 4

I'm trying to implement two x axis (Major and minor axis) using D3.
I already have both of them been displayed, but my second axis is not displayng the domain properly.
Here's the code on codepen: http://codepen.io/wendelcosta/pen/QpzzgJ
g.append("g")
.attr("class", "axis axis--x2")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x2));
I need to display the days for the months as minor ticks in between the major ticks (Months), it should looks like the following image.
Click Here for Image Preview
You should use two time scales for the x axis.
In the "day" axis, you can set the axis generator using d3.timeDay:
call(d3.axisBottom(x2)
.ticks(d3.timeDay.every(6))
.tickFormat(d => d3.timeFormat("%d")(d)));
And in the "month" axis, you increase the tick size:
call(d3.axisBottom(x)
.tickSizeInner(20)
.tickFormat(d3.timeFormat("%b %y")));
Here is your updated codepen: http://codepen.io/anon/pen/bqOPRg?editors=0010
I'm printing just one on every 6 days, still the "day" axis is terribly crowded. Now it's up to you reducing the text size or reducing the number of ticks.
EDIT: Since OP asked in the comments to show only values present in the data array, here is another CodePen: http://codepen.io/anon/pen/qrvdWq?editors=0010

D3 adding interval on X axis

Trying to get intervals on the X axis. The X axis should display the 1st of every month(1st Jan, 1st Feb, etc). Also looking at how to zoom in the chart to show the days (1-31 Jan). So far i've got a brush only to work as i'm still new to creating bar charts in D3.
var brush = d3.svg.brush()
.x(x)
.on('brush', bListener);
var gBrush = svg.select('g.brush').call(brush);
gBrush.selectAll('rect')
.attr('height', height - margin.top - margin.bottom)
.style("opacity", 0.5)
.style("fill", ""grey");
Looking to create something like this but as a bar chart in D3, http://www.highcharts.com/demo/line-time-series.
Here's https://jsfiddle.net/noobiecode/wck4ur9d/4/
Any help would be appreciated.
Partial answer:
How to display the 1st of every month(1st Jan, 1st Feb, etc):
In your xAxis instead of this:
.ticks(d3.time.days, 1)
do this:
.ticks(d3.time.months)
working fiddle here
Regarding brushing i didn't see any examples, may be you need to write it on your own :(

Chart bars not aligning with x axis values in d3.js

Trying to learn and implement d3.js for the first time.
In the fiddle, we needed to reduce the width of each bar from
.attr('width', xScale.rangeBand()) line 46
to
.attr('width', '10') line 50
When doing so, the horizontal x axis labels are getting dis-aligned with vertical bars which is not needed.
Tried to see a few solutions:
We're unable to see tickValues anywhere in my code.
Unable to understand where to put SVG-Text
We do not wish to hide the x axis labels
Ours is numeric, they're discussing about date time kind of axis
Any suggestions, kind folks?
Try this code:
.rangeBands([0, width], someValue)

Why does d3 axis class name change axis format?

Here's a D3? .js? puzzler I ran into over the weekend. I have a y-axis that is changing format according to the class name that is used when i set the y axis attribute on a group that I append to the the svg object. Details that might affect it are as follows:
creating the y axis object:
var y = d3.scale.ordinal()
.domain(d3.range(ydomain.length))
.rangeRoundBands([2, height],0.08);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickValues(ydomain);
Attaching the y axis:
svg.append("g")
.attr("class", "**y-axis**")
.call(yAxis)
.append("text")
.attr("y", -17)
.attr("dy", ".71em")
.style("text-anchor", "middle")
.style("font-size", "16px")
.attr("transform", "translate(5,0), rotate(0)")
.text("Keywords")
;
The bold "y-axis" is the part that triggers the funny behavior. If I name it as: "y axis", I get this:
BUT if I use "y-axis" as above, the formatting changes to this:
The bolded line appears rather than the axis with small tick marks. Both versions of class name "y axis","y-axis" seem to be valid, both call the yAxis object, and this is the first time in the code that these class names are used. So what's the fundamental cause of this behavior? I think there's some web dev 101 stuff I'm not getting so simple and basic explanations are much appreciated.
"y axis" is a class with associated styling that gives you the thin line with the tickmarks. "y-axis" has no such styling and is drawing your y-axis line according to some other styling property not intended for axis styling.

Adding rules to charts that use d3.svg.axis

I'm using a line chart that's essentially a copy of the code at http://bl.ocks.org/3883245. I would like to add horizontal rules to the graph, however when I try to access the calculated tick values via yAxis.tickValues() I only get a null response. Am I going about that correctly?
tickValues is used to set custom, externally determined tick positions. So if you let the axis choose the values then this property will properly be null.
The easiest way to add grid lines is actually to add another axis! In the example you linked immediately following the lines:
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
you can add the following to append a grid:
svg.append("g").attr("class", "xaxisgrid").call( xAxis.tickFormat("").tickSize(450) );
svg.select("g.xaxisgrid").selectAll(".tick")
.style('stroke', "#000")
.style('opacity', 0.4)
.filter(function(d, i){ return d3.select(this).classed('minor');} )
.style('opacity', 0.1);
svg.select("g.xaxisgrid .domain").style('fill', 'none');
The code is a bit rough, but should get you started. Basically I am slightly modifying the axis generation function(xAxis) to generate only ticks, and then I am making the ticks really long.

Categories