I am new to D3.js, pardon me if my understanding is wrong.
I have an equation for a straight line in a log-log plot, Log(Y)=Log(C) + Log(X), C is constant and user defined.
Is there a way to draw the straight line in D3 purely from the equation?
Thank you.
No this isn't possible exactly as you'd like in D3. D3 is less about mathmatical calculation & visualization compared to other tools (R, MatLab) and is more about binding data sets to DOM and handling animation between data sets.
That being said, if you calculate the X and Y values for the equation then you can plot those values easily. I've seen D3 used like this, with input boxes for C and then plotting across a range.
Following your comment here's an example:
const C = 1;
const xScale = d3.scaleLinear()
.domain([0, 100])
.range([0, 1000]); // pixels
const yScale = d3.scaleLinear()
.domain([0, 100])
.range([0, 1000]);
const line = d3.line()
.x(d => xScale(d))
.y(d => yScale(Math.log(C) + Math.log(d)));
const values = [0, 50, 100];
d3.selectAll("path")
.datum(values)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("d", line);
Note that the key to pumping in the equation is defining how to generate the y value given the x in the line generator, covered by this line:
.y(d => yScale(Math.log(C) + Math.log(d)))
Related
In this D3.js version 6.7 bar chart I am trying to align the x axis to show the categories and show the y axis to start at 0. Extending the height of the svg and changing the transforms does not appear to be working. How can I make the x axis categories appear under the bars and make the y axis start at 0? Thank you.
async function barChart() {
const dataset = await d3.csv("https://assets.codepen.io/417105/bodypart-injury-clean.csv");
console.log(dataset);
const width = 400;
const height = 400;
const margin = {top:20, right:30, bottom:30, left:40};
const canvas = d3.select("#viz")
.append("svg")
.attr("width", width)
.attr("height", height);
const wrapper = canvas.append("g").style("transform",`translate(${margin.left}px,${margin.top}px)`);
const xScale = d3.scaleBand()
.domain(["Arm","Eye","Head","Hand","Leg","Other"])
.range([0,width - margin.left])
.padding(0.2);
const yScale = d3.scaleLinear()
.domain(d3.extent(dataset, d => +d.Total))
.range([height,0]);
console.log(xScale("Leg"));
console.log(yScale(1700));
const barRect = wrapper.append("g")
.selectAll('rect')
.data(dataset)
.join('rect')
.attr('x', d => xScale(d.BodyRegion))
.attr('y', d => yScale(+d.Total))
.attr('width', xScale.bandwidth())
.attr('height', d => height - yScale(+d.Total))
.attr('fill', 'teal');
const yAxis = d3.axisLeft().scale(yScale);
wrapper.append("g").call(yAxis);
const xAxis = d3.axisBottom().scale(xScale);
wrapper.append("g").attr('transform', `translate(0,${height-margin.bottom})`).call(xAxis);
}
barChart();
The Y scale
The scale's domain sets the extent of the scale in your data's units, the scale's range sets the scale's extent in scaled units (pixels here). The first value in the domain is mapped to the first value in the range.
Your domain is set to:
.domain(d3.extent(dataset, d => +d.Total))
d3.extent returns the minimum and maximum matching values, as your minimum value is not zero, your scale's domain does not start at 0. If you want to set the scale's domain's lower bounds to zero, you need to set that, like so:
.domain([0,d3.max(dataset,d=> +d.Total)])
.domain/.range take arrays, these arrays for a linear scale must have the same number of elements
But you also don't want your scale's range to be [height,0] because of margins:
.range([height-margin.bottom,margin.top])
You want the data to be scaled from between within the two margins, height-margin.bottom is the furthest down the page you want to plot data, and margin.top is the furthest to the top of the SVG you want to plot data.
Now your bars are a bit off, that's because you aren't accounting for the margin in the height attribute:
.attr('height', d => height - yScale(+d.Total))
you need:
.attr('height', d => height - margin.bottom - yScale(+d.Total))
Note, a common approach to avoid having to constantly reference the margin is to apply the margin to a parent g and have width height reflect the size of the plot area within that g (not the entire SVG).
The X Axis
Now that the y scale is configured, let's look at the x axis. All you need to do here is boost the bottom margin: the text is appended (you can inspect the page to see it is there, just not visible). Try margin.bottom = 50.
I'm here referring to this reproducible example
http://bl.ocks.org/jensgrubert/7789216
but applied to the following dataset (csv)
"Q1","Q2","Q3","Q4"
0.43,30,0.42,0.3
19,2,15,14
41,46,28,100
8,1,0.45,0.05
0.71,0.68,5,0.4
21,14,7,23
0.63,0.11,0.47,0.22
10,15,0.87,0.4
16,16,18,14
0.01,0.72,0.31,0.28
Given that I want to have numbers with decimals I have been changing the original code to what follows:
var v1 = Math.round(x.Q1*100)/100,
v2 = Math.round(x.Q2*100)/100,
v3 = Math.round(x.Q3*100)/100,
v4 = Math.round(x.Q4*100)/100;
And given that I want to change the y-axis into a logarithm scale I've been changing the original code to what follows:
// the y-axis
var y = d3.scale.log()
.domain([0.001, 100])
.range([height + margin.top, 0 + margin.top]);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickValues([0.001, 0.01, 0.1, 1, 10, 100])
Now my problem is that the box and wiskers seem not to be correctly aligned with the y scale: see for example the wrong placement of 1st quartile, median, 3rd quartile and so on...;
Is that probably due to the log transformation of data?
Do I need to transform the data itself as well before plotting them?
And eventually how to properly do all that?
I've also a second (apparently minor) issue: how to rotate the labels of the x-axis (QI, Q2, Q3, Q4)?
thank you
As for your minor issue in rotating the x-axis labels (QI, Q2, Q3, Q4) try this:
d3.selectAll('.x.axis .tick text')
.attr('transform', 'rotate(-90)')
.attr('text-anchor', 'end')
.attr('dx', '-1em')
.attr('dy', '-0.5em')
In my d3 line chart, I only want ticks for the plotted data. This proves to be a issue with time stamps though as I get:
d3.js:7651 Error: <g> attribute transform: Expected number, "translate(NaN,0)"..
I thought to convert the strings to numbers in the tickValues array but I can not since it's got a colon. Any ideas?
// Hard coded data
scope.data = [
{date: '12:00', glucoseLevel: 400},
{date: '15:00', glucoseLevel: 200},
{date: '18:00', glucoseLevel: 300},
{date: '23:00', glucoseLevel: 400}
];
var parseDate = d3.timeParse('%I:%M');
scope.data.forEach(function(d) {
d.date = parseDate(d.date);
d.glucoseLevel = +d.glucoseLevel;
});
var x = d3.scaleTime()
.range([0, width]);
var xAxis = d3.axisBottom(x)
.tickValues(['12:00', '15:00', '18:00', '23:00']);
// Add the X Axis
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
You are specifying X values as times, so you must also specify the X-axis tick values as times.
As you already have the X values in the correct format, you can just write
var xAxis = d3.axisBottom(x)
.tickValues(scope.data.map(function (d) { return d.date; }));
.tickValues() isn't for setting the tick labels, it's for setting where on the axis the ticks appear. If you want the tick labels formatted in some way, specify a formatter using tickFormat, for example:
var xAxis = d3.axisBottom(x)
.tickValues(scope.data.map(function (d) { return d.date; }))
.tickFormat(d3.timeFormat("%H:%M"));
I've used the format string %H:%M instead of %I:%M as %I is hours in the range 01-12 whereas %H uses the 24-hour clock. For consistency I'd recommend changing your time parsing function to d3.timeParse('%H:%M'), although parsing a time with the hours greater than 12 using %I seems to work.
Finally, you'll also need to set the domain of your scale object x, for example:
var x = d3.scaleTime()
.domain([parseDate('12:00'), parseDate('23:00')])
.range([0, width]);
The two values passed to domain are the minimum and maximum X values to use for the axis. I've used the minimum and maximum values of your data, but I could have chosen a different time range (e.g. 00:00 to 24:00) as long as it contained all of your data points.
Here is a jsbin of what I have so far.
My sine wave is not going to the y value of 1 or -1, i.e the amplitude.
My yScale is defined like this:
const yScaleAxis = d3.scale.linear()
.domain([-1, 1])
.range([radius, -radius]);
And I am creating the values like this:
const xValues = [0, 1.57, 3.14, 4.71, 6.28]; // 0 to 2PI
const sineData = xValues.map((x) => {
console.log(Math.sin(x));
return {x: x, y: Math.sin(x)};
});
The values for y are logged as:
0
0.9999996829318346
0.0015926529164868282
-0.999997146387718
-0.0031853017931379904
I then use the scale to set the values:
const sine = d3.svg.line()
.interpolate('basis')
.x( (d) => {return xScaleAxis(d.x);})
.y( (d) => {return yScaleAxis(d.y);});
circleGroup.append('path')
.datum(sineData)
.attr('class', 'sine-curve')
.attr('d', sine);
But as you can see in the jsbin the amplitude of the sine wave is not reaching 1 or -1 and I am not sure why.
Change the line interpolation method to monotone, basis corresponds to a B-spline
More info about the interpolation options provided by d3
Folks-
I've been trying to set the d3.scale.linear.domain x axis value manually, using Mike Bostock's simple bar chart: http://bl.ocks.org/mbostock/raw/2368837/
var x = d3.scale.linear()
.domain([-100, 200]) //this line added
.range([0, width])
I would expect this to yield a an x axis with values -100 to 200. Instead it yields -30 to 10, as before, and the chart doesn't change. Any ideas?
Thanks,
RL
The domain is set again inside the d3.tsv callback:
x.domain(d3.extent(data, function(d) { return d.value; })).nice();
If you want to change it, you need to delete that line.