R

Resl411

@Resl411·19 public vizzes

Loading thumbnail…

Line chart with multiple lines

This line chart displays the number of reviews per state across the days of a year, with multiple colored lines representing individual states. The visualization includes an interactive color legend that highlights a selected state while dimming others. Built with D3 v5 and rendered as SVG, the code uses `d3.csv` for data loading, `d3.nest` for grouping by state, and `d3.line` with `curveBasis` for smooth lines. Axis labels and a title are added, while the legend is implemented through a custom `colorLegend` function. The underlying data comes from the provided external CSV dataset.

Loading thumbnail…

Line chart with multiple lines

A multi-line chart displays the number of reviews per day for different states, using D3.js v5 and SVG rendering. A brushless color legend lets users click to highlight or dim specific state lines. The chart uses `d3.nest`, `d3.line` with `curveBasis`, and `scaleOrdinal` with `schemeCategory10` for colors, with data loaded via `d3.csv`. The dataset covers a year of daily review counts across states.

Loading thumbnail…

Line chart with multiple lines

A line chart displays the number of reviews per day for multiple US states, with each state represented by a colored line. A legend allows clicking to highlight or fade individual states. Built with D3 v5, the visualization uses `d3.nest`, `d3.line`, `d3.curveBasis`, `scaleLinear`, and `scaleOrdinal` with `schemeCategory10`. Data is loaded via `d3.csv` from a VizHub dataset. SVG rendering includes axes, gridlines, and a title.

Loading thumbnail…

Untitled

This interactive line chart displays temperature data through time, with a dropdown to switch between Fahrenheit and Celsius scales. The visualization renders multiple city temperature series as smooth cardinal curves, using D3 v5 with SVG and animated transitions. A mouse-over interaction uses a bisector to find the nearest date, displaying a vertical guide line, value labels, and colored circles for each city at the hovered position. The y-axis updates dynamically with the selected metric via a smooth transition.

Loading thumbnail…

Line chart with multiple lines

This line chart displays the number of reviews per day for different states, with each state’s data represented by a colored line and a legend that allows filtering by clicking. The visualization uses d3’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `line` with `curveBasis` to render smooth paths, alongside a custom `colorLegend` for interactive selection. Data is loaded from a CSV file via d3’s `csv` method, and the chart updates by re-rendering the nested groups when a legend item is clicked.

Loading thumbnail…

Untitled

This interactive line chart displays temperature data in either Fahrenheit or Celsius from a CSV file, with a dropdown menu to switch between metrics. The visualization uses D3.js v5 to render SVG paths with cardinal curve smoothing, and includes a hover tooltip that reveals exact dates and values using bisector-based mouse tracking. The chart updates its y-axis domain and line paths dynamically when the metric changes, with CSS transitions providing smooth animations.

Loading thumbnail…

Line chart with multiple lines

This line chart visualizes the number of reviews per day over the course of a year, with a single green line tracing the trend across a time axis. The chart uses D3 v5 to load CSV data from a VizHub dataset, scales the day and review values with `scaleLinear`, and renders the line using `line` with a `curveBasis` interpolation. Axes are drawn with `axisBottom` and `axisLeft`, including grid lines, while the SVG output is styled with custom CSS for tick labels and the line path.

Loading thumbnail…

Reviews per day of a year in a line chart

This visualization displays the number of reviews posted each day across a year using a green line chart. The x-axis represents time, while the y-axis indicates the review count. Built with D3 v5, the code employs `select`, `csv`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, `curveBasis`, `extent`, and `format` APIs to load the CSV data, scale the axes, and generate smooth SVG paths. Grid lines and axis labels are styled through CSS, with data accessed from a remote VizHub dataset.

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered with SVG: a color legend for ordinal data and a size legend for quantitative data. The color legend maps fruit names to distinct colors, while the size legend uses `d3.scaleSqrt` to encode numeric values through circle radii. Both legends use D3 v5’s data join pattern, with Enter and merge selections to update ticks. The size legend calculates tick values via `scale.ticks` and filters out zero.

Loading thumbnail…

Bowl of Fruit - General Update Pattern!

A bowl of fruit animates through a general update pattern using D3 v5 selections, showing circles representing apples and lemons as they enter, update, and exit. The visualization uses `selection.data` with object identity keys, `transition` for smooth radius changes, and ordinal scales for color and size. JavaScript `setTimeout` calls trigger three sequential state changes: removing a fruit from the end, changing an apple to a lemon, and filtering out a middle fruit. Circle elements are appended to an SVG canvas, with enter transitions starting at radius zero and exit transitions shrinking back to zero before removal.

Loading thumbnail…

Reviews per day of a year

A scatter plot displays the number of reviews per day across a year, with each circle representing a single day and its review count. The visualization uses D3 v5 with an SVG rendering approach, employing `scaleLinear` for both axes and `axisBottom`/`axisLeft` for tick marks. Data is loaded from a CSV file via `csv`, and the plot includes axis labels and a title. Circles are styled with semi-transparent steelblue fill to show density variations.

Loading thumbnail…

Customizing Axis.js

A horizontal bar chart displays the ten most populous countries from a CSV file, with population values scaled to thousands. The chart uses D3 v5 to create linear and band scales for axes, while customizing axis elements by removing domain lines and tick marks from the left axis. Axis labels and tick formatting abbreviate population numbers using `format('.3s')`, replacing G with B for billions. The title "Top 10 Most Populous Countries" appears above the chart, with steelblue bars rendered in SVG.

Loading thumbnail…

Let's make a face with D3.js

This example shows a horizontal bar chart of the world’s ten most populous countries, using population values from a CSV file. The chart ranks countries by population, with bars rendered as steelblue rectangles on an SVG canvas. The code uses D3 v5’s `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load the data, map population to bar widths, and draw axes. The `render` function appends a group, axes, and rectangles, while CSS styles the visual elements.

Loading thumbnail…

Let's make a face with D3.js

A yellow smiley face drawn with D3.js appears centered on a dark background, with circular eyes, rectangular eyebrows, and a curved mouth built from an arc path. The example demonstrates SVG shape creation and animation using d3-selection and d3-arc, as the eyebrows transition vertically twice via chained `transition().duration()` calls. The face is constructed from fixed numeric constants for spacing and dimensions, rendered inside an SVG element sized 960 by 500 pixels.

Loading thumbnail…

Hello VizHub

This example displays a large, centered “Hello VizHub!” message in bright white text against a dark navy background. It demonstrates basic DOM manipulation and text styling using D3 v5’s `select` method to target a div by its ID, while an ES6 module exports the message string. The text uses the Ubuntu font, loaded via CSS `@import`, and the page is intentionally minimal, with the message occupying nearly the full viewport height.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw and style basic geometric shapes using SVG and CSS. It shows circles, rectangles, lines, and a path, with some shapes using explicit fill and stroke attributes while others inherit styling from CSS classes. The code uses D3.js's `select` function to set text content, though the visual output relies entirely on raw SVG markup within an HTML file. The SVG is scaled and translated to arrange the shapes in distinct groups, with the CSS applying stroke properties to the line elements.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw and style basic geometric shapes using SVG and CSS. It shows circles, rectangles, lines, and a path, with some shapes using explicit fill and stroke attributes while others inherit styling from CSS classes. The code uses D3.js's `select` function to set text content, though the visual output relies entirely on raw SVG markup within an HTML file. The SVG is scaled and translated to arrange the shapes in distinct groups, with the CSS applying stroke properties to the line elements.

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report generation tool. It loads car data from a hardcoded JSON array, filters the cars based on a maximum price threshold, and displays a formatted list of matching vehicles. The page initially shows “Loading…” before using a JavaScript Promise with a simulated two-second delay to fetch the data. The code uses ES6 modules, the `formatCar` function, and assembles the final output using the `join` method, with styling controlled by Cascading Style Sheets (CSS).

Loading thumbnail…

Hello VizHub

This example displays a large, centered “Hello VizHub!” message in bright white text against a dark navy background. It demonstrates basic DOM manipulation and text styling using D3 v5’s `select` method to target a div by its ID, while an ES6 module exports the message string. The text uses the Ubuntu font, loaded via CSS `@import`, and the page is intentionally minimal, with the message occupying nearly the full viewport height.