348957348957

ased data visualizations. Vector graphics require a lot less bandwidth than images because vector
graphics contain only instructions for how to draw them, as opposed to the final pixel-by-pixel
raster renderings of images. If your goal is to rapidly deploy web-based graphics that also provide
you lossless scaling capabilities, then SVG is a perfect solution. SVG is optimal for use in
creating graphical elements such as bars, lines, and markers.
You can use D3.js to select, add, modify, or remove SVG elements on a page, in just the
same way you do with HTML elements. Since D3.js is most useful for working with webbased
graphical elements, most of your D3.js scripting will interact with SVG elements.
Bringing in the Cascading Style Sheets (CSS)
The purpose of using Cascading Style Sheets (CSS) is to define the look of repeated visual
elements, such as fonts, line widths, and colors. You can use CSS to specify the visual
characteristics of page elements all at one time and then efficiently apply these characteristics to
an entire HTML document (or to only the parts of the document defined in the DOM, if you wish).
If you want to make sweeping, all-at-once changes to the look and feel of your web page elements,
use CSS.
If you’re building visualizations on several pages of a website, you can create a separate
document .css file, and then call that document instead of putting CSS in each page. If you do
this, then when you make a change to this .css document, it will be applied to the pages
collectively.
As an example, the basic CSS for a simple web page might include the following:
p {
font-family: arial, verdana, sans-serif;
font-size: 12 pt;
color: black;
}
.highlighted {
color: red;
}
The preceding example would render the text in this HTML example:
This text is black and this text is red.
The preceding CSS and HTML code generates text in the tag that has a default value of black,
whereas the inner object is designated as a highlighted class and generates a red-colored text.
D3.js leverages CSS for drawing and styling text elements and drawn elements so that you can
define and change the overall look of your visualization in one compact, easy-to-read block of
code.