Skip to main content
Log in
C

cherrylmarym@gmail.com

@Cherryl536·17 public vizzes

Loading thumbnail…

Activity 8 Cherryl

This pie chart visualizes the top 10 store areas by sales from a Superstore Sales dataset. The chart applies a rank-based weighting to the sales values before rendering, making higher-ranked areas appear proportionally larger. Built with d3.v7, the visualization uses `d3.pie()` and `d3.arc()` to generate SVG slices, with an ordinal color scale for differentiation. Labels and a legend display store area names and weighted values, while the data is loaded via `d3.csv()` from a GitHub gist.

Apr 12, 2024
Loading thumbnail…

Temperature Area Chart-Activity 8 Cherryl

This area chart visualizes temperature fluctuations in Dallas over a one-week period, with time on the x-axis and degrees Celsius on the y-axis. The chart uses a filled, smooth curve (via `d3.area()` with `curveBasis`) to highlight the temperature wave. Data is loaded from a CSV file using `d3.csv()`, and scales are created with `d3.scaleTime()` and `d3.scaleLinear()`. Axis labels and tick marks are rendered through `d3.axisBottom()` and `d3.axisLeft()`, with the title displayed above the plot.

Apr 12, 2024
Loading thumbnail…

Activity_6 Question_2

This visualization shows the percentage distribution of movie ratings across six categories, from “Below 5” to “Above 9,” for six films. Each horizontal bar is a stacked representation of the proportion of ratings per film. The code uses D3.js v7 with SVG rendering, employing `d3.stack()` to compute the stacked segments and `d3.scaleLinear` and `d3.scaleBand` for positioning. A tooltip displays the exact percentage of each rating category on hover, and a legend identifies the rating bands. The data derives from the provided CSV file.

Apr 6, 2024
Loading thumbnail…

Activity6_Question_3

This scatter plot visualizes the relationship between outdoor temperature and ice cream sales, with points colored by an A/B/C rating category. The visualization uses D3 v7 to load CSV data from a GitHub repository, then maps the temperature and sales measurements to a linear scale. Circles are rendered as SVG elements with colors assigned via a switch statement based on the rating grade. Axis labels are styled green in Times New Roman, with rotated temperature text and bottom ice cream sales label, while D3's `axisLeft` and `axisBottom` functions generate the quantitative scales.

Apr 6, 2024
Loading thumbnail…

Activity6_Question_4

This bubble chart compares the fiber and protein content of different foods, with each bubble's size representing serving size and color indicating the food group. The visualization directly maps Fiber intake on the x-axis and Protein on the y-axis, using `d3.scaleLinear` for positions and bubble radius, and `d3.scaleOrdinal` for categorical coloring. Interactive tooltips, powered by D3’s `.on('mouseover')` and a `.transition()`, display exact values. The chart is rendered as SVG via `d3.select('#my_dataviz').append('svg')`, with data loaded from a CSV using `d3.csv`.

Apr 6, 2024
Loading thumbnail…

Fork of Activity-6

This example demonstrates basic D3.js text rendering on a web page. It uses the D3 `select` function to target an HTML element by ID and set its text content. The visualization loads D3 v5 via UNPKG and imports a message from a local ES6 module. A CSS stylesheet controls the presentation, centering the message and displaying it at a large font size. The code also includes a regular expression and a numeric variable, though these are not used in the visual output.

Apr 5, 2024
Loading thumbnail…

6 Buddhas flower BG

A chaotic scatter of colored square elements, generated with React and rendered as SVG, is layered over a photographic background of flowers. The squares are positioned using a series of nested array maps that multiply random values, producing overlapping, semi-transparent shapes with random RGB fills. A large, intricate SVG path depicting a Buddha figure is also rendered, combining the generative pattern with a more structured visual element.

Apr 4, 2024
Loading thumbnail…

activity6_Task3.2

This example presents a scatter plot of the Iris dataset, showing sepal length against petal length with points colored by species. It uses D3 v7’s `scaleLinear`, `scaleOrdinal`, and `symbol` to encode data, along with custom axis and shape legend modules. The plot loads CSV data via `fetch` and `csvParse`, and demonstrates modular ES6 imports and the general update pattern with `join`.

Apr 4, 2024
Loading thumbnail…

activity6_Task3.1

This visualization displays the Iris dataset as a scatter plot, showing the relationship between petal length and petal width. Each point is color-coded by species (setosa, versicolor, virginica) using skyblue, lightgreen, or orange. The plot includes labeled axes for petal length (y-axis) and sepal length (x-axis). The code uses D3 v6 methods including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, rendering as SVG. Data is loaded from a GitHub-hosted CSV file, with circles positioned using computed x and y scales.

Apr 4, 2024
Loading thumbnail…

Activity6_Task4

This bubble chart displays the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while its radius represents highway MPG and its color distinguishes the manufacturer. The SVG is built with D3 v7, using linear scales, an ordinal color scale with `interpolateTurbo`, and interactive tooltips that follow mouse events. A legend explains both bubble size and color encoding. Data is loaded from a CSV file.

Apr 4, 2024
Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes the distribution of IMDb movie ratings across six genres, showing the proportion of films falling into five rating brackets from below 5.0 to above 8.5. The chart uses a horizontal layout where each genre row is divided into colored segments proportional to their percentage share. Built with D3.js version 7, the visualization loads data from a CSV file and uses `d3.stack()`, `d3.scaleOrdinal()` for the color scheme, and `d3.axisBottom()` for the x-axis. On hover, each bar segment displays the exact percentage value via an interactive tooltip.

Apr 4, 2024
Loading thumbnail…

activity6_Question2

This example shows a horizontal stacked bar chart comparing the percentage of movie ratings across different genres. Each genre (banana, poacee, sorgho, triticum) is a row, and each colored segment represents a rating category's proportion. The chart uses D3 v7's `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `stack()` to create the stacked segments from the CSV data. Hovering over a segment uses a custom tooltip to display the exact percentage for that genre and rating category.

Apr 4, 2024
Loading thumbnail…

Activity6_Question1.2

This visualization displays the populations of 20 countries in 2010 as horizontal bars, using a bar chart format. D3 v5 scale functions, including `scaleBand` and `scaleLinear`, map country names and population values to SVG coordinates, while React components render the axes and marks. The chart sorts data from a CSV file, formats population values with the `format('.2s')` API, and includes a tooltip via SVG `<title>` elements, showing the underlying data source and rendering pipeline.

Apr 4, 2024
Loading thumbnail…

activity6_Question1.1

This visualization is a horizontal bar chart displaying the population of ten countries in the year 2000, with bars sorted by country name and labeled with a formatted tick axis (e.g., “1.2B” for billions). The chart uses React components to render SVG elements, with D3 v5 functions such as `scaleBand`, `scaleLinear`, and `max` to compute scales and domains. Data is loaded asynchronously from a remote CSV file using D3’s `csv` parser, and each bar includes a native SVG `<title>` tooltip showing the population value.

Apr 4, 2024
Loading thumbnail…

activity 6_Task 1

This interactive bar chart displays the 2020 population estimates for 30 countries, using horizontal bars to compare values. Built with React and D3 v5, the visualization renders as an SVG. It loads data from a GitHub-hosted CSV, utilizing `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and D3's `format` function to abbreviate population values (e.g., "1.2B"). Tooltips provide the exact formatted population for each bar.

Apr 4, 2024
Loading thumbnail…

6 buddhas

Six nearly identical Buddha silhouettes overlap and rotate in three-dimensional space against a black background, each rendered as an SVG `<path>` with a black fill and white outline. The React application maps an array of numbers to transform translations and scales, creating a kaleidoscopic composition of the sacred figure. The code uses ReactDOM for rendering and raw SVG path data for the Buddha shape, with JavaScript array operations and functional programming to generate the repeated visual elements.

Apr 3, 2024
Loading thumbnail…

5 Buddhas

The visualization displays an abstract composition of five overlapping Buddha silhouettes, layered with a dense field of randomly generated, colorful polygons that rotate and scatter across a black background. The piece is rendered as an interactive SVG using React and ReactDOM, where the Buddha paths are drawn with complex SVG path data, while the ambient polygon field is generated through nested array mappings and random value calculations. The code employs React’s declarative component structure with inline SVG elements, leveraging JavaScript’s Math.random for generative color and positioning, creating a vibrant, chaotic texture that contrasts with the serene, repeated Buddha forms. The overall effect merges traditional iconography with computational randomness, emphasizing pattern and multiplicity.

Apr 3, 2024