Training Example: D3 by Observable – Review the Data, Give Your Score & Compare to the Real AI Evaluation

Skip to content
[H1] D3
The JavaScript library for bespoke data visualizationCreate custom dynamic visualizations with unparalleled flexibilityGet startedWhat is D3?Examples
[IMG: D3]
[H2] Selections and transitions
Create, update, and animate the DOM based on data without the overhead of a virtual DOM.
[H2] Scales and axes
Encode abstract data into visual values such as position, size, and color. Explain position encodings with axes.
[H2] Shapes
Render arcs, areas, curves, lines, links, pies, stacks, symbols… and any geometric primitive you might need to visualize data.
[H2] Interactions
Facilitate exploration with reusable interactive behaviors, including panning, zooming, brushing, and dragging.
[H2] Layouts
Treemaps, trees, force-directed graphs, Voronoi, contours, chords, circle-packing… a library of layout algorithms at the ready.
[H2] Geographic maps
More spherical projections than you can shake a stick at, with arbitrary aspects, adaptive sampling, and flexible clipping.
[H2] … and much more!
CSV parsing, localized date parsing and formatting, color spaces, calendar math, statistics, and can I stop listing features now?
[H2] Powering Observable Plot
The D3 team also builds Observable Plot, a high-level API for quick charts built on top of D3.Try Observable Plot
[H2] Built by Observable
D3 is developed by Observable, the platform for collaborative data analysis.Visit Observable
[H1] Build your best work with D3 on Observable
The only data workflow platform capable of supporting the full power of D3Connect to your data instantlyPull live data from the cloud, files, and databases into one secure place — without installing anything, ever.Code faster than you thought possibleGet everything you need and none of what you don’t with lightweight automatic versioning, instant sharing, and real-time multiplayer editing.Accelerate your team’s analysisCreate a home for your team’s data analysis where you can spin up charts, maps, and data apps to explore, analyze, and iterate on together.Build with D3 on Observable →The JavaScript library for bespoke data visualization

[H1] d3-selection ​
Selections allow powerful data-driven transformation of the document object model (DOM): set attributes, styles, properties, HTML or text content, and more. Using the data join’s enter and exit selections, you can also add or remove elements to correspond to data.See one of:Selecting elements - querying for DOM elements.Modifying elements - modifying attributes of selected elements.Joining data - joining data to selected elements for visualization.Handling events - declaring event listeners for interaction.Control flow - iterating over selected elements.Local variables - attaching state to elements.Namespaces - dealing with XML namespaces.For more, see the d3-selection collection on Observable.