D3.js in Action, Second Edition: Data visualization with JavaScript

Previous Chapter

Chapter 11. Mixed mode rendering

List of Figures

Index

[SYMBOL][A][B][C][D][E][F][G][H][I][J][L][M][N][O][P][Q][R][S][T][U][V][W][X][Y][Z]

SYMBOL

{} (curly braces) === operator

A

abstract charts accessor accessor functions complex overview .active class adjacency matrices .append() function, 2^nd appendChild() function arc diagrams area accessors area() function, 2^nd arguments object array functions, JavaScript Array.concat arrays, JavaScript arrow functions attr() function, 2^nd axes creating plotting data styling axisBottom axisLeft() function axisRight() function axisTop() function, 2^nd

B

barChart code basemap beeswarm plot behavior big data visualization binding data. See data-binding. binning, 2^nd <body> element bounding box boxplot brighter() function brushing brush events creating brushes xy brushing buttonClick function, 2^nd, 3^rd

C

call() method callback function, 2^nd camelcase canvas drawing <canvas> element, 2^nd, 3^rd cartograms Cascading Style Sheets. See CSS. casting data categorical data, formatting centrality centroid changeBrush function channels defined setting charge chartjunk charts axes creating plotting data styling complex accessor functions complex graphical objects general principles of components generators layouts geospatial information visualization canvas drawing cartograms drawing points globes graticules hexbins interactivity mapping data projections and areas raster reprojection satellite projection tile mapping TopoJSON transform zoom Voronoi diagrams zoom hierarchical visualization circle packing dendrograms hierarchical data hierarchical patterns icicle charts treemaps layouts histograms pie charts plugins for stack layout legends line charts drawing line from points drawing many lines with multiple generators line interpolation network visualization force-directed layout static network diagrams children choropleth map <circle> elements, 2^nd, 3^rd, 4^th, 5^th circle packing drawing overview, 2^nd when to use clamp() function className clean methods cloneNode() function clustering color color mixing color ramps for numerical data discrete colors color categories color ramps, for numerical data color spectrum color theory ColorBrewer 3-red scale colorbrewer library colorbrewer scales colorbrewer.Reds complex accessor functions components connection console.log() function context() method coordinates array countryColor scale createBarChart() function createBrush function create-react-app createSoccerViz() function cross-highlighting CSS (Cascading Style Sheets), 2^nd, 3^rd csv() function curly braces curve method custom layouts and components adding component labels designing layouts extending layouts implementing layouts linking components to scales loading sample data testing layouts writing components cx attribute cy attribute

D

d attribute d3.cluster layout, d3.tree layout vs. d3.geom.voronoi function d3.geoTile module d3.gridLayout function D3.js data standards geographic data nested data network data objects raw data tabular data defined function of data visualization selecting and binding web page elements Hellow World! app with elements, 2nd HTML5 coding in console CSS DOM ES6 and Node JavaScript SVG infoviz standards expressed in D3 d3.json function d3.merge() function d3.nest.key function d3.nest() function d3.queue library d3.range() function d3.selectAll() function d3.simpleLegend.scale() function d3.stratify() function d3.svg.area d3.svg.line d3.tree layout, d3.cluster layout vs.. See also dendrograms. d3.zoom() function D3v4 modules darker() function dashboards basics of upgrades for cross-highlighting legends responsiveness data array data flow binning casting data data presentation .append() function .remove() function d3.merge() function setting channels updating visualization from loaded data data-binding accessing data with inline functions integrating scales selections and formatting data categorical geometric quantitative raw temporal topological loading data measuring data nesting scales and scaling data standards geographic data nested data network data objects raw data tabular data data() function, 2^nd data-binding, 2^nd, 3^rd accessing data with inline functions integrating scales selections and .append() function .attr() function .data() function .enter() function .exit() function .html() function .insert() function d3.selectAll() function data-driven design pregenerated content HTML fragments images SVG project architecture data external libraries images resources style sheets data-driven interaction color color mixing color ramps for numerical data discrete colors DOM manipulation events graphical transitions datapoints, 2^nd, 3^rd dataset dataViz() function datum() function day attribute defined() function degree (degree centrality) delay() function, 2^nd delimited data dendrograms d3.cluster vs. d3.tree layouts drawing overview, 2^nd radial tree diagrams when to use descendants method didComponentUpdate method directed network, 2^nd discrete colors distance <div> elements, Hellow World! app with document.getElementById selector DOM (Document Object Model) element manipulation examining in console domain() function drag() function duration() function, 2^nd

E

each() function, 2^nd, 3^rd EcmaScript 6 (ES6; ES2015) edge list edge weight edges <ellipse>element empty() function enclosure end event endAngle .enter() function append() function overview entries ES2015 Esri events exit() function overview, 2^nd remove() function extent() method

F

favorites array FeatureCollection fill setting flame graphs forceCollide force-directed network layout creating drag() function fixed node positions forces manually positioning nodes measures centrality clustering degree edge weight modularity optimization removing and adding nodes and links settings charge gravity link force stopping and restarting restart() function stop() function SVG markers tick() function updating forceManyBody forceSimulation, 2^nd forceTick function forEach array formatting data categorical data geometric data quantitative data raw data temporal data topological data friends attribute function.apply

G

<g> element, 2^nd, 3^rd, 4^th, 5^th, 6^th ga attribute generators, 2^nd geo.graticule function geo.path() function, 2^nd geodata geographic data GeoJSON geometric data, formatting geoPath.area() function geospatial information visualization (mapping) canvas drawing cartograms drawing points globes graticules hexbins interactivity mapping data GeoJSON projection scale projections and areas raster reprojection satellite projection tile mapping TopoJSON file format merging neighbors rendering transform zoom Voronoi diagrams zoom global variables globes, creating and rotating gParent graphical objects, complex graphical transitions graphs graticules gravity gridOver function

H

HCL (hue, chroma, and luminosity) Hellow World! app with elements, 2^nd hexbins hierarchical visualization circle packing drawing when to use dendrograms d3.cluster vs. d3.tree layouts drawing radial tree diagrams when to use hierarchical data d3.nest() function d3.stratify() function hierarchical JSON and objects hierarchical patterns icicle charts drawing flame graphs sunburst diagrams when to use treemaps building filtering radial treemaps when to use highlightRegion histograms drawing interactivity violin plots hive plots HSL (hue, saturation, and lightness) hsl() function <html> element HTML fragments, pregenerated html() function, 2^nd, 3^rd HTML5 coding in console CSS DOM ES6 and Node JavaScript arrays and array functions method chaining SVG <circle> element <g> grouping element <line> element <path> element <polygon> element <rect> element <svg> element <text> element hue, chroma, and luminosity. See HCL. hue, saturation, and lightness. See HSL.

I

i value icicle charts drawing flame graphs sunburst diagrams when to use id attribute if statement ifsie images overview pregenerated import syntax in degree incomingData array infobox infoviz (information visualization) standards, 2^nd inline functions, accessing data with innerHTML insert() function, 2^nd, 3^rd inside-out settings interactivity, mapping visualiz-ation interpolation isomorphic JavaScript

J

JavaScript arrays and array functions method chaining jLouvain library JSON (JavaScript Object Notation) hierarchical overview json() function JSX

L

LAB (lightness A-B) label attribute labels, creating for components layout() function layouts, 2^nd histograms drawing interactivity violin plots pie charts drawing ring charts transitioning plugins for Sankey diagrams word clouds stack layout leaf node legendColor legendOver legends adding overview using third-party D3 modules to create lifecycle methods, React lighter() function line charts drawing line from points drawing many lines with multiple generators line interpolation <line> elements, 2^nd line interpolation line() function, 2^nd linear() function link force link.strength() parameter links, 2^nd loading data file formats visualization from loaded data

M

makeAGrid function manyBody MapboxGL mapping data (geodata), 2^nd creating random drawing with canvas GeoJSON mixed mode rendering techniques projection scale MatFlicks max() function measuring data Mercator mergeArcs function mergeAt test method chaining, JavaScript mode rendering avoiding general opacity avoiding general selections geodata creating random drawing with canvas rendering techniques network data precalculating positions quadtrees generating random xy data xy brushing shape generators modularity Mollweide, 2^nd, 3^rd mouseout event, 2^nd mouseover event, 2^nd, 3^rd multipolygons multivariate

N

neighbor function nest() function, 2^nd, 3^rd nested data nestedTweets, 2^nd nesting network data mixed mode rendering overview, 2^nd networks force-directed layout creating drag() function fixed node positions forces manually positioning nodes measures optimization removing and adding nodes and links settings stopping and restarting SVG markers tick() function updating static network diagrams adjacency matrices arc diagrams network data Node node() function nodes Noun Project npm (node package manager) numFavorites attribute numRetweets attribute numTweets attribute, 2^nd

O

Object.assign Object.keys function objects offset() function on() function onclick event, 2^nd onload property onMouseEnter property orient option out degree outerRadius overallTeamViz() function

P

package.json file parentID parse() method partition charts. See icicle charts. <path> elements, 2^nd, 3^rd, 4^th, 5^th pie charts drawing ring charts transitioning pieChart function plugins, 2^nd PNG (Portable Network Graphics) pointer-events property pointer-events style points attribute <polygon> element polylinear scale pregenerated content, 2^nd HTML fragments images SVG processGrid function, 2^nd progressive rendering projections areas and satellite properties object props, React pure render component

Q

quadIndex quadtrees, 2^nd generating random xy data xy brushing quantile scale quantitative data, formatting

R

radial tree diagrams radial treemaps randomCoords() function range() function raster reprojection raw data formatting overview React brushing brush events creating brushes create-react-app dashboard dashboards basics of upgrades for element creation JSX lifecycle methods props rendering stat lines state traditional D3 rendering with <rect> elements, 2^nd, 3^rd, 4^th rect elements rect.handle rect.selection red-green-blue. See RGB. region attribute remove() function render() function rendering mixed mode avoiding general opacity avoiding general selections geodata creating random drawing with canvas rendering techniques network data precalculating positions quadtrees generating random xy data xy brushing shape generators requestAnimationFrame resizeGrid1() function resizeGrid2() function restart() function, 2^nd retweets array RGB (red-green-blue) rgb() function ring charts root node runMoreLayouts() function

S

Sankey diagrams, 2^nd sankey() function satellite projection scale, mapping visualization scale() function, 2^nd, 3^rd scaleLinear() function, 2^nd scaleLog() function scaleOrdinal() function, 2^nd, 3^rd scalePow() function scaleQuantile() function scaleQuartile() function scales and scaling integrating scales linking components to scaleTime function scatterplot, 2^nd, 3^rd, 4^th <script> element, 2^nd –SE tag secondaries selectAll.data() function selection.exit() function selection.filter() function selection.lower() function, 2^nd selection.raise() function, 2^nd semantic zoom shape generators shapefile shapeHeight shapePadding shapeWidth shouldComponentUpdate method simulation.restart() function simulation.stop() function simulation.tick() function smallerNumbers array someData variable <span> element spatial search <square> element stack layout stackLayout function stackOffsetSilhouette keyword stackOrderInsideOut start event startAngle stat lines state, React static images static network diagrams adjacency matrices arc diagrams network data statline steradians (spherical radians) stop() function streamgraph StreamGraph component sum() method sunburst diagrams SVG (Scalable Vector Graphics) <text> element <circle> element <g> grouping element <line> element <path> element <polygon> element pregenerated <rect> element <svg> canvas <svg> element, 2^nd, 3^rd, 4^th, 5^th, 6^th, 7^th, 8^th

T

tabular data tag cloud team attribute temporal data, formatting .tentative class <text> elements, 2^nd text() function, 2^nd third-party D3 modules this variable tick() function tickSize() function, 2^nd tick-Values() function tile mapping tilt title variable TopoJSON file format merging neighbors rendering Topojson.feature() function topological data, formatting transform attribute, 2^nd, 3^rd, 4^th transform zoom translate() function transpiler tree diagrams. See dendrograms. treemaps, 2^nd, 3^rd building filtering radial treemaps when to use <tspan> element Tufte, Edward tweening, 2^nd tweetdata tweetG variable type conversion

U

undirected network unHighlight function units variable universal JavaScript unknown method untranspiled code user attribute

V

values, 2^nd values key Versor Dragging viewBox attribute violin plots visit() function visualizing algorithms viz ID Voronoi diagrams vx attribute vy attribute

W

web page elements deriving appearance of from bound data variety of weighted directed network weighted network while loop while statement willComponentUpdate method wired streamgraph word clouds Wordle worldFeatures variable WorldMap component

X

x() function x2 attribute XHR requests, 2^nd xlink:href attribute, 2^nd xml() function

Y

y() function y2 attribute yScale() function, 2^nd

Z

Zamyslianskyj, James z-index property, 2^nd zoom mapping visualization overview zoom.scale() function zoom.translate() function zoomed function zoomend zoomFinished function zoomInitialized function zoomstart

Previous Chapter

Chapter 11. Mixed mode rendering

List of Figures