A

alobry

@alobry·16 public vizzes

Loading thumbnail…

2 Axis graph for NC analysis

This example visualizes numerical control (NC) analysis data by plotting theoretical positions versus measured deviations, with each point paired to a tolerance zone rectangle. Red and green circles distinguish out-of-tolerance and in-tolerance measurements, while lines connect each measured point to its theoretical anchor. The visualization supports zooming and adjustable tolerance values through interactive inputs. Built with D3 v6, it uses SVG rendering, scaleLinear for axes, d3.extent for domain calculation, and the data join pattern with enter/update/exit to handle re-rendering when parameters change.

Loading thumbnail…

Let's start with D3.js

A yellow smiley face rendered in SVG appears on a gray background, with two black eyes and a black arc-shaped mouth. The eyebrows, drawn as small rectangles, animate upward and then return to their original position over four seconds. Built with D3.js v6, the code uses `select` and `arc` imports, and chains `transition().duration()` calls to create the eyebrow movement.

Loading thumbnail…

Scatter Plot

This scatter plot displays the top 10 most populous countries, using a circle for each nation positioned along a linear population scale and a point scale for country names. The visualization reads population data from a CSV file sourced from the UN World Population Prospects, multiplying values by 1000 to reflect actual figures. Built with D3 v6, it uses `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render SVG elements, with custom tick formatting converting billions to "Md" and dashed grid lines for readability.

Loading thumbnail…

Cars scatter plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars from the UCI Machine Learning repository. It uses D3 v6 to load CSV data, apply linear scales with `scaleLinear`, and render an SVG with circles representing each vehicle. The chart includes labeled axes with gridlines, a title, and marks data points with semi-transparent red circles.

Loading thumbnail…

Some tests with D3js

This example presents a blank SVG canvas within a simple HTML page, structured with two paragraph elements and a stylesheet that removes page margins. The core behavior is driven by a JavaScript file that references a commented-out CSV loading routine for automotive dataset attributes like mpg, cylinders, and horsepower, suggesting a planned but inactive data import pipeline. The visualization itself is minimal, relying on the D3.js v6 library loaded from a CDN, with no active rendering code currently executing. The setup demonstrates a scaffold for potential D3-based scatter plots or charts, though the actual visual output remains unimplemented.

Loading thumbnail…

Object constancy

Five fruits sit in a row as colored circles with labels, shifting position when an apple is removed or changed into a lemon. The d3 selection with a key function preserves each fruit’s identity across updates, while `transition().duration()` animates the circle’s radius to zero on exit and slides the remaining fruits to their new slots. `scaleOrdinal` maps fruit type to color and radius, and all rendering uses SVG.

Loading thumbnail…

Bowl of fruits

Five fruit shapes sit in a row and animate as apples are eaten or replaced by lemons. D3 transitions move the fruit groups horizontally, shrink removed fruit circles to zero radius, and grow new circles on arrival. The example uses `d3.select`, `scaleOrdinal` for color and radius, and the enter/update/exit pattern with `transition().duration()` to choreograph the changes over time.

Loading thumbnail…

World Population

This area chart shows world population growth over time, with the x-axis displaying years and the y-axis showing population in millions. The visualization uses an SVG rendering approach with d3.area, d3.scaleTime, and d3.scaleLinear to construct the smooth curve. Data is loaded from a CSV file containing world population figures by year, and axes are customized using d3.axisLeft and d3.axisBottom with formatted tick labels.

Loading thumbnail…

Temperature in San Francisco

This area chart shows the temperature in San Francisco over time, with a smooth curve representing the temperature values against a timeline. The chart includes labeled axes for timestamp and temperature, a title, and a maroon filled area beneath the curve. The visualization uses D3 v6 with `scaleTime`, `scaleLinear`, and the `area` generator with `curveBasis` to create the smooth path, alongside `axisLeft` and `axisBottom` for the grid and labels. Data is loaded from a CSV file and rendered as SVG.

Loading thumbnail…

Temperature in San Francisco

This line chart shows daily temperature variations in San Francisco over time, with a smooth curve plotted against timestamp and temperature axes. The visualization uses d3.csv to load the dataset, then applies d3.scaleTime and d3.scaleLinear for scaling, d3.line with curveBasis for the smoothed path, and d3.axisLeft/axisBottom for labeled axes with gridlines. The SVG rendering includes styled tick marks, axis labels, and a title, with margins defining the plot area.

Loading thumbnail…

Temperature in San Francisco

This scatterplot displays daily temperature readings in San Francisco over time, with each blue circle representing a measurement on a timeline and temperature axis. The visualization uses D3 v6 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `extent` to set domains, and `axisLeft`/`axisBottom` with tick lines for grid structure. The data is loaded via `csv` from a Data Canvas Gray Group dataset, and circles are appended using a data join, with axis labels and a title styled through CSS.

Loading thumbnail…

Customizing axis

This histogram displays the top 10 most populous countries using a horizontal bar chart. The chart customizes both axes by removing default domain lines and tick marks, while formatting population values with a custom tick format that converts billions to "Md". Built with D3 v6, it uses `scaleBand` and `scaleLinear` for positioning, `axisLeft` and `axisBottom` for axes, and `d3.csv` to load population data from the UN World Population Prospects. The SVG rendering includes a title and axis label, with steel-blue bars and styled tick text.

Loading thumbnail…

D3.js I do

This example shows a bar chart of national populations for the top 13 countries, with the data sourced from a CSV file. The SVG rendering uses D3.js v6, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis, while the bars are drawn as rectangles. The code also includes labeled axes and rotated x-axis tick labels to accommodate country names.

Loading thumbnail…

Let's start with D3.js

A horizontal bar chart displays population figures for twelve countries, sourced from a CSV file based on UN World Population Prospects data. The visualization uses D3.js v6 to construct an SVG, loading data via `csv()` and rendering bars with `scaleBand` and `scaleLinear`. Country labels appear on the left axis, while the bottom axis shows the population scale. The code converts the population values from thousands to absolute numbers and uses `axisLeft`, `axisBottom`, and rectangle elements to present the data clearly.

Loading thumbnail…

SVG With HTML

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in groups with inline and CSS styling. It shows how SVG elements can be transformed using `scale` and `translate` attributes, and how CSS classes like `.lines` control stroke appearance and line joins. The code uses raw SVG markup with no external libraries, alongside a minimal HTML page and a console script that logs a message. The rendering approach relies entirely on SVG’s native coordinate system and styling properties.

Loading thumbnail…

Cars report

This example displays a text-based report of cars priced under $2,000, formatting each entry as a line with the car’s year, make, model, and price. It uses JavaScript arrays and template literals to parse a static JSON dataset and filter the cars by price, then joins the formatted lines into a single message. The report appears inside a `<pre>` element in the HTML page, populated via `document.getElementById().textContent`. The code uses no external visualization libraries, relying solely on vanilla JavaScript and the DOM API for rendering.