score:10

There's nothing special about using negative values for your axes - you should simply be using linear scales for your axes, and setting the domain to `[min, max]`

, where `min`

might well be negative.

See a working version of your code here: http://jsfiddle.net/nrabinowitz/qN5Sa/

A few notes on this:

You should definitely use linear scales for a scatterplot, unless you want more of a matrix. A standard x-scale might look like this:

`var xScale = d3.scale.linear() .domain([-5, 5]) .range([0,w]);`

The

`d3.svg.axis()`

component includes an`.orient()`

setting - by default, this is`"bottom"`

, i.e. a horizontal axis with numbers below the line. To make a correctly oriented y-axis, use`.orient('left')`

.I didn't include the code to determine the min/max domain for each axis based on your data, because I figured it would complicate the example. But you can do this fairly easily if you don't know the bounds of your data:

`// assuming data like [[x0,y0], [x1,y1]] var xmin = d3.min(data, function(d) { return d[0] }), xmax = d3.max(data, function(d) { return d[0] }), ymin = d3.min(data, function(d) { return d[1] }), ymax = d3.max(data, function(d) { return d[1] });`

Source: stackoverflow.com

#### Related Query

- How can I plot positive and negative values for both axes in a scatter plot with d3?
- Special donut chart with different rings/arcs for positive and negative values
- Using d3.js is there a way to zero align two Y Axes with positive and negative values
- How to draw a scatter plot with multiple y values for each x value?
- d3.js histogram with positive and negative values
- Make a chart with area charts having both positive and negative y axis in dc or d3.js
- d3.js stacked bar chart with positive and negative values
- D3 bar chart not working properly with all negative and positive values
- How can i bind an json data with a key and Name for display
- Avoid negative axes values for dc powered d3 bubble chart with crossfilter
- How do I plot data on different x-axes and scales with d3.js? And keep it linked for brushes/tooltips?
- dc.js Scatter Plot with multiple values for a single key
- D3 - Chart with positive and negative values
- d3.js horizontal bar graph with positive and negative values - move y axis labels to far left side of graph
- In d3 how can you format a date with single digits for month and year if they are under t0?
- Ploting Scales and Axes using d3.js code in Google Datastudio for scatter plot
- C3.js Scatter plot - how to associate third data (additional value) as part of original column data for callbacks to set radius and display in tooltip
- D3: Create a continuous color scale with many strings/inputs for the range and dynamically changing values of the domain
- MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?
- Using D3 transition method with data for scatter plot
- How can I show a graph using d3 force layout with initial positions set and no movement at all?
- how do you draw linear line in scatter plot with d3.js
- How can I connect two parent node into one child node and how to make a tooltip for each node in the tree pragmatically? in D3 js (SVG)
- How to check d3 js force graph for nodes with no links and remove them?
- How to write a d3 positive and negative logarithmic scale
- How can I color ocean with topojson in d3 when I have coordinate info for land?
- With D3, how can I set attribute ("fill", "none") of axis path and line, but not text (without editing stylesheet)
- How do I implement d3's enter update exit pattern for an area chart with focus and context?
- Create an interactive 3d scatter plot with D3.js and Three.js with json data
- Moving scatter plot circles with context zooming and brush in D3

#### More Query from same tag

- Using D3 in Rails ActiveAdmin
- DC.js series chart does not respond to colorAccessor logic
- How show jsPDF data on image
- bootstrap dropdown in svg with d3
- Programmatically control brush and pass relevant information
- Changing constant to variable in a comparison producing unexpected results
- D3.js Unable to get map zooming to work in Webkit browsers
- How to get nav bar always in foreground also before svg?
- D3 triangle positioning to an exact point
- SVG clip-path works in Chrome, but not in Firefox or Safari
- Zoom with Axis: undefined is not an object (evaluating 'd3.event.transform')
- D3js: blocks with text inside & hover to show more text
- D3 Line Chart - Uncaught TypeError: Cannot read property 'length' of undefined
- D3 Bar Chart, bars not showing, axis on top
- Append child only to new elements, D3.js
- D3js chart not rendering correctly on client, D3 source code stored on server
- How to find out about loaded d3.js extensions and their versions at runtime?
- D3 Logarithmic Tick Labels as Powers of 10
- Adding transition animation breaking tooltip mouseover
- d3js v4 can't remove old data chart after update
- Add Tooltip on Scatter points, error is generated for D3.js Version 4
- Getting average of object within an array
- how to set the domain and scale on an axis on a nvd3.js multiBarChart
- invalid date at d3.scaleTime()
- Linear scale with labels in D3
- D3.queue -- understanding program flow
- d3 - Is there any possibilities of adding brush event to difference chart?
- multiple versions of a script on the same page (d3.js)
- .delay() is not a function in d3
- D3 Bar graph mirror