Basic Chart - Bar Chart With Negative Values
  Duration: 15:42
Part of Course: Introductory D3 Course
This Lesson is for subscribers

Basic-chart-bar-chart-with-negative-values_280x158
Unlock this lesson NOW!
  • Get expert advice on Basic Chart - Bar Chart With Negative Values
  • Enjoy access to the complete DashingD3js catalog
  • Start mastering D3.js right now!

Takeaways:

  • Notice that the styling is done in the <style> </style> section of the HTML document
  • Notice that this example is different from the others because it does not use a web server to serve the data, it just defines the data at the top of the JavaScript
  • Notice the D3 Margin Convention
  • Notice the use of the JavaScript Global Object called Math
  • Notice the D3 Linear Scale for the X-Axis
  • Notice the D3 Ordinal Scale with rangeRoundBands for the Y-Axis
  • Notice the definition of the domain for the Y-Axis
  • Notice the D3 SVG Axis Component creation, definition, and instantiation of the X-Axis
  • Notice that _NO_ D3 SVG Axis Component is created nor defined for the Y-Axis
  • Notice the D3 Data Join
  • Notice how D3 helps create visual representations of the data
  • Notice how the JavaScript Ternary Operator Syntax is used to assign a class attribute to the SVG Rect DOM elements that specify the style of whether the bar is positive or negative

This Transcript is for subscribers.

Basic-chart-bar-chart-with-negative-values_280x158
Unlock this D3 Tutorial NOW!
  • Get expert advice on Basic Chart - Bar Chart With Negative Values
  • Enjoy access to the complete DashingD3js catalog
  • Start mastering D3.js right now!
<< Back To D3 Screencast and Written Tutorials Index