liveBookmanning.com

What you will learn in D3.js in Action, Third Edition

by Elijah Meeks, Anne-Marie Dufour
Foreword by Andy Kirk

Read it on liveBook Get the book at manning.com

Chapter by chapter

Concepts explained in this book

• D3.jsD3.js is a JavaScript library for binding data to documents and creating interactive, customizable visualizations in web browsers.
• tooltipA tooltip is a transient annotation that appears in response to interaction to reveal information associated with a visual element without permanently occupying chart space.
• SVG textSVG text is textual content represented by a <text> element positioned within an SVG graphic.
• RectangleAn SVG rect element is a rectangular graphical element defined by position, width, and height attributes.
• SVGSVG is the Scalable Vector Graphics standard for describing resolution-independent two-dimensional graphics with XML-based elements.
• data bindingData binding is a pattern that associates data values with document elements so the elements can be generated or updated from those values.
• circleAn SVG circle is a circle element defined by a center point and a uniform radius.
• text-anchor attributeThe SVG text-anchor property controls the horizontal alignment of text relative to its reference point.
• responsive SVGA responsive SVG is an SVG graphic whose rendered size adapts to its containing element while preserving its intended coordinate relationships and aspect ratio.
• visualizationData visualization is the representation of data through graphical or visual forms to communicate patterns, relationships, or values.
• area generatord3.area() is a D3 shape API function that creates an area generator.
• point scaleA point scale maps discrete domain values to evenly distributed positions in a continuous range with zero bandwidth.
• viewbox attributeThe viewBox attribute defines the coordinate-system origin, width, and height used to map SVG content into its viewport.
• SVG groupAn SVG group is a <g> element that organizes child SVG elements so they can share structure, styling, and transformations.
• dimensionA chart axis is a reference line with a scale, ticks, and often labels that communicates values or categories in a chart.
• arc generatorAn arc generator is a D3 shape generator that produces SVG path data for circular or annular arcs from radius and angle parameters.
• coordinate systemA coordinate system is a reference framework that locates points using an origin and coordinate values.
• edgeA network edge, also called a link, is a connection between two nodes in a network or graph.
• annotated datasetAn annotated dataset is a stack-layout output structure containing series arrays with stacked boundaries and references to the original data.
• bucketA bin is an interval or group in a distribution that contains data points with values within specified boundaries.
• SVG path data attributeThe SVG d attribute is a sequence of commands and coordinates that defines the geometry of a path.
• SVG path elementAn SVG path is a <path> element whose d attribute contains drawing commands for lines, curves, and optionally closed shapes.
• D3 transitionA D3 transition is a time-based interpolation that animates selected document elements' attributes or styles from current values to target values.
• tickA simulation tick is one iteration of a force simulation during which node state is updated.
• stack generatorA D3 stack generator transforms component values into stacked series with lower and upper boundaries for each data point.
• accessibilityAccessibility is the design of digital content and interfaces so that people with varying abilities can perceive, understand, navigate, and use them.
• fill aestheticThe SVG fill attribute specifies the paint applied to the interior of a shape or path.
• geometric primitiveA geometric primitive is a simple graphical form such as a point, line, circle, or rectangle that can be combined into more complex graphics.
• lineAn SVG line is a line element defined by two endpoint coordinates and rendered as a straight segment.
• presentational attributeA presentational attribute is an SVG attribute that specifies visual properties such as an element's size, position, color, or opacity.
• vector imageA vector graphic is an image represented by mathematical descriptions of geometric shapes rather than by fixed pixels.
• handlerAn event listener is a callback registration that runs code in response to a specified event on an interface object.
• upper quartileThe 75th percentile is the value below which approximately 75 percent of an ordered dataset falls and is also called the third quartile.
• dominant-baseline attributeThe SVG dominant-baseline attribute controls the baseline used to align text vertically.
• force simulationA force simulation is an iterative physical simulation that updates graph-node positions and velocities under applied forces.
• linear scaleA linear scale maps continuous input values to output values in direct proportion across its domain and range.
• stacked bar chartA stacked bar chart represents multiple series within each bar by vertically or horizontally adjoining segments whose combined extent encodes a total.
• d3.bin()d3.bin() is a D3-array function that groups numeric values into bins according to a configured domain, thresholds, and value accessor.
• fillOpacity attributeThe SVG fill-opacity attribute specifies the opacity of paint applied to the interior of a shape or path.
• beeswarm plotA beeswarm plot is a visualization that positions individual data points along an axis while avoiding overlap through perpendicular displacement.
• database tableAn HTML table is a structured HTML element that represents data in rows and columns.
• centering forceA centering force translates an entire group of nodes toward a specified coordinate while preserving the group's shape.
• collision forceA collision force prevents simulated nodes from overlapping by applying separation forces based on their radii.
• link forceA link force applies a force between connected graph nodes, with connection strength influencing their separation.
• many-body forceA many-body force models interactions among nodes, producing attraction or repulsion based on its signed strength.
• positioning forceA positioning force attracts nodes toward specified coordinate positions along one or more axes.
• strokeA stroke is the outline paint and width applied to the boundary of a Canvas shape.
• horizontal axisA horizontal axis is a chart axis oriented horizontally, typically representing the x dimension.
• d3.forceCenter()d3.forceCenter() creates a D3 force that translates a node system toward a specified center.
• d3.forceCollide()forceCollide is a D3 force function that applies collision constraints to simulation nodes.
• d3.forceLink()d3.forceLink() creates a D3 force that connects source and target nodes according to graph links.
• d3.forceManyBody()d3.forceManyBody() creates a D3 force that applies pairwise attraction or repulsion among nodes.
• forceXd3.forceX() creates a D3 force that attracts nodes toward a specified horizontal position.
• forceYd3.forceY() creates a D3 force that attracts nodes toward a specified vertical position.
• strength accessorA strength accessor specifies the magnitude with which a D3 force influences nodes or links.
• cross-highlightingCross-highlighting is an interaction technique in which selecting or focusing one visual element highlights related elements in another view.
• transform attributeThe SVG transform attribute specifies geometric transformations such as translation, rotation, scaling, or skewing for an element and its descendants.
• circle packA circle pack is a hierarchical visualization that represents nested data with non-overlapping circles whose sizes encode values.
• radial scaled3.scaleRadial() is a D3 scale constructor that creates a scale mapping values to graphical radii.
• canvas elementThe Canvas API is the browser scripting interface for drawing on and reading from an HTML canvas bitmap.
• layoutA D3 layout is a preprocessing function that transforms a dataset into an annotated dataset containing attributes needed to draw a visualization.
• interquartile rangeThe interquartile range is the interval between the first and third quartiles containing the middle half of an ordered dataset.
• D3 shape generatord3.line() is a D3 shape API function that creates a line generator.
• propReact props are read-only input values passed from a parent component to a child component to configure rendering or behavior.
• violin plotA violin plot is a distribution chart that uses a mirrored, smoothed density shape to show where numeric observations are concentrated.
• band scalescaleBand() is a D3 scale function that maps discrete categorical input values to continuous numeric positions or bands.
• d3.scalePoint()d3.scalePoint() is a D3-scale constructor that creates a point scale for distributing discrete values across a continuous range.
• datasetA dataset is a structured collection of related data values treated as a unit for analysis or visualization.
• meanThe mean is the arithmetic average obtained by summing numeric observations and dividing by their count.
• d3.format()d3.format() is a D3-format function that creates a formatter for converting numeric values into strings according to a specified format.
• scaleA scale maps data values to visual values such as size, color, or screen position.
• duration()duration() is a D3 transition method that sets or retrieves the transition duration in milliseconds.
• ease()ease() is a D3 transition method that sets or retrieves the easing function controlling interpolation timing.
• stacked area chartA stacked area chart represents multiple series as adjoining filled areas whose vertical thicknesses encode values over an ordered dimension.
• streamgraphA streamgraph is a flowing, stacked area chart that shows changes in quantities over an ordered dimension such as time.
• selectiond3-selection is a D3 module that provides methods for selecting and manipulating document elements.
• equivalent experienceAn equivalent experience provides people with disabilities access to the main conclusions and underlying information available to people without disabilities.
• useEffectuseEffect() is a React Hook that runs a side-effect function after rendering and can rerun it when specified dependencies change.
• font-size propertyThe CSS font-size property specifies the size of rendered text.
• on()on() is a D3 selection method that registers an event listener for a specified event type and callback function.
• D3 margin conventionThe D3 margin convention reserves outer chart margins and translates the inner plotting area to leave room for axes, labels, and other annotations.
• screen readerA screen reader is assistive software that converts accessible digital content into speech or refreshable Braille.
• d3.hierarchy()d3.hierarchy() is a D3 hierarchy function that constructs a hierarchy from nested data.
• innerWidthThe innerWidth property is a browser window property containing the viewport width in CSS pixels.
• style attributeAn HTML or SVG attribute whose value contains CSS declarations applied directly to that element.
• interactive visualizationAn interactive visualization is a data visualization that changes or reveals information in response to user actions or dynamic data.
• centroidA centroid is the geometric center of a shape or region.
• spiderweb visualizationA spiderweb visualization is a custom graphic that encodes data attributes through the geometry and styling of a spiderweb-like form.
• pseudocodePseudocoding is the practice of describing an algorithm in informal, language-independent steps before implementing it in source code.
• interactionAn interaction is a user action and the resulting change in a visualization or interface.
• semantic markupSemantic HTML is the practice of using HTML elements according to their intended structural or interactive meaning.
• color scaleA color gradient is a gradual transition between colors across a graphical region or element.
• ordinal scaleAn ordinal scale maps discrete domain values to discrete range values while preserving their categorical association.
• aria semanticsThe role attribute assigns an accessibility semantic that describes how an element should be interpreted by assistive technologies.
• SVG desc elementAn SVG desc element provides a longer textual description of an SVG graphic or graphical element.
• selection.attr()A D3 selection method that gets or sets attributes on elements in a selection, optionally deriving values from bound data.
• GeoJSONGeoJSON is a JSON-based format for encoding geographic features, geometries, and associated properties.
• tree chartA tree layout is a hierarchical layout that assigns positions to nodes and links so parent-child relationships can be drawn as a tree.
• styleA DOM style is presentation information that controls an element's visual characteristics such as color, size, borders, and opacity.
• data labelA chart label is text attached to a graphical data representation to identify a category, value, or other chart element.
• reusable transition functionA reusable transition function is a function that encapsulates transition parameters for application to multiple D3 selections.
• small multiplesA small multiple is one of a series of related visualizations that share scales and axes while showing different aspects or subsets of data.
• pie layout generatord3.pie() is a D3 shape-layout function that converts numeric data into slice descriptors containing angular start and end values.
• axis generatorAn axis generator is a D3 function that constructs SVG elements representing a chart axis from a scale.
• domain()domain() is a D3 scale method that sets or retrieves the scale's input domain.
• range()range() is a D3 scale method that sets or retrieves the scale's output range.
• accessor methodAn accessor function is a callback that receives a bound datum and often its index to derive a value for a D3 operation.
• aria-labelledby attributeThe aria-labelledby attribute identifies one or more elements whose text provides an accessible name for another element.
• data visualization best practiceA data visualization best practice is an established design principle for making a visualization legible, comprehensible, accurate, and appropriate for its data and audience.
• stateReact state is component-owned data whose updates can trigger a component to render again.
• map projectionA map projection is a mathematical transformation that converts geographic coordinates on a curved surface into positions in a planar coordinate system.
• TopoJSONTopoJSON is an extension of GeoJSON that encodes shared geographic topology and geometries in a compact form.
• translationA translation is a coordinate transformation that shifts every point by the same horizontal or vertical offset.
• useRefuseRef() is a React hook that creates a persistent mutable reference object across component renders.
• selection.style()A D3 selection method that gets or sets CSS style properties on elements in a selection.
• responsive data visualizationA responsive data visualization adapts its layout or presentation to different screen sizes and interaction contexts.
• curve()The D3 curve() accessor configures the curve interpolator used by a shape generator to connect data points.
• flexbox gridA flexbox grid is a column-based page layout built by arranging content with CSS flexbox.
• d3-axisd3-axis is a D3.js module that provides functions for constructing axes and configuring their ticks and labels.
• d3-time-formatd3-time-format is a D3.js module that formats and parses dates and times using pattern directives.
• tick labelA tick label is text associated with an axis tick that identifies the tick's value or category.
• tickFormat()tickFormat() is a D3 axis method that specifies the formatting function or format for tick labels.
• time scaleA time scale maps continuous time-related input values to a continuous output range.
• nodeA node is an entity or vertex in a network or graph that can participate in connections to other nodes.
• d3.csv()d3.csv() is a D3.js data-loading function that retrieves and parses comma-separated values into JavaScript data objects.
• double-encodingDouble-encoding is the technique of representing the same information through two distinct visual or semantic channels so that one channel can compensate for limitations in another.
• mapThe JavaScript map() method creates a new array by applying a callback to every element of an input array.
• CSS transform propertyThe CSS transform property applies geometric transformations such as translation, rotation, or scaling to an element.
• data()data() is a D3 selection method that associates an array of data values with the selected document elements.
• join()join() is a D3 selection method that reconciles document elements with bound data and handles enter, update, and exit selections.
• cascadeThe CSS cascade is the algorithm that resolves competing declarations by considering their origin, importance, specificity, and source order.
• canvas contextA canvas context is the drawing-state object that provides methods and properties for rendering graphics onto a canvas bitmap.
• enter selectionAn enter selection is the set of data items that lack corresponding document elements and therefore require new elements to be created.
• exit selectionAn exit selection is the set of document elements whose associated data items are no longer present and that therefore need to be removed.
• update selectionAn update selection is the set of document elements that already correspond to data items and remain associated during a data join.
• leaf nodeA leaf node is a node at the lowest level of a hierarchy with no child nodes.
• quantitative dataQuantitative data is information represented by numerical values that can be measured or counted.
• qualitative dataQualitative data consists of categorical or descriptive values that represent types or qualities rather than measured amounts.
• d3.selectAllselectAll() is a D3 selection method that creates a selection of all document elements matching a specified selector within the current selection.
• promiseA JavaScript Promise is an object representing the eventual completion or failure of an asynchronous operation and its resulting value.
• WCAGThe Web Content Accessibility Guidelines are an international standard of recommendations for making web content accessible to people with disabilities.
• CSS selectorA CSS selector is a syntax pattern that identifies elements in a document according to their names, attributes, classes, IDs, or relationships.
• legendA legend is a chart component that maps visual encodings such as colors or symbols to the corresponding data categories or meanings.
• tspan elementA tspan element is an SVG text subelement that allows a portion of text to have independently positioned or styled content.
• color blindnessColor blindness is a visual condition involving reduced ability to distinguish certain colors or their brightness differences.
• contrast ratioA contrast ratio is a numerical measure of the relative luminance difference between foreground and background colors.
• medianThe median is the middle value of an ordered dataset, or the midpoint between the two middle values when the dataset has an even size.
• resize eventA resize event is a browser event dispatched when the dimensions of a window or other resizable object change.
• histogramA histogram is a chart that represents the distribution of quantitative data by grouping values into bins and displaying their frequencies.
• mobile layoutA mobile layout is a user-interface arrangement adapted for the small screen and interaction constraints of a mobile device.
• getImageData()getImageData() is a Canvas 2D context method that returns pixel data for a specified rectangular region of a canvas.
• box-and-whisker plotA box plot is a statistical chart that summarizes a distribution using a box between the first and third quartiles, a median line, and whiskers extending toward the minimum and maximum values.
• logarithmic scaleA logarithmic scale maps values through a logarithmic transformation so multiplicative differences in magnitude can be represented across a visual range.
• defs elementAn SVG defs element contains graphical definitions that are not rendered directly but can be referenced by other SVG elements.
• pattern elementAn SVG pattern element defines a tile that can be repeatedly rendered to fill or stroke graphical elements.
• invert()invert() is a scale method that maps a value from the scale's output range back to the corresponding input-domain value.
• continuous dataA continuous value can take any value within a specified interval or spectrum.
• data cleaningData cleaning is the detection and correction or removal of inaccurate, inconsistent, incomplete, or improperly formatted data.
• polar coordinateA polar coordinate system locates points by their distance from an origin and angle relative to a reference direction.
• geo path generatord3.geoPath is a D3 function that generates path representations for geographic data and can render them through a configured drawing context.
• hidden canvasA hidden canvas is an overlaid Canvas element rendered with unique per-shape colors and made transparent for pixel-based interaction detection.
• MapA JavaScript Map is a key-value collection that preserves associations between keys and values and supports lookup by key.
• interpolationAn interpolation function computes intermediate values or visual representations between discrete data points or states.
• Document Object ModelThe Document Object Model is a programming interface that represents a web document as a structured tree of objects and elements.
• scaleLinear()scaleLinear() is a D3 scale function that maps continuous numeric input values to continuous numeric output values.
• radial visualizationA radial visualization, or radial chart, arranges graphical marks around a center using angular and radial coordinates.
• chart gridA chart grid is a set of horizontal or vertical reference lines aligned with an axis's tick positions.
• tickSize()tickSize() is a D3 axis method that gets or sets the length of an axis's tick marks.
• mobile-first layoutMobile-first is a responsive design approach that starts with the constraints of mobile devices and progressively adapts the design for larger screens.
• accessible paletteAn accessible color palette is a set of colors selected to maintain distinguishability and sufficient contrast for users with visual impairments.
• SVG patternAn SVG pattern is a reusable graphical definition that tiles its contained geometry across the filled region of an SVG element.
• onClick eventA React event handler property that responds to a user click on a component or DOM element.
• transitionA CSS transition is a stylesheet-defined interpolation of an element's property values over time when those values change.
• transition()The D3 selection transition() method starts an animated transition on a selection and returns a transition for configuring interpolated changes.
• icicle chartAn icicle chart is a hierarchical visualization that represents parent-child relationships with nested or stacked rectangular regions.
• force-directed layoutA force layout is a graph-layout technique that uses simulated forces to iteratively position elements according to spatial constraints.
• media queryA CSS media query is a conditional CSS construct that applies styles when specified device or viewport characteristics match.
• d3.pointer()d3.pointer() is a D3-selection function that returns pointer coordinates relative to a specified target for a DOM event.
• graphA graph is a mathematical structure consisting of vertices connected by edges.
• language familyA language family is a category grouping programming languages that share a common lineage or defining characteristics.
• seriesA series is a related category of values represented as one component across the bars of a stacked visualization.
• d3.selectd3.select is a D3 method that returns a selection containing the first DOM element matching a selector.
• hierarchyNested data is a hierarchical data structure in which objects or records contain other objects or records recursively.
• edge weightAn edge weight is a numeric value associated with a network edge that represents the strength or quantity of its connection.
• undirected edgeAn undirected edge is a network connection that is valid in both directions between its endpoint nodes.
• labelA label is an annotation placed in or beside a visualization to identify the meaning of a visual element or data value.
• root nodeA root node is the topmost node of a tree or hierarchy, which has no parent.
• key functionA key function computes stable identity keys that allow data-bound elements to be matched with corresponding data items across updates.
• SVG elementAn SVG element is an element in an SVG document that defines or contains vector graphic content.
• refA React ref is an object or callback mechanism that provides access to a rendered component or DOM element.
• radianA radian is an angular measurement equal to the angle subtended at a circle's center by an arc whose length equals the circle's radius.
• rankings chartA rankings chart is a visualization that shows entities ordered by a ranking measure across an ordered dimension.
• mixed-mode renderingMixed-mode rendering is a visualization technique that combines SVG and Canvas layers to render different portions of the same visualization.
• axisRight()axisRight() is a D3 axis generator function that creates an axis positioned to the right of its associated scale.
• axisTop()axisTop() is a D3 axis generator function that creates an axis positioned above its associated scale.
• then methodthen() is a Promise method that registers callbacks for handling an asynchronous operation's fulfillment or rejection.
• d3-fetchd3-fetch is a D3.js module that provides utilities for loading data resources through the web Fetch API.
• inner chartThe inner chart is the plotting area remaining after the surrounding chart margins are removed.
• endAngle()endAngle() is an arc-generator method that sets or accesses the ending angle of an arc.
• startAngle()startAngle() is an arc-generator method that sets or accesses the starting angle of an arc.
• title elementAn SVG title element provides a text title for an SVG graphic or graphical element for accessibility and other user agents.
• adjacency matrixAn adjacency matrix is a square grid in which rows and columns represent nodes and cells indicate the presence and optionally the weight of connections between them.
• data wranglingData wrangling is the process of transforming, cleaning, and reshaping data for subsequent use or analysis.
• discrete variableA discrete value belongs to a predetermined finite or otherwise distinct set of possible values.
• d3.curveCatmullRomd3.curveCatmullRom is a D3 curve factory that generates a Catmull–Rom cubic spline passing through the supplied data points.
• mouse eventA mouseenter event is dispatched when a pointing device enters an element's area.
• offset()The D3 stack offset accessor method gets or sets the strategy that determines the baseline and vertical placement of stacked series.
• order()The D3 stack order accessor method gets or sets the ordering strategy used to arrange series in a stack.
• fillStyle propertyfillStyle is a Canvas 2D context property that specifies the color or paint used to fill drawn content and text.
• reading levelA reading grade level is a readability metric estimating the level of formal education needed to understand written content.
• geospatialGeographic data represents locations and geographic features as coordinates, points, lines, polygons, or other spatial shapes.
• method chainingMethod chaining is a programming technique in which successive method calls operate on and return an updated object through a linked call sequence.
• selection.append()A D3 selection method that creates and appends a new element as the last child of each selected element.
• d3.json()d3.json() is a d3-fetch function that retrieves a JSON resource and parses it into JavaScript data.
• probability distributionA data distribution is the pattern of values and their frequencies or densities across a variable's possible range.
• hierarchical visualizationA hierarchical visualization represents data organized into nested parent-child relationships.
• d3.stack()d3.stack() is the D3 API function that creates a stack layout for converting tabular series values into boundary coordinates.
• beginPath()The Canvas beginPath() method starts a new path and clears the set of subpaths used by subsequent drawing operations.
• cartogramA cartogram is a map that deliberately distorts the area or length of geographic objects to encode another variable.
• composite tooltipA compound tooltip is a tooltip that presents multiple related values or data fields together.
• pack layoutA pack layout is a hierarchical layout algorithm that assigns circles, positions, and radii to represent nodes and their aggregated values.
• pyramid plotA pyramid chart is a distribution chart that compares two distributions side by side using opposing or adjacent shapes.
• flexboxFlexbox is a CSS layout model for arranging elements along one or more flexible rows or columns.
• arrow functionAn arrow function is JavaScript function syntax that uses an arrow notation and supports concise expression or block bodies.
• classed()classed() is a D3 selection method that adds or removes a specified CSS class on each selected element according to a Boolean value.
• angleAn angle is the measure of rotation from a reference direction to a point or geometric ray.
• radiusA radius is the distance from the center or origin of a geometric figure to a point on its boundary.
• rule of threeThe rule of three is a proportional-reasoning method for finding an unknown quantity from three known quantities in two equivalent ratios.
• ReactReact is a JavaScript library for building user interfaces from composable components.
• d3.curveMonotoneXd3.curveMonotoneX is a D3 curve factory that generates a cubic interpolating curve preserving monotonicity in the x dimension.
• d3.treemap()d3.treemap() is a D3-hierarchy layout function that assigns rectangular positions and sizes to hierarchical nodes for treemap visualizations.
• easingAn easing function controls the rate at which an animated interpolation progresses over time.
• keyboard interactionA keyboard interaction is an interface interaction performed through keyboard input rather than a pointing device.
• tabindexThe tabindex attribute controls whether an HTML or SVG element can receive keyboard focus and its position in sequential focus navigation.
• array iterator methodAn array iterator method is a JavaScript array method that traverses elements while producing a test result or transformed selection.
• Array.prototype.filterThe JavaScript filter() method creates a new array containing the elements that satisfy a callback condition.
• dotted notationDot notation is JavaScript property access syntax that places a property name after an object and a period.
• JavaScriptA high-level programming language standardized as ECMAScript and commonly executed in web browsers and JavaScript runtimes.
• data collectionData gathering is the process of collecting information from one or more sources for analysis or visualization.
• queryselectorallquerySelectorAll is a DOM method that returns all elements matching a specified selector.
• structured extractionData extraction is the process of obtaining selected information from a source such as a web page or document.
• whiskerA whisker is a line extending from a box-plot quartile toward a distribution extreme such as the minimum or maximum.
• latitudeLatitude is the angular coordinate specifying a north–south position relative to the equator on Earth.
• longitudeLongitude is the angular coordinate specifying an east–west position relative to a reference meridian on Earth.
• descendants()descendants() is a hierarchy-node method that returns an array containing a node and all nodes below it in the hierarchy.
• getContext()getContext() is a Canvas method that returns a rendering context for a specified drawing mode.
• leaves()leaves() is a hierarchy-node method that returns an array containing the hierarchy's leaf nodes.
• language branchA language branch is a subdivision within a language family representing a more closely related group of human languages.
• structured dataTabular data is data organized into rows and columns, with each row representing a record and each column representing a field.
• filteringData filtering is the technique of selecting only records that satisfy a specified categorical or value-based condition.
• foreignObjectAn SVG foreignObject element embeds non-SVG content, such as HTML elements, within an SVG document.
• quantile quantizationA quantile scale maps continuous input values to discrete output values according to thresholds that divide the input distribution into groups of similar sizes.
• d3.range()d3.range() is a D3-array function that generates an arithmetic sequence of numeric values.
• d3.stratify()d3.stratify() is a D3 hierarchy function that constructs a hierarchy from tabular records specifying parent-child relationships.
• Svelte reactive declarationA Svelte reactive declaration is a statement whose computed value is automatically reevaluated when its referenced component state changes.
• svelte window elementThe Svelte window element is a special Svelte component element that exposes browser window properties and events to a component.
• case statementA switch statement selects and executes code based on which case matches an expression's value.
• d3.stackOffsetExpandd3.stackOffsetExpand is a D3 stack offsetting constant that normalizes each stack column so its series sum is one.
• d3.stackOffsetSilhouetted3.stackOffsetSilhouette is a D3 stack offsetting constant that centers the stacked extent around a baseline.
• d3.stackOrderInsideOutd3.stackOrderInsideOut is a D3 stack ordering constant that places early-peaking series near the center and late-peaking series toward the outside.
• zero baselineA zero baseline is the chart reference level representing the numeric value zero.
• upper boundaryAn upper boundary is the ending cumulative stacked value of a category interval for a particular record.
• encoding channelA visual channel is a visual encoding dimension, such as position, length, color, or shape, that represents data values.
• nominal dataA nominal value is a categorical value whose labels have no inherent ordering.
• ordinal dataAn ordinal value is a categorical value whose labels have a meaningful order or rank.
• data typeA data type is a classification describing the kind of values represented by data and the operations or interpretations appropriate for them.
• scatterplot filteringScatterplot filtering is the technique of restricting the data displayed in a scatterplot according to a selected criterion.
• sequential colormapA sequential color palette is an ordered progression of colors that encodes increasing or decreasing magnitude.
• script elementA script element, or script tag, is an HTML element that embeds executable code or references an external script file.
• categorical paletteA categorical color is a distinct color assigned to identify a nominal category without implying magnitude or order.
• zoomZooming is an interaction technique that changes the magnification or visible extent of a visualization or displayed content.
• panningPanning is an interaction technique that shifts the visible region of a visualization without changing its scale.
• touch inputA touch interaction is a user-interface interaction performed through contact with a touch-sensitive display.
• bitmap imageA raster graphic is an image represented as a grid of discrete pixels.
• React keyA React key prop identifies an item in a component collection so React can track changes between renders.
• ticks()ticks() is a D3 continuous-scale method that returns an array of representative values across the scale's domain.
• Equal Earth projectionThe Equal Earth projection is a pseudocylindrical world map projection designed to represent global areas proportionally.
• blur eventA blur event is a browser event dispatched when an element loses input focus.
• focus eventA focus event is a browser event dispatched when an element receives input focus.
• responsive web designResponsive web design is an approach to building websites that adapts layout and presentation to different screen sizes and devices.
• schedulingA timeline is a visual representation that arranges events or measurements along an ordered temporal dimension.
• formattingData formatting is the process of transforming data values and structure into a form suitable for subsequent processing or presentation.
• d3.link()d3.link() is a D3 shape generator that produces path data for links between source and target points.
• fill()The Canvas fill() method fills the interiors of the current path's shapes using the active fill style.
• strokeStyle propertystrokeStyle is a Canvas rendering-context property specifying the color or paint used to outline paths and shapes.
• data-driven graphicsData-driven graphics are visual graphics whose structure or appearance is determined by data values.
• d3.max()d3.max() is a D3-array function that returns the maximum value in an iterable, optionally by applying an accessor function.
• d3.min()d3.min() is a D3-array function that returns the minimum value in an iterable, optionally by applying an accessor function.
• data measurementData measurement is the examination and quantification of dataset characteristics to understand its contents and range.
• sorting algorithmsort() is the JavaScript Array method that orders array elements according to an optional comparison function.
• cosine functionCosine is a trigonometric function that gives the ratio of the adjacent side to the hypotenuse in a right triangle.
• sine functionSine is a trigonometric function that gives the ratio of the opposite side to the hypotenuse in a right triangle.
• trigonometryTrigonometry is the branch of mathematics that relates angles to lengths and coordinates in geometric figures.
• arc diagramAn arc diagram is a network visualization that represents relationships between entities with arcs connecting nodes arranged along a baseline or axis.
• data conversionType conversion is the transformation of a value from one data type to another, such as from a string to a number.
• scatter plotA scatterplot displays a collection of data points positioned along coordinate axes to show relationships between variables.
• defined accessorA defined accessor is a line-generator function that determines whether each data point contributes to the generated path.
• brushingBrushing is an interaction technique in which a user selects a region or subset of marks by dragging across a visualization.
• padAngle()padAngle is pie-layout metadata or configuration representing the angular padding between adjacent slices.
• callbackA callback function is a function supplied to another operation so that it can be invoked when a specified event or processing step occurs.
• d3-zoomd3-zoom is a D3 module that provides interactive zooming and panning behavior for document elements.
• d3.zoomIdentityd3.zoomIdentity is the D3 constant representing an identity transformation with unit scale and zero translation.
• transform objectA transform object is an object containing the scale factor and translation coordinates describing a zoom state.
• scaleExtent()scaleExtent() is a D3 zoom behavior method that gets or sets the minimum and maximum allowed scale factors.
• semantic zoomSemantic zoom is an interaction technique that changes the type or level of detail of displayed data as the view is zoomed.
• translateExtent()translateExtent() is a D3 zoom behavior method that gets or sets the allowed spatial extent for translation.
• zoom eventA zoom event is an event emitted by a D3 zoom behavior when the user changes the zoom or translation state.
• areal unit problemThe areal unit problem is the distortion that occurs when statistical results depend on how geographic areas are bounded or aggregated.
• choropleth mapA choropleth map is a map that encodes data values by varying the color of defined geographic regions.
• d3-scale-chromaticd3-scale-chromatic is a D3 module that provides standardized sequential, diverging, and categorical color schemes and interpolators.
• parent-child relationshipA parent-child relationship is a directed association in which one hierarchical item is the parent of another item.
• npmnpm is a package manager and registry ecosystem for installing and managing JavaScript packages.
• SvelteSvelte is a web UI framework that compiles component code into efficient JavaScript.
• componentA component is a modular, reusable user-interface unit that encapsulates part of an application's structure or behavior.
• innerRadius()innerRadius() is a D3 arc-generator accessor that specifies or retrieves the inner radius of an arc.
• outerRadius()outerRadius() is a D3 arc-generator accessor that specifies or retrieves the outer radius of an arc.
• d3-interpolated3-interpolate is a D3.js module providing interpolation functions for numeric, color, string, and other values.
• d3-scaled3-scale is a D3.js module providing functions for mapping data domains to output ranges.
• d3.scaleQuantile()d3.scaleQuantile() is a D3-scale constructor that creates a quantile scale from a discrete input domain and discrete output range.
• JSONJSON is a text-based data interchange format representing structured values with objects, arrays, and primitive values.
• area chartAn area chart represents quantitative values with regions whose sizes or boundaries encode magnitude across an ordered dimension.
• curve generatorA curve generator defines the interpolation behavior used to construct curved SVG path geometry from data points.
• transparent interaction circleA transparent interaction circle is an invisible, enlarged circular hit area placed over or behind a visual mark to make pointer interaction easier.
• focusable elementA focusable SVG element is an SVG element that can receive keyboard focus in a document.
• topojson-clienttopojson-client is a JavaScript library that converts TopoJSON topology into GeoJSON features and geometries.
• bandwidthBandwidth is the width allocated to each category interval in a band-based scale.
• Live Server pluginLive Server is a VS Code extension that serves local project files through a web server and can automatically reload the browser when files change.
• resource cleanupA cleanup function is a function returned from a React effect to release resources or prevent work after the effect is no longer active.
• function componentA functional component is a React component implemented as a JavaScript function that receives props and returns rendered markup.
• JSXJSX is a JavaScript syntax extension for expressing user-interface markup within JavaScript code.

These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.