Skip to main content
Log in
T

TerribleCactus

@TerribleCactus·11 public vizzes

Loading thumbnail…

Cesto di frutta

Six fruits sit in a bowl, each drawn as a colored circle with a label. The bowl and fruits update through timed transitions, removing an apple, changing a fruit to a lemon, and deleting another apple. The example uses D3 v5’s data joins, `selection.merge`, and `scaleOrdinal` for color and radius mapping, rendering SVG shapes within a single declarative `fruitBowl` function that re-renders on each state change.

Aug 31, 2020
Loading thumbnail…

World Population (Area chart)

This area chart visualizes the growth of world population from historical data by year. The chart uses a time-scaled x-axis and a linear y-axis, with a smooth, curved area path rendered in maroon. The visualization is built using D3 v5, employing the `area` generator with `curveBasis` and `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs. The y-axis labels are formatted to abbreviate billions as millions. Data is loaded from a CSV file hosted on VizHub.

Aug 31, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, sourced from the UCI Machine Learning Repository’s Auto MPG data set. It uses d3.csv to load data, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render tick marks with grid lines. Circles are appended to an SVG container, with styling controlled via CSS. The chart includes axis labels and a title, emphasizing the correlation while leveraging d3.v5’s data-binding capabilities.

Aug 31, 2020
Loading thumbnail…

Cars Scatter Plot)

This scatter plot visualizes the relationship between horsepower and weight for a set of cars, plotting each vehicle as a semi-transparent red circle. The chart uses D3 v5's `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and `csv` to load the auto-mpg dataset from a remote URL. The SVG rendering applies custom styling for axis labels, tick colors, and a title, with a fixed circle radius of 15 pixels.

Aug 30, 2020
Loading thumbnail…

Bar chart

A horizontal bar chart displays population counts for fictional countries, ranked from largest to smallest. Each bar’s length encodes the population value, with countries labeled on the y-axis and population numbers on the x-axis. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG rectangles. Data is loaded from a CSV file and multiplied by 1000. The chart emphasizes clear, direct comparison of magnitudes across categories.

Aug 29, 2020
Loading thumbnail…

Faccia

A cheerful yellow face with black-outlined features stares straight ahead. The composition centers on a smiling arc mouth, flanked by two eyes and rectangular eyebrows. Both eyebrows perform a synchronized blinking animation, moving upward and then returning to their resting position over two seconds via chained `transition().duration()` calls. The visualization is built with React and rendered as an SVG using D3 v5’s `select`, `append`, and `arc` APIs, with static geometry for the face and its parts.

Aug 29, 2020
Loading thumbnail…

React Starter

This example shows a simple React application that renders the text “Hello React!” centered on the page. It uses the React and ReactDOM libraries, directly including them via unpkg in the HTML, then defines an `App` component that returns a div with the message. ReactDOM renders that component into the `#root` element, with styling applied through CSS.

Aug 29, 2020
Loading thumbnail…

Faccia

A simple smiley face, rendered in SVG, fills the viewport with a yellow circle. The code builds the face by layering circles for the eyes and an arc-path for the mouth, using D3 v5 selection and arc generators within a React starter. Eyebrows are added as rectangles, with all elements centered via a translated group. This example demonstrates basic D3 shape generation and SVG manipulation.

Aug 28, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can be combined to create a static, structured composition. It shows circles, rectangles, lines, and a path arranged in rows, with groups using transforms like `scale` and `translate` to position elements. The code uses plain SVG elements (`circle`, `rect`, `line`, `path`) and applies styling through a global stylesheet, including a `.lines` class that sets stroke properties and a separate rule for the path’s color and line join. No JavaScript or external libraries are involved; the rendering relies entirely on the browser’s native SVG support.

Aug 27, 2020
Loading thumbnail…

React Starter

This example shows a simple React application that renders the text “Hello React!” centered on the page. It uses the React and ReactDOM libraries, directly including them via unpkg in the HTML, then defines an `App` component that returns a div with the message. ReactDOM renders that component into the `#root` element, with styling applied through CSS.

Aug 27, 2020
Loading thumbnail…

React Starter

This example shows a single line of text reading “Hello React!” centered on a plain white page, rendered as a React component. The code relies on React and ReactDOM, loading them from unpkg CDN in the HTML and using `ReactDOM.render` to mount the `App` component into the `root` div. A CSS class called `.message` sets the font size and alignment, and the JavaScript uses JSX to define the component’s output.

Aug 27, 2020