Harshiiiiiiiip

@Harshiiiiiiiip·37 public vizzes

assignment 2 7q

This example shows a network graph of personal friendships between people, with pink circular nodes and orange labels connected by gray directed edges with red arrowheads. It uses d3.forceSimulation with link, charge, collision, and center forces to position nodes, while drag events let users reposition them. The data comes from data.json, rendered as SVG using D3 selections, with hover styling via the nodeHover class.

Jul 21, 2023

Loading thumbnail…

Assignment 2 2q

This stacked bar chart visualizes the estimated 2010 religious composition of the world’s 20 most populous countries, sourced from Pew Research data. Each bar represents a country’s total population, segmented by religious affiliation using color-coded layers. Hovering over a bar reveals a tooltip with the specific religion, country, and population count via d3-tip. Interacting with the color legend highlights that religion’s segments across all bars, fading others through an overlay rect. Built with D3.js, it uses `d3.layout.stack` for stacking and `d3.legend.color` for the interactive legend.

Jul 21, 2023

Loading thumbnail…

Assignment 2 1q

This bar chart displays the population counts of ten countries, with China as the largest bar and Pakistan as the smallest. It uses D3 v7’s `scaleLinear` and `scaleBand` to map population values and country names to SVG rectangles, with axes generated via `axisLeft` and `axisBottom`. Population data from a CSV is loaded with `d3.csv`, with values converted from raw numbers to thousands. The chart renders as a red-filled SVG graphic with a 100-pixel left margin for country labels.

Jul 21, 2023

Loading thumbnail…

Assignment 2 6q

This visualization displays a map of Uruguay using a transverse Mercator projection, with each country region filled in red and outlined in black. The map is rendered as an SVG using D3.js version 5 and TopoJSON to decode geographic data from a GitHub gist. Users can zoom and pan the map via the `d3.zoom` interaction, which applies transformations to the map group. Hovering over a region triggers a CSS transition that changes its fill color to maroon, enhancing interactivity.

Jul 21, 2023

Loading thumbnail…

assignment 2 7q

This interactive tree diagram visualizes a hierarchical dataset showing a root node branching into map types, including world map, continents, and country maps with specific countries like India, Japan, and China. Users can click on nodes to expand or collapse subtrees, with smooth animated transitions between states. The visualization uses D3.js version 3.5.17, specifically the `d3.layout.tree` algorithm and `d3.svg.diagonal` for curved link paths, rendered as SVG with CSS styling. Data is loaded asynchronously from a JSON file, and node positions are normalized at fixed depth intervals of 180 pixels.

Jul 18, 2023

Loading thumbnail…

assignment 2 6q

This visualization shows a map of England with its geographical regions highlighted in solid blue, using a Natural Earth projection to render the country’s shape. The region boundaries are drawn as thin, semi-transparent lines, clarifying internal divisions while keeping the overall outline visible. Built with React and D3 v7, it applies `geoNaturalEarth1` and `geoPath` to project and draw the features from a TopoJSON dataset, with `feature` and `mesh` from TopoJSON separating regions and interiors. The SVG rendering approach is direct, with no interaction or animation.

Jul 18, 2023

Loading thumbnail…

assignment 2 4q

This multidimensional scatter plot maps age and BMI for roughly 250 individuals, encoding insurance charges through circle radius and gender through color. The visualization uses D3 v7 with linear scales for both axes, an ordinal color scale for male/female categories, and square-root scaling to size circles proportionally to charges. Rendered as SVG, the chart includes axes with tick formatting, a legend showing charge minimum and maximum values, and example male/female colored dots, with data loaded asynchronously from a CSV file hosted on GitHub.

Jul 18, 2023

Loading thumbnail…

assignment 2 5q

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository. Users select which columns to map to the X and Y axes via dropdown menus. The visualization uses D3 v5's `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `transition().duration().delay()` methods. Each data point is rendered as a semi-transparent orange SVG circle, with an animated transition as the axis mappings change.

Jul 18, 2023

Loading thumbnail…

assignment 2 3q

This scatterplot shows the relationship between horsepower and weight for a dataset of cars, with each point representing a vehicle. The visualization uses a linear scale to map both variables along the x and y axes, with gridlines and labeled axes for clarity. The code loads data from a local CSV file using d3.csv, transforms the numeric columns, and renders the chart as SVG circles using D3 v5's scaleLinear, axisBottom, and axisLeft APIs. The points are semi-transparent blue circles, and the chart includes a title and rotated axis labels.

Jul 18, 2023

Loading thumbnail…

assignment 2 4q

This animated scatter plot cycles through pairs of Iris flower measurements every two seconds, swapping the x-axis variable among petal width, sepal width, petal length, and sepal length while keeping sepal length on the y-axis. The visualization uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render circles and axes from the Iris dataset loaded via `d3.csv`. The reusable chart pattern, defined in `scatterPlot.js`, updates in place when the interval triggers a new `svg.call(plot)` with changed accessor functions, producing a smooth transition of measurement comparisons.

Jul 17, 2023

Loading thumbnail…

Assignment 2 3q

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width, with each point colored by species (setosa, versicolor, virginica). The visualization uses D3 v6's `csv`, `scaleLinear`, and `axisLeft`/`axisBottom` functions to load data, map coordinates, and render axes within an SVG. While the plot primarily encodes petal measurements, the code also maps sepal length and width to the circle's `rx` and `ry` attributes, though these are overridden by the constant `r` attribute, so the points appear as uniform circles. The title and axis labels are styled with CSS and rendered in a red, serif font.

Jul 17, 2023

Loading thumbnail…

Assignment 2

This example displays a single centered message, “Hello VizHub!”, rendered in large text. It demonstrates a minimal VizHub setup using D3 v5, loaded via UNPKG, and shows how to import both D3 API functions and local ES6 modules. The code uses `d3.select` to target the `#message` div and sets its text content from an imported `message` constant, with CSS styles defining the font size and alignment.

Jul 17, 2023

Loading thumbnail…

Activity 8 Map

This example displays an interactive world map using an equirectangular projection, with countries filled in light green and the ocean in sky blue. It shows the geographic boundaries of nations from the World Atlas TopoJSON dataset, rendered as SVG paths via `d3.geoPath` and `d3.geoEquirectangular`. The map supports zooming through `d3.zoom`, and hovered countries change to maroon using CSS `:hover` rules. The code uses D3 v5 and TopoJSON to convert country features into GeoJSON for visualization.

Jul 10, 2023

Loading thumbnail…

Line chart

This line chart visualizes the cost of sales from 2000 to 2013, sourced from `data.csv` and rendered as an SVG. Built with D3 v6, it uses `d3.scaleBand` for the time-based X-axis and `d3.scaleLinear` for the Y-axis, drawing the trend with a thick light-green stroke via `d3.line`. Axis labels are added with custom styling, and the chart is framed within margins.

Jul 10, 2023

Loading thumbnail…

Country Map

This example displays a map of India, rendered as a single SVG path. It loads country boundary data from the world-atlas TopoJSON collection and filters for India. The code uses `d3.json` to fetch the data, `topojson.feature` to extract the geometry, and a `d3.geoMercator` projection with `d3.geoPath` to draw the landmass. The resulting path is appended to an SVG canvas sized at 960 by 500 pixels.

Jul 10, 2023

Loading thumbnail…

Network Graph

This network graph visualizes a social network of ten people and their friendships, with green circles representing individuals and blue directed arrows connecting friends. Loaded from a local `graph.json` file, the layout is computed using `d3.forceSimulation` with link, charge, collision, and center forces to position nodes. Nodes are draggable via `d3.drag`, and hovering highlights a node by changing its stroke color. The SVG rendering uses D3 v6, with markers defining arrowheads and labels displaying each person’s name.

Jul 5, 2023

Loading thumbnail…

MuscleCars tree

An animated, color-coded tree visualization maps the hierarchy of classic muscle cars, from the root "Muscle Cars" down to specific models and trims like the Mustang, Charger, and Hellcat. The code loads hierarchical data from a JSON tree and renders it as an SVG using D3 v3's `d3.layout.tree`. Interactivity includes click-to-expand/collapse nodes, zoom-and-pan via `d3.behavior.zoom`, and hover tooltips, all styled with custom CSS. The visualization uses rectangles with drop shadows and colored arrows to distinguish hierarchy levels.

Jul 5, 2023

Loading thumbnail…

Area Chart Activity 8

This area chart displays the cost of sales from 2000 to 2013, using a smoothed line and a light green filled region beneath it. The visualization loads D3 v5 and CSV data from a GitHub gist, parsing the year into date objects. It uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, d3.line, d3.area, and d3.curveBasis to render the SVG elements, with red tick labels, orange axis labels, and a thick black stroke for the line.

Jul 5, 2023

Loading thumbnail…

activity 8 task 4

This example demonstrates the minimal setup required for a VizHub project, showing a single HTML page that loads D3 v5 from a CDN and displays a message. It uses an ES6 module to import a custom string and the `select` function from D3, which sets the text content of a targeted division. The rendering approach relies on standard DOM manipulation via D3’s selection API, with CSS styling applied to center the message.

Jul 5, 2023

Loading thumbnail…

Pie Chart

This pie chart displays the count of students from each major at UNT, using a dataset loaded via d3.csv from a GitHub gist. The visualization renders as an SVG with colored slices, value labels, and a legend showing major names and student counts. It uses d3.pie and d3.arc to generate the chart geometry, d3.scaleOrdinal for color mapping, and custom text elements for annotations.

Jul 5, 2023

Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive SVG scatter plot cycles through Iris flower measurements, comparing petal width, sepal width, petal length, and sepal length on the x-axis against sepal length on the y-axis. D3.js (v6) scales axes and animates transitions via `setInterval`, while points are colored by species (setosa, versicolor, virginica) using a manual marker mapping. The example loads data from a remote CSV, builds the chart with a custom `scatterPlot` module using `scaleLinear`, `axisLeft`, and `axisBottom`, and includes a static color legend.

Jul 5, 2023

Loading thumbnail…

Activity 7

A horizontal bar chart displays the populations of 20 countries for 2020, ranked by country name on the y-axis and population magnitude on the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical axis and `scaleLinear` for population values, with SVG `<rect>` elements rendering the bars. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and axis ticks are formatted using `d3.format` to abbreviate large numbers (e.g., converting Giga to Billions). The code includes custom `AxisBottom` and `AxisLeft` components that generate SVG tick marks and labels.

Jul 5, 2023

Loading thumbnail…

Fork of Scatter Plot with Shape

This example shows a scatter plot of the Iris dataset, encoding sepal length on the x-axis and petal length on the y-axis. Species is represented by three distinct shapes via a `scaleOrdinal` with `symbolsFill`, and a custom legend displays the shape-to-species mapping. The code builds reusable modules for axes and legends, loads data with `csvParse` from a remote URL, and renders the visualization using D3 v7’s data-join pattern with `selectAll` and `join`.

Jul 5, 2023

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width across three iris species, with each species represented by a distinct color. The visualization uses D3 v6 to load the CSV data, create linear scales with d3.scaleLinear, and render SVG circles. Axes are generated using d3.axisLeft and d3.axisBottom, with axis labels for both variables. The code also parses additional sepal measurements but uses them only as data attributes rather than for visual encoding.

Jul 5, 2023

Loading thumbnail…

Bubble chart

A bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with bubble size encoding MPG and color distinguishing manufacturers. D3.js v7 loads the CSV data and renders the SVG chart with linear scales for axes and bubble radius, plus an ordinal color scale using `d3.interpolateTurbo`. Hovering reveals a tooltip showing the car make, while custom legends display both the MPG size mapping and color-coded manufacturer categories.

Jul 5, 2023

Loading thumbnail…

IMDb Movie ratings

This visualization displays the distribution of IMDb ratings across different film genres, using a stacked horizontal bar chart where each genre shows the percentage of movies falling into five rating categories. The chart employs D3.js v7 to load and parse CSV data, then uses d3.stack() to create stacked bars with d3.scaleBand() for the genre axis and d3.scaleLinear() for the percentage axis. Interactive tooltips appear on mouseover, revealing the exact percentage for each rating category. The SVG rendering includes a color legend generated with d3.scaleOrdinal().

Jul 5, 2023

Loading thumbnail…

IMDb Movie ratings

This chart displays the distribution of IMDb ratings across six movie genres, with each bar segmented by rating categories from "below 5.0" to "above 8.5." The visualization uses a stacked bar chart rendered with SVG, employing `d3.stack()` for data transformation and `d3.scaleOrdinal` for color mapping. D3 v7 handles axis creation with `d3.axisBottom` and `d3.axisLeft`, while interactive tooltips show exact percentages on hover. The data is loaded from a CSV file and presented as proportional segments.

Jul 5, 2023

Loading thumbnail…

Activity 6

This example loads a CSV file from a GitHub gist and displays the first ten rows as formatted JSON in the browser. It uses D3 v5’s `csv` method to fetch and parse the data, `csvFormat` to calculate dataset size, and `select` to append DOM elements. The page also demonstrates importing local ES6 modules, though the data display is the primary visual output rendered as plain text.

Jul 1, 2023

Loading thumbnail…

Untitled

This example demonstrates loading a remote CSV dataset with D3’s `csv` method and displaying the first ten rows as formatted JSON in the browser. It uses `select` and `append` from D3 to create `<pre>` elements, and leverages `csvFormat` to calculate the dataset’s size in kilobytes. The code also showcases local ES6 module imports via an exported `message` variable, though the message itself is not rendered. The data comes from a GitHub Gist URL.

Jul 1, 2023

Loading thumbnail…

Activity 6

This example demonstrates how to load and inspect a CSV dataset from a GitHub gist using D3 v5 within a Vue framework. It fetches the data with `d3.csv`, formats the first 10 rows as JSON, and appends them to the page as text elements using `select` and `append`. The page also includes a large static message from a local ES6 module and a fixed SVG background image rendered inline.

Jun 30, 2023

Loading thumbnail…

Activity 6

This example loads a dataset from a GitHub Gist using D3’s `csv` method and displays the first ten rows as JSON in a `pre` element. It demonstrates importing D3 modules via UNPKG and using local ES6 modules, with the page styled by a CSS file and rendered as HTML and SVG. The code also computes the data size in kilobytes using `csvFormat`.

Jun 29, 2023

Loading thumbnail…

budhaaaa

A dense field of small, randomly colored polygons fills a black SVG canvas. The piece is generated by a React application that maps a nested array structure to produce multiple overlapping geometric shapes, each with a randomized fill and rotation. The code imports React and ReactDOM, and uses inline SVG elements with the `points` attribute, `fill`, `opacity`, and `transform` properties to render the abstract composition. A separate, intricate path element draws a detailed vector figure, displaying a contrasting static form amidst the chaotic backdrop.

Jun 19, 2023

Loading thumbnail…

Buddha

A generative Buddha illustration rendered as a black-background SVG. The code uses React to render nested loops of random triangular polygons, each colored with randomized RGB values and rotated 45 degrees, while a detailed Buddha silhouette path is overlaid. The visualization combines chaotic generative geometry with a fixed religious iconographic shape, all driven by React’s component structure without any external data inputs.

Jun 14, 2023

Loading thumbnail…

Activity 6 task 5

This chart shows the average Body Mass Index (BMI) by age, computed from a CSV dataset of individual health records. The visualization bins ages into groups and displays the mean BMI for each bin as a blue bar, using a linear x-scale for age and a linear y-scale for BMI. Implemented with D3 v7, it imports utilities like `scaleLinear`, `bin`, `sum`, and `axisBottom` to bin data, compute averages, and render the axes and bars as SVG shapes. The chart is rendered through VizHub, with a styled baseline and clear axis labels.

Jun 14, 2023

Loading thumbnail…

Activity 6 task 4

This example loads the classic Iris flower dataset from a CSV file and computes the average sepal length for each of the three species using D3’s `flatRollup` and `sum` functions. The results are displayed as a formatted JSON summary inside a `pre` element in the browser. Built with D3 v7, the visualization demonstrates asynchronous data fetching with `fetch` and `csvParse`, as well as the use of local ES6 modules for organizing the code.

Jun 14, 2023

Loading thumbnail…

budhaaaaa

A dense cloud of small, rotated polygons fills a black SVG canvas, each shape randomly positioned and colored with high-opacity RGB values generated via `Math.random()`. At the center, a large, intricate Buddha silhouette is drawn as a detailed SVG `<path>` element, layered over the chaotic background. The visualization uses React to render the SVG structure, with polygons generated through nested array maps and the path transformed and scaled via SVG group attributes.

Jun 12, 2023

Loading thumbnail…

budhaaaaa

A chaotic field of randomly positioned, rotated diamond shapes in vibrant colors fills the screen, generated from nested loops over an array of numbers. The React component renders SVG polygon elements, each with random coordinates, fill colors, and transforms, while a large embedded SVG path of a figure is also included. The visual uses React 16 and direct SVG manipulation without any data visualization libraries, creating an abstract, generative composition driven by Math.random() calls.

Jun 7, 2023