Jean

@RNXMAJOR·11 public vizzes

Activity7 Area Plot

This chart visualizes car sales versus price for different manufacturers, with each manufacturer represented as a filled, smooth area. The areas show the relationship between price (x-axis) and sales (y-axis) using data from a CSV file. The chart is built with a reusable D3 component that uses `scaleLinear` for axes, `area` with `curveBasis` for the smooth fills, and `scaleOrdinal` with `schemeCategory10` for distinct manufacturer colors. It renders as an SVG.

Nov 3, 2024

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualization displays the classic IRIS dataset, though the code provided actually implements a pie chart of fruit costs. The visualization uses D3.js v6.7.0, specifically the `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` functions to generate a pie chart with color-coded slices and a legend. The data is loaded as CSV from a remote gist URL, aggregated by fruit name, and rendered as an SVG with a viewBox for responsive scaling. The chart includes styled text using the 'Times New Roman' font and custom CSS for layout.

Nov 3, 2024

Loading thumbnail…

Act6_Q4

A bubble chart displays car makes by average horsepower on the x-axis and torque on the y-axis, with bubble size encoding highway MPG and color encoding vehicle category. The visualization labels each bubble with the car make and includes a categorized legend. Built with D3 v7, it uses `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal` to map data, renders SVG circles and text, and loads its data from a CSV file.

Oct 19, 2024

Loading thumbnail…

Act6_Q3

This example shows a scatter plot of the Iris dataset, mapping sepal length to petal length for individual flower specimens. The visualization encodes each species with a distinct symbol shape and a categorical color, with a legend identifying the mapping. The code uses d3.scaleLinear for positioning axes, d3.scaleOrdinal with symbolsFill for shape encoding, and d3.schemeCategory10 for coloring. Data is loaded asynchronously via fetch and parsed with d3.csvParse, with the visualization rendered by d3.select and .join methods.

Oct 19, 2024

Loading thumbnail…

Act6_Task2

This stacked bar chart visualizes the impact of car make on average values for horsepower, torque, and highway MPG. The data from bubblechart.csv is rendered as horizontal stacked bars, one per car make, with each segment’s length proportional to the metric value. The chart uses d3.stack() to create the stacked series and d3.scaleLinear for the x-axis, while d3.csv loads the data and SVG elements are appended via D3 selections. A legend identifies the three categories, and the axis labels clarify the units, with no interactive features beyond the static presentation.

Oct 18, 2024

Loading thumbnail…

Task1_Act6 PArt 2

A horizontal bar chart displays population figures for 20 countries, with bars extending from a shared left axis. The visualization uses React with D3 v5's `scaleBand` and `scaleLinear` to map country names and population values, while `csv` loads data from a GitHub-hosted CSV file. SVG rectangles render each bar, with axes generated via custom React components. Population values are formatted using D3's `format` function, converting numbers to abbreviated labels like "B" for billions.

Oct 17, 2024

Loading thumbnail…

Task1_Act6

This bar chart displays population figures for ten countries in the year 2000, with countries listed along the vertical axis and horizontal bars representing their populations. The visualization uses React with D3 v5, employing d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis. Data is loaded from a CSV file hosted on GitHub, processed with d3.csv to multiply the raw values by 1000, and rendered as SVG rectangles using React components. The code includes custom tick formatting that converts d3's SI notation to billions, and axes are constructed through reusable React components.

Oct 17, 2024

Loading thumbnail…

Task1_Act6

A horizontal bar chart displays the population of 30 countries in 2020, sorted by country name along the vertical axis. Population values are encoded as bar lengths using a linear scale, with green bars and blue tick lines against a white background. The chart is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded as CSV via the `csv` function, with population values multiplied by 1000, and axis labels are formatted using `format('.2s')` to show values in billions.

Oct 17, 2024

Loading thumbnail…

Act6Jean

This example demonstrates a minimal D3.js setup that renders a static text message onto a webpage, serving as a template for VizHub projects. The visualization uses d3.select to update the content of an HTML div, with the message imported from a local ES6 module. The code loads D3 v5 from UNPKG and includes an external stylesheet for styling. A regular expression and a variable declaration are also included in the source, though they do not affect the visible output.

Oct 17, 2024

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A field of semi-transparent circles, each colored with random RGB values, is generated from nested array maps. A single large, intricate Buddha path is layered over them, created from a complex SVG path with numerous coordinate points. The circular background and the detailed foreground shape overlap to create a dense, colorful visual composition. The code uses React to render the SVG elements, with the root element containing both the mapped circles and the fixed Buddha path.

Oct 13, 2024

Loading thumbnail…

Buddha 2

The visualization displays an abstract, multi-layered Buddha silhouette composed of overlapping, randomly generated polygons, each filled with vibrant RGB colors and rotated at 45 degrees. The piece uses React and ReactDOM to render an SVG scene, leveraging nested array maps to create the chaotic polygon field behind a central Buddha path. The path data is drawn from a hardcoded SVG path string, while the background polygons are generated using JavaScript’s `Math.random()` for positioning and color, set against a green page background. The result is a colorful, geometric reinterpretation of a Buddha figure, blending procedural chaos with a clear iconographic form.

Oct 13, 2024