Javascript – D3_ Add data value labels to multi line graph – Stack Overflow bitcoin exchange rate graph

I am using this multiline graph but so far have failed to generate data value labels on every tick (for every day).

Var margin = {top: 30, right: 40, bottom: 30, left: 50},

Width = 600 – margin.Left – margin.Right,

Height = 270 – margin.Top – margin.Bottom;

Var parsedate = d3.Time.Format(%d-%m-%y).Parse;

Var x = d3.Time.Scale().Range([0, width]);

Var y = d3.Scale.Linear().Range([height, 0]);

Var xaxis = d3.Svg.Axis().Scale(x)

.Orient(bottom).Ticks(7);

Var yaxis = d3.Svg.Axis().Scale(y)

.Orient(left).Ticks(7);

Var valueline = d3.Svg.Line()

.X(function(d) { return x(d.Date); })

.Y(function(d) { return y(d.Sev3); });

Var valueline2 = d3.Svg.Line()

.X(function(d) { return x(d.Date); })

.Y(function(d) { return y(d.Sev4); });

Var svg = d3.Select(body)

.Append(svg)

.Attr(width, width + margin.Left + margin.Right)

.Attr(height, height + margin.Top + margin.Bottom)

bitcoin exchange rate graph

.Append(g)

.Attr(transform, translate( + margin.Left + , + margin.Top + ));

// get the data

D3.Csv(data.Tsv, function(error, data) {

Data.ForEach(function(d) {

D.Date = parsedate(d.Date);

D.Sev3 = +d.Sev3;

D.Sev4 = +d.Sev4;

});

// 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 math.Max(d.Sev3, d.Sev4); })]);

Svg.Append(path) // add the valueline path.

.Attr(class, line)

.Attr(d, valueline(data));

Svg.Append(path) // add the valueline2 path.

.Attr(class, line)

.Style(stroke, red)

.Attr(d, valueline2(data));

Svg.Append(g) // add the X axis

.Attr(class, x axis)

.Attr(transform, translate(0, + height + ))

.Call(xaxis);

Svg.Append(g) // add the Y axis

.Attr(class, y axis)

.Call(yaxis);

Svg.Append(text)

.Attr(transform, translate( + (width+3) + , + y(data[0].Sev4) + ))

bitcoin exchange rate graph

.Attr(dy, .35em)

.Attr(text-anchor, start)

.Style(fill, red)

.Text(sev4);

Svg.Append(text)

.Attr(transform, translate( + (width+3) + , + y(data[0].Sev3) + ))

.Attr(dy, .35em)

.Attr(text-anchor, start)

.Style(fill, steelblue)

.Text(sev3);

});

Data.Tsv date,sev3,sev4

20-02-15,0,0

19-02-15,0,0

18-02-15,0,0

17-02-15,481,200

16-02-15,691,200

15-02-15,296,200

14-02-15,307,200

The code above gives this:

And THIS is what i am trying to accomplish

I understand that i must use .Append(text) and position the text at about the same x,y coords as the data point and pull the value from the data to feed into the text but i am having difficulties in integrating that concept.

I suspect that the selection would occur with valueline.Append ? I have looked at a HEAP of examples, i dont thing a linegraph with data value labels exists, if it does please point me to it 🙂

bitcoin exchange rate graph

Any thoughts ?

Your text will not be visible, as it is located outside the boundaries of your svg: you added a group that is translated of margin.Left, and the put your x at width+3, which means located at width+3+margin.Left of the left border of your svg.

Try replacing your append text with something like: svg.Append(text)

.Attr(transform, translate( + (width/2) + , + y(data[0].Sev4) + ))

.Attr(dy, .35em)

.Attr(text-anchor, start)

.Style(fill, red)

.Text(sev4);

Svg.Append(text)

.Attr(transform, translate( + (width/2) + , + y(data[0].Sev3) + ))

.Attr(dy, .35em)

.Attr(text-anchor, start)

.Style(fill, steelblue)

.Text(sev3);

I did not test it, so I cannot guarantee, but your code seems fine, that’s the only thing I see.

Result of this add:

EDIT

After your clarifications, here is a plunk: http://plnkr.Co/edit/ldlsequqqxgofwtk5aop?P=preview

bitcoin exchange rate graph

The part you will be interested in is: svg.Append(‘g’)

.Classed(‘labels-group’, true)

.SelectAll(‘text’)

.Data(data)

.Enter()

.Append(‘text’)

.Classed(‘label’, true)

.Attr({

‘x’: function(d, i) {

Return x(d.Date);

},

‘y’: function(d, i) {

Return y(d.Sev3);

}

})

.Text(function(d, i) {

Return d.Sev3;

});

This will draw your labels. Is it the result you try to achieve?

Stack exchange

Network

• technology

• life / arts

• culture / recreation

• science

• other

• stack overflow

• server fault

• super user

• web applications

• ask ubuntu

• webmasters

• game development

• tex – latex

• software engineering

• unix & linux

• ask different (apple)

• wordpress development

• geographic information systems

• electrical engineering

• android enthusiasts

• information security

• database administrators

• drupal answers

• sharepoint

• user experience

bitcoin exchange rate graph

• mathematica

• salesforce

• expressionengine® answers

• stack overflow em português

• blender

• network engineering

• cryptography

• code review

• magento

• software recommendations

• signal processing

• emacs

• raspberry pi

• stack overflow на русском

• programming puzzles & code golf

• stack overflow en español

• ethereum

• data science

• arduino

• bitcoin

More (28)

• photography

• science fiction & fantasy

• graphic design

• movies & TV

• music: practice & theory

• worldbuilding

• seasoned advice (cooking)

• home improvement

• personal finance & money

• academia

• law

More (16)

• english language & usage

• skeptics

• mi yodeya (judaism)

• travel

• christianity

• english language learners

• japanese language

• arqade (gaming)

• bicycles

• role-playing games

• anime & manga

• puzzling

• motor vehicle maintenance & repair

bitcoin exchange rate graph

More (32)

• mathoverflow

• mathematics

• cross validated (stats)

• theoretical computer science

• physics

• chemistry

• biology

• computer science

• philosophy

More (10)

• meta stack exchange

• stack apps

• API

• data

• area 51