C

cyro666

@cyro666·17 public vizzes

Loading thumbnail…

Let's make a face with D3.js

A smiling yellow face with animated eyebrows is drawn entirely with SVG shapes, including circles for the head and eyes, rectangles for eyebrows, and an arc-generated mouth. The eyebrows rise and fall repeatedly via chained `transition` calls that animate the `transform` attribute over two seconds each. Built with D3 v5, the example uses `select` to manipulate the SVG, and imports the `arc` generator from the `d3` module to create the mouth path. A button click logs a message to the console.

Loading thumbnail…

Bowl of Fruit - Hower to Select

A bowl of fruit demonstrates interactive selection and data updates. Apples and lemons appear as colored circles, with a black outline highlighting the fruit under the mouse. The example uses D3 v5 with a `scaleOrdinal` for colors and radii, and `transition().duration()` for smooth enter, update, and exit animations. The data is simulated client-side with `Math.random()` IDs, and selection changes trigger a re-render via `setSelectedFruit`. Apples are removed and a lemon replaces one apple over time, showing live updates.

Loading thumbnail…

Just some width/height stuff

This example displays a full-window rounded rectangle whose dimensions adapt to the current browser viewport. The SVG canvas is sized to match the body’s client width and height, and a single `<rect>` is appended with the same dimensions and a 40-pixel corner radius. The code uses `d3.select` to target the SVG element, `d3.attr` to set the width and height, and CSS fixed positioning to remove page scrolling. The rectangle fills the entire screen, creating a simple, responsive background effect.

Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles representing fruit animate into a bowl. Clicking a fruit selects it, giving it a black outline, and a sequence of timed updates replaces an apple with a lemon, removes fruits, and pops one. Built with D3 v5, it uses `selection.transition().duration()` for SVG circle animations, `scaleOrdinal` to map the types 'apple' and 'lemon' to colors and radii, and a click handler to update the `selectedFruit` state, all driven by a render function.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern for dynamic data visualizations, showing a bowl of fruit that changes over time as apples are removed and one apple transforms into a lemon. The visualization uses SVG rendering with animations to smoothly transition between states. The code employs d3.v5’s selection, merge, and transition APIs, including `selectAll`, `groups.enter()`, `groups.exit().transition().remove()`, and `.transition().duration(500)` to animate position, radius, and color changes. It uses `scaleOrdinal` from d3 for both color and radius scales, with data-driven updates triggered by `setTimeout` calls.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

The bowl of fruit demonstrates D3’s general update pattern, showing how circles enter, update, and exit smoothly with a 500ms transition. Apples and lemons are distinguished by ordinal color and radius scales, while each fruit’s identity is tracked via a random `id`. The `fruitBowl` function uses `selection.merge` and `transition.attr` to animate radius and x-position changes, and an exit transition shrinks removed fruits to zero before deletion. Data mutations—removing an apple, changing one to a lemon, and filtering—are triggered by `setTimeout` in `index.js`.

Loading thumbnail…

World Population by Year 2015

This area chart shows global population growth from 1960 to 2015, with the x-axis representing time and the y-axis displaying population in billions. The chart uses D3 v5’s area generator with a curveBasis interpolation to create a smoothly filled path, paired with scaleTime and scaleLinear for the axes. Data is loaded as CSV and parsed as Date and numeric population values, with axis labels and tick formatting applied via d3.axisBottom and d3.axisLeft, while the SVG rendering includes custom styling for the maroon fill and gray tick marks.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature in degrees Celsius for San Francisco. The graphic displays time on the x-axis and temperature on the y-axis, with a filled area beneath the curve using a maroon fill. The visualization uses D3.js v5, with `scaleTime` and `scaleLinear` for the axes, and an `area` generator with `curveBasis` to create the smoothed path. Data is loaded from a CSV file, with temperature values parsed as numbers and timestamps converted to Date objects. SVG is used for rendering, with axis labels, gridlines, and a title styled via external CSS.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature measurements in San Francisco, using a smooth curved line to show how temperatures fluctuate over time. The chart includes labeled axes for time and temperature, with grid lines and a title. Built with D3 v5, the code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` with `curveBasis` to render the SVG path. Data is loaded from a CSV file via `d3.csv` and parsed with JavaScript `Date` objects.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each car represented as a red, semi-transparent circle. The chart uses D3.js v5, specifically the `scaleLinear` function for scaling, `axisLeft` and `axisBottom` for the axes, and `extent` to compute the domain from the data. The data is loaded from a CSV file via `csv`, and the visualization is rendered as an SVG. The styles include custom fonts and tick formatting, with axis labels and a title displayed prominently.

Loading thumbnail…

Scatter Plot

A scatter plot displays the top 10 most populous countries, with each country positioned along the y-axis and its population on the x-axis. Circles mark the data points, and the chart includes labeled axes and a title. The visualization uses D3 v5 with `d3.csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom`, rendering as SVG. Population values are multiplied by 1,000 and formatted using `d3.format`, with grid lines extending across the plot.

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the population of ten countries, sorted by size, using D3 v5. The chart customizes axes by removing domain lines and tick lines, and formats population labels with the `format('.3s')` API, converting billions to "B". Data loads from a CSV file with `d3.csv`. The bars use a linear scale, with a labeled axis and title rendered as SVG text.

Loading thumbnail…

Making a bar chart

A horizontal bar chart displays population estimates for ten countries, sourced from a local CSV file (data.csv), with each bar’s length proportional to population. The implementation uses D3 v5’s `scaleLinear` and `scaleBand` to map values to SVG rectangles, alongside `axisLeft` and `axisBottom` for labeled axes. Data is loaded via `d3.csv`, with population values converted to numbers and multiplied by 1000 before rendering. The chart is drawn entirely in SVG, styled with steel-blue bars.

Loading thumbnail…

Shapes with SVG and CSS

This example displays a collection of geometric shapes—circles, rectangles, lines, and a path—rendered as inline SVG elements within an HTML page. It demonstrates how CSS styles, such as stroke, fill, and stroke-width, apply both globally and through class selectors to control appearance. The code uses raw SVG markup and a stylesheet, with groups and transforms to position and scale shapes, offering a simple introduction to combining SVG and CSS for vector graphics.

Loading thumbnail…

HTML Cars Report

This example displays a basic HTML cars report as a bulleted list of three used vehicles with their model years, names, and prices. The page uses plain HTML markup with an external stylesheet, and the styles.css file applies a large monospace font and red highlighting to the first vehicle through a CSS class selector. The code relies on standard HTML elements such as `<h1>`, `<ul>`, and `<li>`, with no JavaScript frameworks or data libraries involved.

Loading thumbnail…

Cars Report

This example shows a simple text-based report of cars filtered by price. It loads a hardcoded JSON dataset of five cars, simulates a network request with a two-second delay, and displays a message element showing “Loading…” until data arrives. The `generateReport` function filters cars below a maximum price and formats each entry using the custom `formatCar` function, which returns a string with year, make, model, and price. The output is rendered into an HTML `<pre>` element.

Loading thumbnail…

Cars Report

This example renders a static “Hello World” message to the screen using React, displaying the text in a large `<pre>` element. The underlying data comes from a hardcoded JSON array of five used cars, each with year, make, model, and price fields, parsed via `JSON.parse` in the `cars.js` module. The React app accesses the DOM element by ID and sets its text content directly, demonstrating a minimal setup where the visualization data is present but not yet visualized.