How to reverse data-values when axis domain is reversed.

[Robert]

Hi there,

I'm quite new to d3.js and have attempted to learn it through trial
and error for a project that is due very soon and would appreciate any
quick help that anyone could assist in providing. =D

Currently I'm trying to create a bar chart with a y-axis that counts
from the bottom up. I realize that this reversed axis can only be
achieved through yvalue = d3.scale.linear().range([ totalheight ,
0]) . However, I do realized that after I tried it, my bar values end
up in reverse (meaning it displays the negative total of what was
supposed to be displayed as positive total)

I have tried many ways such as through svg's "transform" method to
'trick' the view of the graph, however the only output is a reverse
text that is done with scale(1,-1).

Correct display of bar values but wrong y-axis ( The 0 starts at the
top.. as suppose to start at the bottom)
http://cl.ly/BIOW

Correct display of y-axis but reversed bar values
http://cl.ly/BISF


I sincerely hope someone can help to give me tips on resolving this
problem. Thank you so much! =D

[Ian Johnson]

Here is an example where I make the range of my y scale go from 0 to totalHeight

http://bl.ocks.org/1320232

I then do totalHeight - y(d) whenever I need the top of the bar, and y(d) gives me the correct height of the bar.

You could also do the reverse, but you just have to be consistent.

Next time try posting your code to gist.github.com (make sure you name the file index.html)

and then use bl.ocks.org to share, this way it is easier to point out specific issues in your code (assuming you are able to share it :)

Ian

--
Ian Johnson

http://enja.org

[Mike Bostock]

Two other examples (area charts, but can be adapted to bar charts):

http://mbostock.github.com/d3/talk/20111018/#12
http://mbostock.github.com/d3/talk/20111018/#15

Mike

[Ian Johnson]

Yet more awesome slides, Mike!

Where was this talk? was it recorded?

[Robert Chai]

Hi Ian,

Thank you for your guidance.. I will need to spend some time to go
through it as I'm still learning to understand the codes. Thank you
for your pointers! I'll attempt to run it on gist.github.com and also
mainly to see whether I can get the axis up, as I didn't manage to see
the left axis on your left axis. So just a question, does the 0 start
from the bottom left or from the top left, as I noticed x =
d3.scale.ordinal().domain(d3.range(data.length)).rangeBands([ 0, w ], .
2) where your "Range" goes from [ 0 -> w ], meaning the 0 axis will
start from the top left.

However, I would need to start from the bottom left [ w -> 0 ], so if
the bars were to be drawn, it would be drawing the negative values,
instead of the positive values required.

So, I hope you may help clarify my doubts on the matter. Thank you so
much for assisting! =D


Regards,
Robert Chai

On Oct 28, 1:37 am, Ian Johnson <enja...@gmail.com> wrote:
> Here is an example where I make the range of my y scale go from 0 to

> totalHeighthttp://bl.ocks.org/1320232

[Robert Chai]

Hi Mike,

Many thanks for giving the supplementary links. Would have to spend
some time really understand what's going on. Do pardon me, as I'm
still learning at a slow pace, despite the schedule I have with my
project. Anyway, I would like to express my thanks for the great job
you have done with d3.js! It's absolutely awesome with the examples
shown, too bad I'm really too new to this.

Hope to gain more understanding for you and Ian as well! Many Thanks!
=D


Regards,
Robert Chai

[Ian Johnson]

In SVG 0,0 is in the top left. I start my bars from h - y(value) and each of them is y(value) in height. This makes them look like they start at the bottom when really they are starting at the top of each bar and being drawn "downward" (from the top of the screen down)

The scale you quote from 0 -> w is just in the x direction. If you want to draw something at the bottom of the screen you need to translate in the y direction (or set the y component). 

good luck!

[John Delacour]

At 14:43 -0700 30/10/11, Ian Johnson wrote:

>In SVG 0,0 is in the top left. I start my bars from h - y(value) and
>each of them is y(value) in height. This makes them look like they
>start at the bottom when really they are starting at the top of each
>bar and being drawn "downward" (from the top of the screen down)
>
>The scale you quote from 0 -> w is just in the x direction. If you
>want to draw something at the bottom of the screen you need to
>translate in the y direction (or set the y component).

I can't help with the d3 or Javascript because I'm just a lurker at
the moment hoping to glean what I need to get started, but I
regularly use cartesian coordinates in my drawings and here's a
simple example of how I combine figures and text in a cartesian
plane. Once you have established the matrix to put zero at the
bottom of the chart, then all y values for the figures will be normal
for the figures but, because the text is inverted by the cartesian
configuration, the y values for text elements need to be negative, so
a line at y=20 lines up with text at y=-20:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" /> <title>chart</title>
</head>
<svg height="405" width="405"
fill="none" stroke="navy" stroke-width=".1">
<g id="MAIN"
transform="matrix(4 0 0 -4 10 405)">
<rect x="0" y="2" width="98" height="98" fill="aliceblue" />
<path transform="translate(10 10)" d="
M 0 0 h 85
M 0 10 h 85
M 0 20 h 85
M 0 30 h 85
M 0 40 h 85
M 0 50 h 85" />
<g id="TEXT"
transform="scale(1 -1) translate(5 -8.8)"
style="stroke:none;fill:navy;font-size:3pt;">
<text y="0">0</text>
<text y="-10">10</text>
<text y="-20">20</text>
<text y="-30">30</text>
<text y="-40">40</text>
<text y="-50">50</text>
</g>
</g>
</svg>
</html>

JD

[Robert Chai]

Hi guys,

Just want to give a heads up of my project progress. I've recently
just completed the project that was assigned and I had successfully
implemented the right-side-up drawing of the bar chart. I guess the
problem is actually integrating properly of the drawing of the SVG
graphic. The current project is a simple attempt to implement 3 types
of visualizations, with thanks to d3.js; Bar chart, Line chart and Pie
chart.

Though there are some little animation bugs a little here and there,
but due to our constraint to prepare our project for a Poster Day
presentation deadline, priority of getting the project done was held
first. Thusm to give extra thanks for Mike Bostock of his efforts,
during our Poster Day, we were given a good opportunity to help
promote the existance of d3.js to our local community and some
visiting industrial partners and they were quite excited about the
technology and presentation that our project has brought forth, with
the help of d3.js.

Given so, I've hosted the site on my server, do drop by and provide
some comments on our project.

http://3angular.roberryarts.com

Once again, thank you Mike Bostock and Ian Johnson and John Delacour
for your assistance in helping break apart some of the basics for me
to better understand some foundation for me to carry out my project
tasks.

Cheers! =D

[Ian Johnson]

Nice job! Glad I could help a little :)

[Roopak Rajpal]

If i want to use hoverline on ordinal scale then it says x.invert() is not a function.....so what is the alternative for x.invert() for ordinal scales?