VPTomi

@VPTomi·7 public vizzes

Lets make me a ZOMBIE d3 js

This example presents a zombie face constructed from basic SVG shapes, using D3 v5 and React. It demonstrates a simple character animation where the right eye blinks and the right eyebrow moves, while a yellow circle forms the head and a red mouth path is drawn with an arc. The code uses D3's selection, arc, and transition APIs, rendering via SVG and animation.

Sep 19, 2020

Loading thumbnail…

Cars scatter plot

This scatter plot visualizes the relationship between vehicle weight and horsepower using the auto-mpg dataset loaded via d3.csv. The visualization employs d3.scaleLinear for both axes, with the x-axis representing weight and the y-axis horsepower. SVG circles with a fixed radius mark each data point, rendered in steelblue with 50% opacity. The chart includes labeled axes, grid lines created through axis tick sizing, and a title, all styled through the provided CSS.

Sep 5, 2020

Loading thumbnail…

Scatter plot

This scatter plot shows population counts for several countries, with each country positioned along the y-axis and its population scaled along the x-axis. The visualization uses D3 v5 within a React framework, rendering to SVG. It employs `d3.csv` to load data, `d3.scaleLinear` for the x-axis, `d3.scalePoint` for the categorical y-axis, and `d3.axisLeft` and `d3.axisBottom` for labeled gridlines. A custom tick formatter abbreviates large numbers, and circles are appended with a fixed radius of 10.

Sep 2, 2020

Loading thumbnail…

Customizing axes

This example demonstrates how to customize chart axes in D3.js, displaying population data for seven countries as horizontal bars. The y-axis uses a band scale for country names, while the x-axis applies a linear scale with custom tick formatting that converts large numbers to compact notation (e.g., "2.2B"). The code employs scaleLinear, scaleBand, axisBottom, axisLeft, and format from D3 v5 within a React framework, rendering to SVG with custom tick text styling and axis label positioning.

Sep 1, 2020

Loading thumbnail…

Lets make me a ZOMBIE d3 js

A horizontal bar chart displays population data for seven countries, with bars extending rightward from a blue axis on a red SVG background. The visualization uses D3 v5 within a React framework, loading CSV data via `d3.csv` and scaling values with `d3.scaleLinear` and `d3.scaleBand`. Axes are rendered using `d3.axisLeft` and `d3.axisBottom`, while rectangle elements encode the population magnitudes. The chart populates dynamically from the data file, with text labels styled at a large font size.

Aug 30, 2020

Loading thumbnail…

HTML puppies report

The page displays a simple, hand-coded HTML report titled "NEW," listing three used cars with prices, one highlighted in red. Below this, it draws basic shapes using inline SVG, including a red circle with a blue stroke, a thick black line, and a black diagonal path, using raw SVG elements like `circle`, `line`, and `path`. The design relies on a monospace font with a hidden overflow layout via CSS, and the SVG is rendered directly in the HTML without any external JavaScript libraries, making it a static, non-interactive example of declarative vector graphics.

Aug 26, 2020

Loading thumbnail…

Untitled

This example displays a single car object, containing a year and make, as plain text on an HTML page. The data is defined as a JSON string in `cars.js` and parsed into a JavaScript object. The `index.js` file imports this object and uses the DOM API `document.getElementById` to set the text content of a `<pre>` element, rendering the data visually. The visualization relies solely on React and standard browser APIs without any additional libraries.

Aug 24, 2020