inu231

@inu231·7 public vizzes

HTML Starter

This example shows a minimal HTML page that displays a large centered text message, “Hello HTML Willy,” in the browser. It uses plain HTML and embedded CSS to style the body with center alignment and a 13em font size. The page contains no JavaScript, data, or external libraries, serving as a bare-bones starting point for web-based projects. It demonstrates the simplest possible structure for rendering static text content in a web page.

Mar 6, 2020

Loading thumbnail…

Untitled

This example visualizes daily temperature readings for three cities—New York, San Francisco, and Austin—as a multi-series line chart over an October timeframe. The data is embedded directly in the source as a tab-separated string parsed with `d3.tsv.parse`. Using D3 v3 SVG rendering, it employs `d3.time.scale`, `d3.scale.linear`, and `d3.svg.line` with basis interpolation to draw smooth temporal trends. A categorical color scale distinguishes each city, and the chart includes axes, a legend, and city labels positioned at the final data point.

Nov 6, 2019

Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays a week of temperature readings from multiple cities around the world as smooth, overlapping line charts. The chart sorts cities by their final temperature values and uses a color legend to distinguish them. Built with D3 v5, the code employs `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis`, `nest`, and `axisBottom`/`axisLeft`. A mouseover interaction uses a `bisector` to find the nearest data point and displays a tooltip with the timestamp and temperature. The data comes from a CSV file loaded via `d3.csv`.

Nov 6, 2019

Loading thumbnail…

Line Chart with Multiple Lines

A multi-line chart shows temperature readings from multiple cities over one week, using color-coded paths to distinguish each city. The visualization includes a custom color legend and interactive mouse tracking that displays tooltips with the exact timestamp and temperature at the cursor position. Built with D3 v5, the code uses `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest`, `line`, and `curveBasis` to structure the data and render SVG paths. The data comes from a CSV file loaded via `csv`, with axes generated using `axisBottom` and `axisLeft`.

Nov 6, 2019

Loading thumbnail…

Page Title

This example shows a multi-line chart plotting name frequency over time, with yearly data points connected to reveal temporal trends. The visualization uses D3 v5 with SVG rendering, mapping years to the x-axis and counts to the y-axis via `d3.scaleLinear`. It applies `d3.axisBottom` and `d3.axisLeft` for axes, and groups data with `d3.nest` before drawing paths with `d3.line`. A categorical color scale (`d3.scaleOrdinal`) distinguishes each name series.

Nov 6, 2019

Loading thumbnail…

Page Title

This example displays a multi-line chart tracking a single name's frequency across years, with each line representing a data group. The chart maps years on the x-axis and numeric counts on the y-axis, coloring each line distinctly using a categorical scale. Built with D3 v5, it uses `d3.nest()` to group data by name, `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.line()` to generate the path geometry. The data comes from an inline array of yearly name statistics, styled with CSS that removes page margins.

Nov 6, 2019

Loading thumbnail…

Page Title

A yellow SVG face with black eyes and a curved mouth sits centered on a gray background. The eyebrows are rectangles that animate upward and then return, creating a surprised expression. Built with D3 v5, the visualization uses `d3.arc` to construct the mouth path and chained `transition().duration()` calls to move the eyebrow group, with elements positioned via SVG transforms and attributes.

Nov 6, 2019