CODEWITHSUNDEEP
javascriptd3.js
cpcdev
cpcdev

Reputation: 1214

Use D3.js single line graph to display same date but different temperatures

I have this simple d3.js single line graph that is displaying multiple dates across the x-axis:

<script>

// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom");

var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);

// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });

// Adds the svg canvas
var svg = d3.select("#air_temp_chart")
.append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
.append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")");

// Get the data
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.close = +d.close;
});

var tickValues = data.map(function(d) { return d.date; });

xAxis
.tickValues(tickValues)
.tickFormat(d3.time.format('%H:%M'));

// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);

// Add the valueline path.
svg.append("path")
    .attr("class", "line")
    .attr("d", valueline(data));

// Add the X Axis
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

// Add the Y Axis
svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

});

data.csv:

date,close
1-May-12,58.13
30-Apr-12,53.98
27-Apr-12,67.00

I'd like to change the data so that the date is the same for all, but the times and temperature readings are different values.

I changed the time.format line to:

var parseDate = d3.time.format("%d-%b-%y %H").parse;

to include the times with the readings, but the graph breaks when I do this.

I'd like to use this data with the same date but different times and temperature readings:

1-May-12 06:00,58.13
1-May-12 06:30,53.98
1-May-12 07:00,67.00

How do I modify the x-axis code to work with the values above?

Upvotes: 0

Views: 433

Answers (1)

iulian
iulian

Reputation: 5812

You can provide specific tick values to be displayed on a d3 chart.

Firstly, correct your date parser:

var parseDate = d3.time.format("%e-%b-%y %H:%M").parse;  // %e instead of %d

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.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
    });
    var tickValues = data.map(function(d) { return d.date; });

    xAxis
        .tickValues(tickValues)
        .tickFormat(d3.time.format('%H:%M'));

Do not forget to remove the ticks on your current xAxis definition.

Upvotes: 1

Related Questions