A4 - Introduction to D3

100%

A4 - Introduction to D3

✓ Published1🌍 Public

Last edited Feb 26, 2024

Created on Feb 21, 2024

Forked from A3 - Visualizing Distributions using P5

This example introduces D3.js through a collection of four interactive visualizations: a bar chart, a scatter plot, a boxplot, and a strip plot with a logarithmic scale. Each chart uses D3’s core modules—`d3.scaleLinear`, `d3.scaleLog`, `d3.axisBottom`, and `d3.axisLeft`—to map data to pixel coordinates and render SVG elements like `rect`, `circle`, and `line`. The visualizations draw from datasets embedded in the accompanying script files, with the boxplot summarizing distributions via quartile calculations. The code is structured as separate VizHub projects linked from a single HTML page, demonstrating basic chart construction without external data files.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

A7 - Time Series in D3

This example demonstrates four time-series visualizations: a multi-line chart, a heatmap, small multiples of lines, and a streamgraph. It uses the D3.js library to render SVG elements and scales, with a color legend for each chart to distinguish categories. The data is mapped to time-based axes, and the streamgraph employs stacked area shapes. The code includes interactive tooltips that appear on hover, enhancing data exploration. All charts share a consistent color scheme, and the visualizations are built using D3’s data-binding and selection APIs.

DDuc Pham

81% match

Loading thumbnail…

A3 - Visualizing Distributions using P5

This example visualizes distributions using three interactive P5.js plots: a histogram, a box plot, and a strip plot, each embedded as separate VizHub links. The histogram displays the frequency of numeric values across bins, the box plot summarizes the data’s median, quartiles, and outliers, and the strip plot shows individual data points along a single axis. The visualizations use P5.js for canvas rendering and drawing shapes, with data organized into arrays and processed for statistical summaries. The page is built with plain HTML and CSS links, referencing external VizHub projects for each plot.

DDuc Pham

80% match

Loading thumbnail…

A6 - Color Scales in D3

This example demonstrates four distinct D3.js visualizations, each employing a different color scale type: a bar chart using a sequential color scale, a diverging bar chart with a diverging scale, a scatterplot with a qualitative scale, and a line chart. The code uses D3’s `scaleSequential`, `scaleDiverging`, and `scaleOrdinal` APIs to map data values to colors. Each chart is rendered using SVG elements created via D3’s `select` and `append` methods. The visualizations are embedded as standalone pages, with the bar chart and diverging chart showing categorical comparisons, while the scatterplot and line chart reveal patterns across continuous variables.

DDuc Pham

79% match

Loading thumbnail…

A2 - Visualizing Amounts using P5js

This example presents four P5.js visualizations of amounts: a bar chart, a dot plot, a heatmap, and a bar chart with a logarithmic scale. It uses the P5.js library for drawing and rendering. Each chart is embedded via VizHub links on a plain HTML page. The code demonstrates different approaches for encoding quantitative values, including rectangular bars, circles, color intensity in a grid, and a log-transformed axis for data with wide ranges.

DDuc Pham

79% match

Loading thumbnail…

A8 - Graph Visualization in D3

This example presents a graph visualization as a series of four interactive demonstrations. It first shows a node-link diagram using a force-directed layout, then compares it to an adjacency matrix representation. The visualization then implements edge-bundling for the node-link diagram and concludes with a slider that allows users to modulate the amount of tension in the edge bundling. The examples use D3.js and are embedded from VizHub, with each part linked to its source code.

DDuc Pham

78% match

Loading thumbnail…

D3 Learning

This example demonstrates fundamental D3.js data binding and selection techniques through a simple bar chart. It loads an array of numeric values and maps them to SVG rectangles, with the height of each bar proportional to its corresponding data point. The code uses `d3.select` and `d3.selectAll` to manipulate DOM elements, while the `.data()`, `.enter()`, and `.append()` methods create the visual bars from the dataset. Additionally, it shows how to modify text content and styles on headings and paragraphs, illustrating both static selection and dynamic data-driven rendering in React.

Tthanhtrant219

77% match

Loading thumbnail…

Lets make face with D3.js

This example visualizes a simple bar chart from an array of numeric values, `[4,8,15,16,23,42]`, where each value determines the width of a colored bar. The page uses D3.js v5 loaded from a CDN, alongside plain HTML and CSS, to render the bars with steel-blue backgrounds and right-aligned white text inside each div. The chart demonstrates basic data binding and styling without complex D3 scales or axes, relying instead on static div elements with inline width styles. It serves as a minimal introduction to representing data as proportional rectangles.

Kkhuton

77% match

Loading thumbnail…

Learn D3.js

This example shows a simple bar chart built with D3.js v4, where each bar’s height corresponds to a value from a hardcoded JavaScript array of nine numbers. The chart is rendered as SVG inside an HTML page, with a title and a dedicated `<svg>` element. The code uses `d3.select` to set the SVG dimensions, `selectAll` with `data` and `enter` to create rectangles, and `attr` to position each bar via a `translate` transform based on its index. The bars are drawn from the bottom, using the SVG height minus the data value for the y-coordinate.

Ii202081

77% match