last day (15 days later) » 

19:17
0
A: Use D3.js single line graph to display same date but different temperatures

iulianYou can provide specific tick values to be displayed on a d3 chart. First, you need to get the list of tick values you want to display. After you've loaded the csv and processed it, extract the tick values and assign them to your xAxis: d3.csv("data.csv", function(error, data) { data.forEa...

Thank you! Can I ask you to update my code to reflect your suggestions? I am confused on where to place the tickValues line and do I just replace the old xAxis variable declaration with what you provided? Thanks again!
@cpcdev I've edited my answer to be more specific. the code goes line by line
Thank you! I placed the var tickValues line correctly but xAxis is still having problems. I updated my original post to show you the xAxis code I changed. What am I missing here?
@cpcdev you've commented the orient('bottom') as well. Remove only the ticks from your current xAxis definition. THEN, inside your d3.csv() call, after your data.forEach code, add the code from my answer exactly as it is. You need to define the tickValues after you have loaded the data and the you update your xAxis with tickValues
@cpcdev leave your xAxis definition as it was initially (without the tickValues and tickFormat), only remove the ticks from it.
I updated the original code based on your suggestions. Unfortunately there still seems to be something incorrect... by remove "ticks" from the .orient line did you mean remove it altogether or replace it with tickValues? Even when I replace it with .orient("bottom").tickValues(5); something is wrong it seems
19:17
does the console show any errors?
Console errors: mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create d3.v3.min.js:3:10379 The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. index.html TypeError: n is null
does it show on which line the error occurs?
Hi. Thanks for your help
no prob
ill pastebin the full code for you
19:19
(y)
put the meta tag outside the head by accident
on your 105th line, put this code:
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom");
and refresh the page
done.. blank
does it work?
it does seem to populate the div for the chart (height and width.. but no graph displayed)
I had it set to .orient("bottom"); previously.. then I tried .orient("bottom").tickValues(5); with same results
Heres the output in inspector:

<svg height="270" width="600"><g transform="translate(50,30)"><path d="MNaN,27.801492537313422LNaN,40.808955223880595LNaN,0" class="line"></path><g transform="translate(0,210)" class="x axis"><g style="opacity: 1;" class="tick"><line></line><text></text></g><path class="domain"></path></g></g></svg>
19:27
in your data.forEach try to create a new Date() instead of parsing it. In your path svg element, the line has NaNs, which mean that there's a problem with your x values.
data.forEach(function(d) {
d.date = new Date(d.date);
d.close = +d.close;
});
Does this line affect it at all? var parseDate = d3.time.format("%d-%b-%y %H").parse;
Ok I updated the forEach function and a blank graph displays now.. the axises are both showing NaN
any errors in console?
Unexpected value translate(NaN,0) parsing transform attribute.
are the times representing %H formatted correctly? according to github.com/mbostock/d3/wiki/Time-Formatting
the %H represents hour. it is correct.
on what line do you have this `translate(NaN, 0)?
d3.v3.min.js: 2575
19:37
can you give me your data.csv? I will try to see it locally on my computer
date,close
1-May-12 06:00,58.13
1-May-12 06:30,53.98
1-May-12 07:00,67.00
I cant upload it unfortunately.. the connection i have is restricting file uploads for some reason
var parseDate = d3.time.format("%e-%b-%y %H:%M").parse;
the formatting indeed was wrong
your day is not zero padded, hence you should use %e instead of %d
and in your data.forEach restore the d.date = parseDate(d.date);
it run on my machine
perfect! runs on mine now!
congrats!
i'll edit my answer to include the parser as well
thank you SO MUCH!
I have much to learn with d3
These charts are awesome though
19:45
I'm also learning a lot while creating d3 visualizations.
where you from?
The practice will help you understand the concepts better, so, keep up the enthusiasm and practice!
Republic of Moldova
have you heard about it?
No, I just looked it up though.. cool
I have a friend in Siberia.. is that close?
I am from California
well, thanks again my friend
19:48
i think it's around 5000 miles away )
haha yes looks to be
you are welcome
keep up the good work!
cheers!
see ya
20:23
Hi can I ask you one more question?
I am curious how to replicate this graph. So I can have two.

last day (15 days later) »