Nyarmussa

@Nyarmussa·5 public vizzes

Bar Chart Test

This example shows a horizontal bar chart ranking the 23 most populated U.S. counties, with each bar labeled with its exact population count. The visualization uses React with D3 v5, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with `axisLeft` and `axisBottom` for ticks. Data from the CSV file is loaded via `csv()`, and bars are rendered as SVG `<rect>` elements. The chart includes a title, axis label, and a fixed 900×500 SVG canvas.

Apr 12, 2020

Loading thumbnail…

Bar Chart Test

This bar chart displays the populations of the most populous U.S. counties, with each bar’s length representing the population in thousands. The SVG visualization is built using React and D3 v3, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Data is loaded from a local CSV file via `csv()`, and the chart includes axes generated with `axisBottom` and `axisLeft`. Rectangles are colored green via CSS, while a label for the x-axis is appended, though a commented-out section indicates incomplete value labels.

Apr 5, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each red, semi-transparent circle represents a car, with its position determined by the car’s horsepower (horizontal axis) and weight (vertical axis). The visualization uses d3.scaleLinear to map data values to pixel coordinates, d3.axisLeft and d3.axisBottom for labeled axes, and d3.csv to load the data. Axes omit domain lines, while custom text elements label the axes and title, and the SVG rendering applies opacity for overlapping points.

Apr 5, 2020

Loading thumbnail…

Untitled

This example shows a blank SVG canvas with margins set for a bar chart, but no data or visual elements are rendered yet. The code initializes D3.js scales—a band scale for the x-axis and a linear scale for the y-axis—and appends a group element positioned with a 100-pixel offset. The framework is React, and the rendering relies on SVG. No data source is specified, and the visualization remains an empty scaffold awaiting data binding and plot elements.

Apr 4, 2020

Loading thumbnail…

React Starter

This example shows a minimal React application that renders the text “Hello!” centered on the page. It uses React 16.10.0 and ReactDOM to mount a functional component into a `#root` div, with the message styled via a CSS class. The component returns a single `<div>` element, demonstrating the basic structure for a React-based visualization setup without any data or interactive features.

Apr 4, 2020