H

hlmn4936@gmail.com

@harry123op·23 public vizzes

Loading thumbnail…

Fork of Activity 7_2

This fork of Activity 7_2 displays an area chart of smart mobile users from 2007 to 2024, using a smooth curved line and filled area to show growth over time. The visualization is built with D3 v5, importing `select`, `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, `line`, `area`, and `curveBasis` to create the SVG-based chart. Data is loaded asynchronously from a remote CSV file, with the x-axis representing years and the y-axis showing user counts formatted in compact notation. The chart includes labeled axes and uses margin-based layout with grid lines provided by tick sizes.

Loading thumbnail…

Activity 7

This pie chart visualizes the top 10 store areas by sales, using a dataset fetched via `d3.csv` from a GitHub-hosted CSV file. Slices are generated with `d3.pie()` and drawn as SVG paths using `d3.arc()`, with each slice labeled by its store area and sales value. A legend, built with SVG groups, maps the color-coded categories to their names. The chart uses a custom color scale from `d3.scaleOrdinal()` and is styled with a bordered SVG container.

Loading thumbnail…

auto act 7

This example shows a pie chart of the top 10 automobile makes by total price, with each slice labeled and colored. It uses D3 v7 to load CSV data from a GitHub repository, filters invalid price entries, and aggregates prices by make using `d3.rollups`. The visualization renders slices via `d3.pie` and `d3.arc`, with a legend and labels positioned using `arc.centroid`.

Loading thumbnail…

hr_pie chart

This pie chart visualizes the top 10 store areas by sales, with each slice labeled and a legend identifying store area codes and their corresponding sales figures. Sorted data from a CSV file is loaded via `d3.csv` and rendered using `d3.pie` and `d3.arc`. D3’s ordinal color scale assigns distinct colors to slices, while SVG text elements position labels at arc centroids. The chart includes a custom legend built with D3 selections.

Loading thumbnail…

act 6 Q4 ans

This bubble chart visualizes the relationship between price, battery life, and weight for various smart device brands. Each circle's horizontal position represents price, vertical position represents battery life, and radius encodes weight. Color distinguishes brands, with a legend for weight values and brand names. The chart uses D3.js v7 with `d3.scaleLinear` for axes and bubble sizing, `d3.interpolateTurbo` for color mapping, and loads data from a local CSV file.

Loading thumbnail…

act 3Q ans

This scatter plot visualizes the relationship between horsepower and highway miles per gallon for vehicles, with each point colored by vehicle make according to a D3 categorical color scheme. The visualization loads CSV data from a GitHub repository and renders an interactive SVG chart using D3.js v6, featuring hover tooltips that display the vehicle make and highlight the selected point. The chart includes labeled axes for both dimensions with green axis text, and supports a responsive full-window display.

Loading thumbnail…

act_6_3Q

This example presents a scatter plot comparing battery capacity and range for electric vehicles, with data points colored by manufacturer. The chart uses D3.js to fetch a CSV file from GitHub, convert string values to numbers, and render the plot with axes and a legend. The visualization relies on D3’s `scaleLinear` for axes, `scaleOrdinal` for shapes, and `symbol` to draw each point, while `axisLeft` and `axisBottom` handle axis labels. The code also dynamically resizes the SVG to fit the window and includes a shape legend for the manufacturer categories.

Loading thumbnail…

Hari-Q3

This scatter plot visualizes the relationship between horsepower and range for electric vehicles, with each vehicle represented by a steelblue circle positioned along the two axes. The visualization loads data from a remote CSV file and uses D3.js v7 scales, axes, and selection methods to render the plot. Specifically, it employs `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to map data values to pixel coordinates and display labeled axes for horsepower and range in miles.

Loading thumbnail…

task_3_ans

A force-directed graph of character relationships is rendered as an interactive network. The visualization uses `d3.forceSimulation` with link and charge forces to position nodes, while `d3.drag` enables user interaction. Each node represents a character, with its size and color indicating relative importance, and connecting lines show pairwise links between them. The layout is computed dynamically as the simulation runs, producing a stable, readable cluster structure. The graph is drawn entirely with SVG elements and styled through the provided stylesheet, which centers the chart and sets a large message caption above it.

Loading thumbnail…

act_6_4_task

This visualization shows the correlation between average horsepower, torque, and highway MPG across car makes, with each bubble sized by MPG and colored by manufacturer. A tooltip appears on hover to display the make name. Built with D3 v7, it uses `d3.csv` to load data, `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with `d3.interpolateTurbo` for colors, and `d3.axisBottom` and `d3.axisLeft` for axes. The SVG renders animated bubbles, a black tooltip, and a legend showing MPG values and color-coded makes.

Loading thumbnail…

Fork of Fork of act_6_3.1task

This scatter plot displays the Iris dataset, showing petal length against petal width, with color-coded points representing the three species: setosa, versicolor, and virginica. Rendered as an SVG using D3 v6, the visualization scales both axes with `scaleLinear` and draws circles via `selectAll` and `join`, with axis labels generated by `axisLeft` and `axisBottom`. The data is loaded asynchronously from a raw GitHub CSV URL, and point colors are assigned through a switch function based on species.

Loading thumbnail…

act_6_3.2task

This example shows a scatter plot of the Iris dataset, comparing sepal length against petal length, with the species of each flower distinguished by different symbols. A shape legend identifies the three species. The visualization uses d3.v7 with functions like `scaleLinear`, `scaleOrdinal`, and `symbol` to map data to positions and shapes, while `axisLeft` and `axisBottom` render the axes. Data is loaded as CSV from a remote GitHub source.

Loading thumbnail…

Fork of act_6_3.1task

This example demonstrates a minimal D3.js setup within VizHub, displaying the text "Hello VizHub!" centered in a full-page message. It shows how to load D3 v5 from a CDN via UNPKG and use ES6 module imports, including a local module that exports the message string. The code explicitly uses the `select` API from D3 to set the text content of an HTML div element, while a separate CSS file styles the text. The visualization is static, with no data processing or interactive behavior beyond the initial render.

Loading thumbnail…

act_6_3task

This example demonstrates how a minimal VizHub project loads D3 from a CDN and uses ES6 modules to display a static text message. The code imports the `select` function from D3 and a local string export, then sets the text content of a div with that message. Rendering uses CSS for centering and a large font size, with the page structured in a basic HTML file.

Loading thumbnail…

act_6_task2Q

This interactive visualization presents a stacked bar chart comparing average flower measurements across three Iris species. The bars display four features—sepal length, sepal width, petal length, and petal width—for each species, with a color-coded legend identifying each feature. Hovering over any segment reveals a tooltip with the specific average measurement in centimeters. The chart loads CSV data via `d3.csv` and uses `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.scaleBand` to position elements, while `d3.stack` computes the aggregated bar segments. The SVG rendering includes horizontal gridlines from `d3.axisBottom` and custom styling.

Loading thumbnail…

Fork of act_6_task_2

This stacked bar chart shows the percentage distribution of IMDb rating levels across six movie genres, highlighting how genre influences audience ratings. The horizontal bars use a diverging color scale for the five rating categories, with tooltips on hover revealing exact percentages, where each bar sums to 100%. The visualization is rendered as an SVG using D3 v7, employing `d3.stack` for data transformation and `d3.scaleOrdinal` for color assignment. The axes, ticks, and labels are generated with `d3.axisBottom` and `d3.axisLeft`, and the interaction relies on D3’s `.on('mouseover')` event handlers.

Loading thumbnail…

act_6_task_2

This stacked bar chart shows how movie ratings are distributed across six genres, with each bar representing 100% of a genre’s ratings divided into five categories from "below 5.0" to "above 8.5." The visualization makes it clear that genres like Documentary skew toward higher ratings, while Action has a much larger share of low ratings. Built with D3.js v7, the chart uses `d3.stack` and `d3.scaleBand` to position the segments and renders as SVG. Hovering over any segment updates a tooltip displaying the exact percentage, formatted with `d3.format`.

Loading thumbnail…

act_6_2010

This bar chart visualizes the top 20 countries by population in 2010. It uses a horizontal layout, with country names on the y-axis and population on the x-axis, formatted in billions. The visualization is built with React and D3 v5, employing `scaleBand` and `scaleLinear` for axes, and SVG rectangles for the bars. Data is loaded asynchronously from a CSV file using D3's `csv` function, and a tooltip displays the exact population value for each bar.

Loading thumbnail…

act_6_2010

This example presents a bar chart that highlights individual bars on mouse hover. The visualization renders categorical data on the x-axis and a numerical scale on the y-axis, using a muted gray for non-hovered bars and black for the bar under the cursor. Built with D3 scales (`scaleBand`, `scaleLinear`), it leverages the `@curran/responsive-axes` library for axis rendering. Hover interactions are managed via `mouseenter` and `mouseleave` events, updating the `hoveredDatum` state through `setState`.

Loading thumbnail…

Fork of act_6__2000

This bar chart displays the population of ten countries in the year 2000, ordered alphabetically by country name. It uses React with D3 v5 to render SVG bars, with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, and each bar includes a native SVG `<title>` element showing the population in billions as a tooltip.

Loading thumbnail…

act_6

A horizontal bar chart displays the populations of ten countries for the year 2000, sorted by country name. Each bar’s length encodes the numeric population value, with a tooltip showing the formatted value on hover. Built with React and D3 v5, the example uses `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. Data is loaded from a remote CSV via `d3.csv`, and axes and marks are rendered as SVG elements through custom React components.

Loading thumbnail…

act_6

This example demonstrates the basic structure of a VizHub visualization, showing a simple text message rendered in large, centered type on a web page. It loads D3 version 5 via UNPKG, imports the `select` function from the `d3` module, and uses it to target a `#message` div. The code also imports a local ES6 module, `myMessage.js`, to supply the text content, while a separate stylesheet controls the visual styling. This serves as a minimal template for folder-based projects with external dependencies.

Loading thumbnail…

5 Buddha

Five overlapping Buddha silhouettes, rendered in violet, white, and other colors, are arranged diagonally across a canvas with a floral background image using React and SVG path elements. The code defines a single complex path and applies different scale and translation transforms to each of the five groups, creating the layered effect. The visualization uses React 16.10 to manage the SVG output, with each Buddha path drawn via the `path` attribute and styled with varying stroke widths and fill colors.