Jordan Arnold

Line Chart With Multiple Lines

This example visualizes San Francisco temperatures over time for multiple cities using a multi-line chart. The visualization employs D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes and scales. Data is loaded from a CSV file and grouped by city using `nest`, then each line is rendered via the `line` generator with `curveBasis` smoothing. The SVG render includes gridlines, a rotated y-axis label, and a title, all styled through CSS.

Mar 9, 2021

Color & Size Legends

This example demonstrates how color and size legends are constructed and rendered in an SVG visualization. The code uses D3 v5 selection methods like `d3.select` and scale functions such as `scaleOrdinal` to map data values to visual encodings. A blank SVG container with fixed dimensions is populated programmatically through the bundled JavaScript, while CSS hides page margins and overflow. The visualization relies on D3’s modular imports to manage the legend components, though the concrete data or legend items themselves are not visible in the provided source files.

Mar 9, 2021

Bowl of Fruit - General Update Pattern

Five circles representing apples initially fill the frame. D3's general update pattern adds, removes, and updates SVG `<circle>` elements as the underlying data array changes. The example uses `d3.select` to target the SVG, `d3.scaleOrdinal` to map fruit types to colors and radii, and `d3.range` to generate the initial dataset. After a second, a circle is removed; after another, an apple's type changes to a lemon, altering its color and size.

World Population Area Chart

This area chart visualizes world population growth from 1950 to 2015, using a smooth curved fill to show the increase from roughly 2.5 billion to over 7 billion people. The visualization uses D3 v5 with `scaleTime` and `scaleLinear` for axes, an `area` generator with `curveBasis` for the shaded path, and `axisBottom` and `axisLeft` with custom tick formatting to abbreviate large numbers. Data is loaded via `csv` from a static file, and the SVG renders with a maroon area fill, gridlines, rotated axis labels, and a title.

Temperature in San Fransisco Area Chart

This area chart depicts temperature readings over time in San Francisco, using a smooth curve to trace the trend across the dataset. Rendered as an SVG, the visualization employs D3 v5 APIs like `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with `curveBasis` to generate the filled path. Grid lines and axis labels clarify the timestamp and temperature values, while styling comes from a linked CSS file. The data is loaded via D3’s `csv` method from a remote dataset.

Temperature in San Fransisco Line Chart

This line chart displays temperature readings in San Francisco over time, with a smooth curve plotted across a grid of tick marks and labeled axes. The visualization uses D3 v5 with SVG rendering, importing scaleTime and scaleLinear for axes, line with curveBasis for the curved path, and extent to set the domain from CSV data. The code loads temperature data from a VizHub dataset, parses timestamps and numeric temperatures, and applies custom styled axis labels and a title.

Temperature in San Fransisco Scatter Plot

This scatter plot visualizes hourly temperature recordings in San Francisco, with time on the x-axis and temperature on the y-axis. The code uses D3 v5 with an SVG rendering, employing `scaleTime` for the temporal axis and `scaleLinear` for temperature. It draws circles for each data point and includes axis labels and a title. The data is loaded asynchronously via `d3.csv` from a VizHub-hosted CSV file, and axes are configured with `axisBottom` and `axisLeft`.

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each circle representing an individual vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes with gridlines, while circles are appended to an SVG via data joins. The data is loaded as CSV from an external URL and parsed into numeric values. Styling, including circle opacity and axis label formatting, is defined in an external stylesheet.

Scatter Plot

A scatter plot displays the population of the top 10 most populous countries, with each circle representing a country positioned along a linear population scale and a point scale for country names. The visualization uses d3.scaleLinear and d3.scalePoint to map data from the CSV file, with d3.axisLeft and d3.axisBottom generating gridlines and tick labels formatted via d3.format. Circles are rendered as SVG elements, and the chart includes a title and axis label, all styled through CSS.

Customizing Axes

This bar chart displays the top 10 most populous countries using population data from a CSV file. The visualization customizes both axes by removing default domain lines and tick lines for the categorical y-axis, while adding grid lines and formatted tick labels for the numerical x-axis. Built with D3 v5, the code uses `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to render the SVG chart, with axis tick formatting via `d3.format`.

Fork of Let's Make a Face with D3.js!

This horizontal bar chart displays population figures for ten countries, with each bar’s length scaled linearly from zero to the maximum population. The visualization loads data from a CSV file using `d3.csv`, converts population values to thousands, and renders SVG rectangles with `scaleLinear` and `scaleBand` for positioning. Axes are generated via `d3.axisLeft` and `d3.axisBottom`, while D3 v5’s selection and data-join methods bind the dataset to the graphic.

Let's Make a Face with D3.js!

A yellow smiley face is rendered in SVG, with the head as a circle, two eyes, and a mouth drawn using d3.arc. Animated eyebrows repeatedly move up and down via d3 transitions, changing their transform attribute over two seconds. The face is centered using D3 selections and attribute manipulation, with all shapes positioned relative to the SVG’s center. The visualization uses d3.select, d3.arc, and transition calls, with no external data source.

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, and lines—stylized through both inline attributes and external CSS rules. The shapes are rendered with SVG elements within a 960×500 canvas, using explicit fill colors, stroke widths, and a transform scale applied to the entire group. A secondary group applies CSS classes to define stroke and path styling, while inline attributes handle direct color assignments. The code loads via standard HTML and links to a separate stylesheet, showcasing how SVG and CSS interact for visual customization.

Untitled

This example shows a simple React application that renders a static, unstyled HTML page using CSS and JavaScript. The code uses React to set up a minimal component structure, while the page itself contains no interactive data visualization or charts. It demonstrates the basic integration of React within a plain HTML document, with the README referencing the React Starter template and linking to the VizHub platform. The rendering approach is straightforward, relying on standard React DOM methods without any additional data sources or external visualization libraries.

Cars Report

This example shows a text-based report of cars filtered by price, displaying each vehicle as a formatted string like "2000 Honda Accord: $2800" in a large font on a webpage. It uses the browser’s `document.getElementById` to update an HTML `<pre>` element after fetching data asynchronously through a custom `getCars` function that resolves a promise with a 2-second delay. The report generation relies on array methods `filter` and `map`, combined with a `formatCar` helper to build the output from hardcoded JSON.

Let's make a face with D3.js!

A playful SVG visualization uses D3.js to construct a cartoon face from basic geometric shapes. The example relies on D3 v3's core selection and manipulation methods to append circles and paths directly to an SVG canvas, which is styled with a minimal embedded stylesheet. The code initializes an empty 960×500 SVG and logs the D3 object to the console, demonstrating the library's availability before any visual elements are drawn. No data is loaded; the face is purely declarative, awaiting additional shape definitions.

Oct 2, 2020

Shapes with SVG and CSS

SVG shapes drawn with declarative markup and CSS styling include circles, rectangles, lines, and a path. The HTML defines a single SVG canvas scaled 1.5x, grouping basic geometric elements across four sections: initial default black shapes, colored shapes using `fill` attributes, a group with a shared `fill` and `stroke`, and a line-and-path group with dedicated CSS classes. The CSS file applies stroke width and color via class selectors like `.lines` and `.lines path` with `stroke-linejoin`. No external libraries are used; the code relies directly on the SVG DOM API and CSS.

Oct 1, 2020

HTML Cars Report

This example shows a simple car inventory report by formatting three vehicle listings as plain HTML text. Each car entry appears as a list item with its model year, make, model, and price. The first entry, a 2012 Nissan Leaf, is highlighted in red to draw attention. The page uses vanilla HTML, embedded CSS, and a monospace font at a large size to emphasize the report layout. The stylesheet applies the red highlighting through a `.highlighted` class selector, while the body layout relies on default browser styling.

Oct 1, 2020