I'm playing around with different kinds of D3 charts and for this particular example, I can't seem to get the grid lines to show up. I've compared it to a similar example I have where the lines show up but I still can't make sense of it. Here is a jsfiddle of what I have at the moment.
I'm mainly interested in the horizontal grid lines so here is the code for when I add the y-axis:
var gy = svg.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.call(yAxis);
gy.selectAll('g').filter(function(d) {
return d;
})
.classed('minor', true);
You can use the tick size to set the size of the horizontal grid lines. Width should be the same width as your x-axis * -1:
var yAxis = d3.svg.axis()
.scale(yScale)
.tickFormat(formatNumber)
.tickSize(-width)
.ticks(3)
.orient('left');
Related
I'm working on simple horizontal bar chart using vue and d3. I wanna customize my axis labels along vertical axis. Now my code where I specify what to put in every label is looking like this:
let yAxis = d3.axisLeft()
.scale(this.yScale)
.tickSize(0)
.tickPadding(4)
.tickFormat((d, i) => { return this.data[i].country + " " + this.data[i].value })
I'd like my labels to look this way:
country
value
Country1
10.2
Country2
200.3
Country2
3000.4
i.e. country must be aligned left, while value must be right. Besides value must be in bold. The problem is though that it seems as if .tickFormat doesn't accept any html tags
Here is an example of styling the axis labels:
const svg = d3.select("svg")
.attr("width", 1000)
// Create the scale
const x = d3.scaleLinear()
.domain([0, 100]) // This is what is written on the Axis: from 0 to 100
.range([100, 800]); // This is where the axis is placed: from 100px to 800px
// Draw the axis
svg
.append("g")
.classed('x-axis', true)
.attr("transform", "translate(0,50)") // This controls the vertical position of the Axis
.call(d3.axisBottom(x));
svg.select('.x-axis')
.selectAll('text')
.style('fill', 'red')
.style('font-size', '32px')
.attr('y', 20)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>
I'm trying to create a heat map.
The code is on Codepen: https://codepen.io/imestin/pen/qBOpodX?editors=1010
My problem is, that the axes are not showing on the SVG canvas.
Inspecting it with web developer tools, I can see the elements.
These are the lines that I think are important in drawing the axes (for the x-axis):
let minYear = d3.min(data, d => d.year );
let maxYear = d3.max(data, d => d.year );
let xScale = d3.scaleLinear()
.domain(minYear,maxYear)
.range(0,canvasX);
//xAxis - needs xScale
let xAxis = d3.axisBottom(xScale);
//X-axis draw
Canvas.append("g")
.attr("id","x-axis")
.attr("class","tick")
.attr("transform", "translate(" + (edge) + ", " + (canvasY) + ")")
.call(xAxis)
Other elements are drawing correctly, basic SVG drawing is working.
The xScale domain and range need an array of values, for example:
xScale = d3.scaleLinear()
.domain([minYear,maxYear])
.range([0,canvasX]);
And secondly, the axis is positioned off the bottom of canvas, so it needs to adjusted up, for example:
Canvas.append("g")
.attr("id","x-axis")
.attr("class","tick")
.attr("transform", "translate(" + (edge) + ", " + (canvasY - 20) + ")")
.call(xAxis)
I have a straightforward axis setup:
var timelines = g2.selectAll(".timelines").data(data);
var xScale = d3.scale.ordinal()
.domain(dataset)
.range([0,axisSpacing.width]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(1)
.tickFormat(axisTicks)
.outerTickSize(0)
.tickSize(0);
timelines.enter().append("g")
.attr("class", "axis")
.attr('transform',function(d,i) { return "translate(" + axisSpacing.left + "," + (axisSpacing.top + (i * spacing)) + ")"})
.call(xAxis)
.selectAll("text")
.attr("dy","20px")
.attr('class',"axis-text")
I'd like to apply multiple styles to the tick texts. One style for the first tick; another style, for ticks thereafter. How can I achieve this?
I decided upon this solution:
d3.selectAll(".axis-text").style("text-anchor",function(d,i){ return i%2 ? "end" : "start"})
If you have two ticks on an axis, this places both tick labels on the inside of the axis length. See below:
I work with D3JS and I want an axis in x with this kind of values : 125, 250, 500, 1000 ... So multiply by 2 my values each time.
So I tried a Quantize Scales like this:
var qScale = d3.scale.quantize(2)
.domain([0, 8000])
.range([0, 500]);
And I create my axis like that :
var xAxis = d3.svg.axis()
.scale(qScale);
But when I'm calling the axis with that code :
svg.append("g")
.attr("transform", "translate(" + padding + "," + (ChartHeight - padding) + ")")
.attr("class", "axis")
.call(xAxis);
I have the following error :
Object doesn't support property or method 'rangeBand' (I develop on Visual Studio 2012)
Any idea ?
EDIT: here the full code code
I'm looking for an example of how to draw a scatterplot in D3.js.
I haven't been able to find a simple example by looking through the official D3.js examples (impressive though they are). I just want to know how to:
draw and label the x- and y-axes
draw scatter points on the graph.
I did find this example in this D3 reusable library, but it is much more complex than I need, with external files that make it hard to pull out the essential points. Could anyone point me at a simple scatterplot example to get started?
Thanks very much.
This should get you started. You can see it in action at http://bl.ocks.org/2595950.
// data that you want to plot, I've used separate arrays for x and y values
var xdata = [5, 10, 15, 20],
ydata = [3, 17, 4, 6];
// size and margins for the chart
var margin = {top: 20, right: 15, bottom: 60, left: 60}
, width = 960 - margin.left - margin.right
, height = 500 - margin.top - margin.bottom;
// x and y scales, I've used linear here but there are other options
// the scales translate data values to pixel values for you
var x = d3.scale.linear()
.domain([0, d3.max(xdata)]) // the range of the values to plot
.range([ 0, width ]); // the pixel range of the x-axis
var y = d3.scale.linear()
.domain([0, d3.max(ydata)])
.range([ height, 0 ]);
// the chart object, includes all margins
var chart = d3.select('body')
.append('svg:svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.attr('class', 'chart')
// the main object where the chart and axis will be drawn
var main = chart.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('width', width)
.attr('height', height)
.attr('class', 'main')
// draw the x axis
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom');
main.append('g')
.attr('transform', 'translate(0,' + height + ')')
.attr('class', 'main axis date')
.call(xAxis);
// draw the y axis
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
main.append('g')
.attr('transform', 'translate(0,0)')
.attr('class', 'main axis date')
.call(yAxis);
// draw the graph object
var g = main.append("svg:g");
g.selectAll("scatter-dots")
.data(ydata) // using the values in the ydata array
.enter().append("svg:circle") // create a new circle for each value
.attr("cy", function (d) { return y(d); } ) // translate y value to a pixel
.attr("cx", function (d,i) { return x(xdata[i]); } ) // translate x value
.attr("r", 10) // radius of circle
.style("opacity", 0.6); // opacity of circle
Used like this:
<!DOCTYPE html>
<html>
<head>
<title>The d3 test</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js" charset="utf-8"></script>
</head>
<body>
<div class='content'>
<!-- /the chart goes here -->
</div>
<script type="text/javascript" src="scatterchart.js"></script>
</body>
</html
NVD3.js has great examples. You will need to include their library also or take a look at their implementation. Take a look at this example of scatterplot: http://nvd3.org/livecode/#codemirrorNav
Take a look at this example of scatterplot with C3.js (D3-based): http://c3js.org/samples/chart_scatter.html
You can chang radius size like this : http://grokbase.com/t/gg/c3js/14a7jfj28c/bubble-chart-with-changing-radius-size-in-c3-js