My goal its a chart with multiple Y axis.Example below
Than I try call d3.axisLeft().scale() for the second Y axis, axis is drawing but not scaled
var yscaleLvl = d3.scaleLinear()
.domain([0, d3.max(chartData, function (d) { return (d.lvlData*1.2) /10.0; } )] )
.range([height / 2, 0]);
var yscaleVolume = d3.scaleLinear()
.domain([0, d3.max(chartData, function (d) { return (d.volumeData * 1.2) / 10.0; })])
.range([height / 2, 0]);
var y_axisLvl = d3.axisLeft().scale(yscaleLvl);
svg.append("g")
.attr("transform", "translate(50, 10)")
.attr("stroke-width", 3.0)
.call(y_axisLvl);
var y_axisVolume = d3.axisLeft().scale(yscaleVolume);
svg.append("g")
.attr("transform", "translate(15, 10)")
.attr("stroke-width", 3.0)
.call(y_axisVolume);
It's possible do in the direct way, or need more trickiest way ?
The way you posted is exactly how you add more than one axis.
const yScaleA = d3.scaleLinear().domain([0,1]).range([10,190])
const yScaleB = d3.scaleLinear().domain([10,100]).range([10,190])
const yAxisA = d3.axisLeft(yScaleA)
const yAxisB = d3.axisLeft(yScaleB)
const svg = d3.select('svg')
svg.append('g').attr('transform','translate(100,0)').call(yAxisA)
svg.append('g').attr('transform','translate(50,0)').call(yAxisB)
Here is a minimal working example to demonstrate.
If you didn't achieve this result, then there is a bug somewhere else in the application.
Related
I'm trying to make a linechart with D3 and React where the x axis is based on Date.now() object and all the ticks are a minute apart on a 10mn window.
I can't generate the line because I get "NaNNaNNaN" in my svg path;
Can't seem to figure out how to have ticks minutes apart on my x axis;
Here's how the data looks like
// data state
data = [
{"loadAverage":0.008333333333333333,"timestamp":1632740462342},
{"loadAverage":0.008333333333333333,"timestamp":1632740459323},
{"loadAverage":0.013333333333333334,"timestamp":1632740471400}
];
the timestamp key is a new Date.now() coming from the server
useEffect(() => {
const svg = d3.select(d3Container.current);
let margin = { top: 20, right: 20, bottom: 50, left: 70 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// set the ranges
let x = d3
.scaleTime()
.domain(d3.extent(data, (d) => timeFormat(d.timestamp)))
.range([0, width]);
let y = d3
.scaleLinear()
.domain([0, d3.max(data, (d) => d.loadAverage)])
.nice()
.range([height, 0]);
// Parse the date
let parseTime = d3.timeParse("%s");
let timeFormat = d3.timeFormat("%M:%S");
// Constructing the line
const myLine = d3
.line()
.x((d) => {
const convertedTime = parseTime(d.timestamp);
return x(convertedTime);
})
.y((d) => {
return y(d.loadAverage);
});
svg
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg
.select("svg")
.selectAll("path")
.data([data])
.join("path")
.attr("d", (value) => myLine(value))
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round");
// Add the x Axis
svg
.select("svg")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add the y Axis
svg
.select("svg")
.append("g")
.call(d3.axisLeft(y).tickFormat(timeFormat).ticks(10));
}, [data]);
This is my first time using D3, any help would be greatly appreciated !
Edit: here's what I tried so far
// Constructing the line
const myLine = d3
.line()
.x((d) => {
const convertedTime = new Date(d.timestamp);
return x(convertedTime);
})
.y((d) => {
return y(d.loadAverage);
});
Even tried to return convertedTime wrapped up by parsetime like so parsetime(convertedTime) Didn't work either.
I think you have a problem in Initializing x scale domain
// set the ranges
let x = d3
.scaleTime()
// ⬇️ here is the issue, just get rid of timeFormat
.domain(d3.extent(data, (d) => timeFormat(d.timestamp)))
.range([0, width]);
the scaleTime expect the domain to be a [Date|number, Date|number], you are using timeFormat which convert number|Date into a string based on the given format.
Try to use this instead:
let x = d3
.scaleTime()
.domain(d3.extent(data, (d) => d.timestamp))
.range([0, width]);
// The short vesion
let x = d3.scaleTime(d3.extent(data, (d) => d.timestamp), [0, width])
Constructing the line
const myLine = d3
.line()
.x((d) => x(d.timestamp))
.y((d) => y(d.loadAverage));
If you need to convert timestamps into Dates, you can map the whole data array
data = data.map(d=> d.timestamp = new Date(d.timestamp), d)
I am trying to make a multi-line chart with d3.js in react. The plot looks fine and comes up well, but the gridlines are not aligned sometimes. It is very random, and sometimes some graphs have aligned gridlines, some don't.
This is how some of them look:
I have this code for my gridlines:
svg
.append('g')
.attr('class', 'grid')
.attr('transform', `translate(0,${height})`)
.call(
d3.axisBottom(xScale)
.tickSize(-height)
.tickFormat(() => ""),
);
svg
.append('g')
.attr('class', 'grid')
.call(
d3.axisLeft(yScale)
.tickSize(-width)
.tickFormat(() => ""),
);
I followed this example: https://betterprogramming.pub/react-d3-plotting-a-line-chart-with-tooltips-ed41a4c31f4f
Any help on how I can align those lines perfectly would be appreciated.
You may consider niceing your y-scale so that minima and maxima of your data sets are rounded down/ up such that the ticks are equally spaced.
In your tutorial this bit of code:
const yScale = d3
.scaleLinear()
.range([height, 0])
.domain([0, yMaxValue]);
Can become:
const yScale = d3
.scaleLinear()
.range([height, 0])
.domain([0, yMaxValue])
.nice(); // <--------------------------- here
Here's a basic example of using nice on an x-scale where the first example is 'not nice' and the second is 'nice'.
// note gaps of 10 between data points
// apart from first and last where gap is different
const data = [3, 4, 14, 24, 34, 44, 47];
// svg
const margin = 20;
const width = 360;
const height = 140;
const svg = d3.select("body")
.append("svg")
.attr("width", width + margin + margin)
.attr("height", height + margin + margin);
// scale without 'nice'
const xScale1 = d3.scaleLinear()
.range([0, width])
.domain(d3.extent(data));
// scale with nice
const xScale2 = d3.scaleLinear()
.range([0, width])
.domain(d3.extent(data))
.nice();
// plot axes with both scales for comparison
// not 'nice'
svg.append("g")
.attr("transform", `translate(${margin},${margin})`)
.call(d3.axisBottom(xScale1));
// 'nice'
svg.append("g")
.attr("transform", `translate(${margin},${margin + 50})`)
.call(d3.axisBottom(xScale2));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
I've created a simple bar chart in D3, but the the bars are being created from top to bottom, instead of bottom to top. Below is the xScale, yScale and bar generation code:
var xscale = d3.scale.linear()
.domain([0, data.length])
.range([0, 240]);
var yscale = d3.scale.linear()
.domain([0, 100])
.range([0, 240]);
var bar = canvas.append('g')
.attr("id", "bar-group")
.attr("transform", "translate(10,20)")
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr("class", "bar")
.attr("height", function(d, i) {
return yscale(d);
})
.attr("width", 15)
.attr("x", function(i) {
return yscale(i);
})
.attr("y", 0)
.style("fill", function(i) {
return colors(i);
});
Tried to swap yScale ranges but no success. Here is the fiddle.
In the SVG coordinates system, the origin (0,0) is at the top left corner, not the bottom left corner.
Besides that, your SVG has only 150px heigh. Thus, change your scale:
var yscale = d3.scale.linear()
.domain([0, 100])
.range([0, 150]);
And the math of your bars:
.attr("height", function(d, i) {
return yscale(d);
})
.attr("y", function(d){
return 150 - yscale(d)
})
Here is your updated fiddle: https://jsfiddle.net/bga2q72f/
PS: don't use the same scale for the x and y positions. It's quite confusing.
I built a graph in D3, to show spending based on date time and amount of spending, but I can't dynamically set tickValues() on my time.scale to show only ticks for data points.
My scale set up is:
var dateScale = d3.time.scale()
.domain(d3.extent(newData, function(d) { return d.Date; }))
.range([padding, width - padding]);
var amountScale = d3.scale.linear()
.domain([0, d3.max(newData, function(d) { return d.Amount; })])
.range([window.height - padding, padding]);
// Define date Axis
var dateAxis = d3.svg.axis().scale(dateScale)
.tickFormat(d3.time.format('%a %d %m'))
.tickSize(100 - height)
.orient("bottom");
// Draw date Axis
svg.append("g")
.attr({
"class": "axis date-axis",
"transform": "translate(" + [0, height -padding] + ")"
}).call(dateAxis);
// Define amount Axis
var amountAxis = d3.svg.axis().scale(amountScale)
.tickSize(1)
.orient("left");
// Draw amount Axis
svg.append("g")
.attr({
"class": "axis amount-axis",
"transform": "translate(" + padding + ",0)"
}).call(amountAxis);
I've tried to set
dateAxis.tickValues(d3.extent(newData, function(d) { return d.Date; }))
but this only returns min and max value for date axis.
Also tickValues() doesn't accept newData itself - what else I can try here?
I want to achieve this:
to have only ticks highlighted, associated with corresponding data.
I ended up with creating new array of all date points out of my data, to pass it to tickValues() method. My code now is:
var newData = toArray(uniqueBy(data, function(x){return x.Date;}, function(x, y){ x.Amount += y.Amount; return x; }));
// Create array of data date points
var tickValues = newData.map(function(d){return d.Date;});
// Sorting data ascending
newData = newData.sort(sortByDateAscending);
var dateScale = d3.time.scale()
.domain(d3.extent(newData, function(d) { return d.Date; }))
.range([padding, width - padding]);
var amountScale = d3.scale.linear()
.domain([0, d3.max(newData, function(d) { return d.Amount; })])
.range([window.height - padding, padding]);
// Define date Axis
var dateAxis = d3.svg.axis().scale(dateScale)
.tickFormat(d3.time.format('%d %m %Y'))
.tickValues(tickValues)
.orient("bottom");
So now whole graph looks as:
I found this SO (#AmeliaBR) answer explaining tickValues() function, and here is documentation for it too.
Solution:
I spent a little time looking into this, and came up with a decent solution. Lars is right, d3.js doesn't really allow for what I wanted, but with a little layering, it worked out. Basically, I created a new SVG to contain only the axis, overlaid it on the actual graph and tied the two zoom scales together. Here is the code:
var x = d3.scale.linear()
.nice()
.domain([-1, 1])
.range([0, w]);
var xScale = d3.scale.linear()
.nice()
.domain([0, 1])
.range([0, 230]);
var xAxis = d3.svg.axis()
.scale(xScale)
.ticks(3)
.tickSize(7);
var y = d3.scale.linear()
.nice()
.domain([1, -1])
.range([h, 0]);
/* Control panning and zooming */
var zoom = function() {
if( d3.event ) {
zm.scale(d3.event.scale).translate(d3.event.translate);
za.scale(d3.event.scale); // don't translate so the axis is fixed
}
/* Do other zoom/pan related translations for chart */
// Update x-axis on pan and zoom
vis2.select(".xaxis")
.transition()
.ease("sin-in-out")
.call(xAxis);
vis.selectAll("line.link")
.attr("x1", function(d) { return x(parseFloat(d.source.x)); })
.attr("y1", function(d) { return y(parseFloat(d.source.y)); })
.attr("x2", function(d) { return x(parseFloat(d.target.x)); })
.attr("y2", function(d) { return y(parseFloat(d.target.y)); });
};
var zm = d3.behavior.zoom().x(x).y(y).scaleExtent([-Infinity, Infinity]).on("zoom", zoom);
var za = d3.behavior.zoom().x(xScale).scaleExtent([-Infinity, Infinity]).on("zoom", zoom);
force = d3.layout.force()
.gravity(0)
.charge(-5)
.alpha(-20)
.size([w, h]);
nodes = force.nodes();
links = force.links();
vis = d3.select(CHART).append("svg:svg")
.attr("width", w)
.attr("height", h)
.call(zm);
vis.append("rect")
.attr("class", "overlay")
.attr("width", "100%")
.attr("height", "100%");
vis2 = vis.append("svg:svg")
.attr("width", 300)
.attr("height", 30)
.call(za);
vis2.append("svg:g")
.attr("class", "xaxis")
.attr("transform", "translate(20,10)")
.call(xAxis);
vis2.append("rect")
.attr("class", "overlay")
.attr("width", "100%")
.attr("height", "100%");
force.on("tick", zoom);
The result (with some additional CSS, of course) looks something like this, where the scale adjusts automatically as the user zooms in and out:
http://i.imgur.com/TVYVp4M.png
Original Question:
I have a chart in D3js that displays a scale along the X-axis and appropriately updates as I zoom in and out. However, rather than having the entire bottom of the chart be a scale, I'd like to display the scale as more of a legend, like a distance scale on a map (ex. http://2012books.lardbucket.org/books/essentials-of-geographic-information-systems/section_06/91302d9e3ef560ae47c25d02a32a629a.jpg). Is this possible?
Snippet of relevant code:
var x = d3.scale.linear()
.nice()
.domain([-1, 1])
.range([0, w]);
var xAxis = d3.svg.axis()
.scale(x);
var zoom = function() {
vis.selectAll("g.node")
.attr("transform", function(d) {
return "translate(" + x(parseFloat(d.x)) + "," + y(parseFloat(d.y)) + ")";
});
// Update x-axis on pan and zoom
vis.select(".xaxis")
.transition()
.ease("sin-in-out")
.call(xAxis);
};