M

mandadi1999

@mandadi1999·40 public vizzes

Loading thumbnail…

Bubble Chart

This bubble chart compares beverage manufacturers by plotting their glucose levels on the x-axis, ratings on the y-axis, and calorie content as bubble size. The SVG visualization uses D3 v7 with `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `d3.schemeSet1` for color coding by brand, and `d3.csv` to load the data. It includes custom legends for both calorie size and beverage categories, with red-stroked, semi-transparent circles at 70% opacity.

Loading thumbnail…

Renewable energy production vs Consumption from 10 Random Countries

This example visualizes renewable energy production versus consumption for nine countries in 2010 using a diverging stacked bar chart. Each bar shows the ratio of energy consumption to production, with bar segments colored by relative production values using a diverging RdYlGn color scale. The visualization uses D3 v7 to load CSV data, apply scales for positioning and color, and render SVG elements including axes, labels, and a linear gradient legend. The chart filters data to aggregate renewable sources and formats each country's values for comparison.

Loading thumbnail…

Earth Surface Temperature HeatMap

This heatmap visualizes Earth’s surface temperature variations from 1753 to 2015, with each cell representing a month’s temperature relative to a base value. The color scale uses a custom ordinal scheme ranging from dark red (warm) to dark blue (cool), while hovering over a cell displays a tooltip with the exact month, temperature, and variance. The visualization is built with D3 v5, using `d3.scaleTime` for axes, `d3.scaleOrdinal` for colors, and `d3-tip` for interactive tooltips. Data comes from a JSON file containing `baseTemperature` and `monthlyVariance` values.

Loading thumbnail…

Scatter Plot Temp Change

This scatter plot visualizes global temperature changes from 1880 to 2016, with each green circle representing the annual mean temperature deviation recorded by either the GCAG or GISTEMP source. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for tick marks, and d3.csv to load the dataset. SVG circles are positioned using the x and y scales, with a title and axis labels rendered as text elements.

Loading thumbnail…

PM 2.5 Particle Change in US

This interactive choropleth map visualizes annual PM2.5 particle concentrations across US counties from 2000 to 2018. A slider and play button animate through years, updating county fill colors via d3.scaleSequential with interpolateYlGnBu. The visualization uses d3.geoPath with geoIdentity projection, TopoJSON county and state boundaries, and React state management for temporal navigation. County-level data comes from a CSV file, with hover tooltips showing exact values.

Loading thumbnail…

Scatter Plot with D3.js

This scatter plot visualizes the relationship between battery power and mobile weight using a dataset loaded from a CSV file. The visualization uses D3.js v5 with SVG-based rendering, employing `d3.csv` to fetch data, `d3.scaleLinear` for axis scaling, and `d3.axisBottom`/`d3.axisLeft` to display the axes. Each data point is represented as a steelblue circle. The chart includes labeled axes for both variables, with the x-axis showing battery power and the y-axis showing mobile weight.

Loading thumbnail…

England Regional Map

This example displays a choropleth-style map of English regions in pink, with neutral gray interior boundaries, rendered as an SVG using React. The map loads TopoJSON data via a custom `useData` hook, then converts it to GeoJSON with `feature` and `mesh` from topojson. The `Marks` component projects the geographic coordinates using `geoNaturalEarth1` and draws paths with `d3.geoPath`. The visualization demonstrates the integration of D3 v7’s geospatial utilities within a React component structure.

Loading thumbnail…

World Map

This example displays a world map using a natural Earth projection, rendered as an SVG with D3 version 5 and TopoJSON. It highlights country boundaries with pink fills and maroon strokes, overlaid on a green sphere outline that represents the globe. The map is drawn using `d3.geoPath` with `geoNaturalEarth1` projection, while country geometries are loaded from a remote TopoJSON file and converted via the `feature` method from TopoJSON. The data source is a gist containing country coordinates.

Loading thumbnail…

world Map

This visualization displays an interactive world map using a simple equirectangular projection. Countries are rendered as SVG paths with light green fills and indigo outlines, with hover states that turn them maroon. The map supports pan and zoom interactions. The code uses d3.geoEquirectangular, d3.geoPath, and d3.zoom, loading GeoJSON data from the world-atlas TopoJSON file via topojson.feature.

Loading thumbnail…

Scatter Plot

A scatter plot visualizes the relationship between total bill amounts and tip amounts for restaurant customers, with circles colored blue for male patrons and red for female patrons. Built with D3 v5, the visualization loads data from a CSV file using `d3.csv` and renders SVG circles positioned by `d3.scaleLinear` scales. The chart includes axes created with `d3.axisBottom` and `d3.axisLeft`, along with custom labels and a title, all rendered within an SVG container.

Loading thumbnail…

Fatal Police Shootings stacked Bar

This stacked bar chart visualizes fatal police shootings by race, with each bar segmented by the victim's fleeing behavior. The chart uses Vega-Lite's API to encode race on the x-axis, count on the y-axis, and flee status as color. The data is loaded via D3's `csv` function from a GitHub Gist, and the visualization is rendered using the `vega-lite-api` with React and a custom tooltip handler.

Loading thumbnail…

Bar Chart

This bar chart displays the average share of renewable energy production from 2000 to 2020 across EU member states. It uses the p5.js library, loading CSV data via `loadTable` in a `preload` function and rendering custom axes, tick marks, and bars through functions like `drawTicks`, `drawAxis`, and `drawBars`. The bars are drawn with `rect` after translating coordinates, with heights scaled proportionally via `getHeight`, and the chart includes a title and axis labels.

Loading thumbnail…

assn2t5

This example shows a scatter plot of Twitch streamers, plotting total followers against total streaming time in minutes, with points colored by language. The chart uses a log scale for the x-axis and a linear scale for the y-axis, and includes a color legend for the language categories. The visualization is built with D3 v7, using `scaleLog`, `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` to map data from a CSV file, with custom reusable modules for axes and color legend rendering.

Loading thumbnail…

Assn2t7_graph

This example shows a force-directed network graph of social relationships among eight people, where nodes represent individuals and links depict "Friend with" connections with varying strengths. The visualization uses D3 v6’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to position nodes, with drag interactions to move them. Black circles with lime labels render via an SVG, and hovering highlights nodes via a CSS class. The data comes from `data.json`, containing node groups and link relationships.

Loading thumbnail…

Assignment2_Task7_Tree

This animated tree diagram shows hierarchical geographic data, with continents branching into countries and cities. The visualization expands nodes progressively using D3’s `d3.layout.tree` and `d3.svg.diagonal` APIs, with each node’s position calculated by depth. Node colors derive from the dataset’s `fill` properties, while SVG circles and text labels update dynamically through node enter/update transitions. The code uses D3 version 3.5.17 to render the structure, with fixed-depth spacing and a 500-pixel-tall frame.

Loading thumbnail…

Graph

A force-directed graph displays a genealogy of Vijayanagara dynasty rulers, with orange circular nodes labeled by name and connected by lime-green links. The visualization uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes and prevent overlap. Data loads from a JSON file via `d3.json`, and the static color scheme in the data is overridden by the uniform orange fill applied in the rendering, which uses SVG elements.

Loading thumbnail…

Top Populous Countries Bar Chart

This chart visualizes the top populous countries using a bar chart in D3 version 6. It displays each country along the x-axis and its population on the y-axis, with population numbers labeled above each bar, highlighting the relative population sizes. The visualization dynamically loads and parses text data from a Gist file via `d3.text()` and `d3.csvParse()`. It constructs an SVG with `d3.select()`, `d3.scaleBand()`, `d3.scaleLinear()`, `d3.axisBottom()`, and `d3.axisLeft()`, rotating the x-axis labels 65 degrees for readability. The title "Top Populous Countries" is added at the top of the chart.

Loading thumbnail…

asnn2_task1

A horizontal bar chart displays the greenhouse gas emissions in 2019 for the top 11 GDP countries, using a dataset with country names and population values. The chart, rendered as SVG with D3 v7, maps population to bar width on a linear scale and country names to vertical bands on a band scale. Tooltips appear on hover, showing the exact emission value, and the bars darken temporarily when the mouse is over them. The visualization includes axis labels and a title, with axes generated using `axisLeft` and `axisBottom`.

Loading thumbnail…

Top Populous Countries Bar Chart

This bar chart displays the populations of the five most populous countries, with each bar’s height and label reflecting the raw population figure. The visualization is built with D3 v6, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the continuous y-axis, and `d3.axisBottom` and `d3.axisLeft` to render the axes. Population values are shown directly above each bar as SVG text labels, and the chart is rendered entirely as inline SVG elements within the page.

Loading thumbnail…

activity 8- network

This interactive network graph visualizes a social network of ten people, with circular nodes representing individuals and directed blue lines with markers indicating friendships. The visualization uses D3.js v6 with its force-directed simulation API (`d3.forceSimulation`) to position nodes, applying link, many-body, collision, and centering forces. Data is loaded from a local JSON file, rendered as an SVG, and styled with CSS. Nodes are draggable, and hovering highlights connections through a focus class.

Loading thumbnail…

Activity 8 task 6

This interactive tree visualization shows the hierarchy of muscle cars organized by manufacturer, with Ford and Dodge at the top level and individual models like Mustang, Torino, Charger, and Challenger as child nodes. The D3.js v3 layout uses a custom tree algorithm with color-coded nodes by type level, and the SVG rendering includes zooming, panning, and click-to-expand functionality. The implementation leverages d3.layout.tree, d3.behavior.zoom, and d3.select to manage the animated transitions between collapsed and expanded states, with a JSON file providing the hierarchical data.

Loading thumbnail…

Activity 8 india map

This interactive SVG map displays the geographic outline of India. The visualization uses D3 version 5 to load world country data from a TopoJSON source via the `d3.json` function. It extracts the India geometry using `topojson.feature`, applies a Mercator projection with `d3.geoMercator().fitSize`, and renders the resulting path with `d3.geoPath`. The map is drawn as a single dark path on a light background within a 960-by-500 pixel SVG canvas.

Loading thumbnail…

Activity 8_task 4

This area chart visualization displays the cost of sales from 2000 to 2013 using D3.js v5, rendering SVG elements. It employs d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.area with d3.curveBasis to create a smooth, filled area beneath a line chart. The data is loaded from a CSV hosted on GitHub, with year values parsed as dates and costs converted to numbers. Axis labels are styled with orange bold text, and gridlines use a light gray color, while the area fill appears light green against a black stroke.

Loading thumbnail…

Activity 8 _task3

This example visualizes the cost of sales from 2000 to 2013 using a line chart rendered in SVG. It shows the yearly cost values from the CSV data, with a red title and axis labels, and a light green line connecting the data points. The code uses D3 v7 to load the data with `d3.csv`, define a linear scale for the y-axis and a band scale for the x-axis, and draw the line via `d3.line`. The axes are added using `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Activity 8_task2

This pie chart shows the count of students from each major at UNT, with percentage labels displayed inside each slice and a legend identifying the major names alongside their student counts. The visualization uses D3 v5’s `pie` and `arc` functions to generate the chart, with `scaleOrdinal` assigning colors from a hardcoded array. Data is loaded asynchronously from a CSV via `d3.csv`, and the SVG rendering positions the pie at the center with a separate legend group. The chart also formats numeric labels using `d3.format`.

Loading thumbnail…

Activity 8_task1

This animated scatter plot visualizes the Iris flower dataset, showing relationships between sepal and petal measurements with color-coded species (setosa, versicolor, virginica). The visualization cycles through four variable combinations on the x-axis every few seconds using `setInterval`, while the y-axis displays petal width. Built with D3.js v6, it uses `scaleLinear`, `axisBottom`, and `axisLeft` for axes, with SVG circles for data points. The code creates a reusable scatter plot module and renders an interactive legend with custom colors and rotating axis labels.

Loading thumbnail…

activity 7 Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each bubble’s position maps horsepower on the x-axis and torque on the y-axis, while its radius encodes highway MPG and its color distinguishes the car brand. Tooltips display the make on hover. Built with D3 v7, it uses SVG circles, d3.scaleLinear for axes and size, d3.scaleOrdinal for color, and interpolateTurbo, with data loaded from a CSV. A legend shows MPG values and brand colors.

Loading thumbnail…

Activity 7 Scatter Plot with Shape

This scatter plot displays sepal length versus petal length for iris flowers, using distinct shapes to encode the species of each sample. Data is loaded from a remote CSV file and parsed with `d3.csvParse`. The visualization is built with D3 v7, using `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.symbolsFill` to map species to symbols, and `d3.symbol` to generate the shape paths. A legend is rendered manually to identify each species shape.

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, showing petal length and petal width on the x- and y-axes, with points colored by species (setosa, versicolor, and virginica). The visualization uses D3 v6 to load CSV data from a GitHub gist, scales the axes with `scaleLinear`, and renders circular marks via SVG. It also maps sepal length and width to each circle’s horizontal and vertical radius, creating an additional layer of variation. Axis labels and tick text are styled through D3’s `axisBottom` and `axisLeft` APIs.

Loading thumbnail…

Activity 7_task_2

This stacked bar chart shows how movie ratings are distributed across genres, with each bar representing the percentage of films falling into five rating categories from “below 5.0” to “above 8.5.” Hovering over a segment displays a tooltip with the exact percentage for that rating level. The visualization uses d3.stack() to aggregate the data and d3.scaleOrdinal with a custom color palette for the categories. Axis labels, a legend, and the loading of data.csv via d3.csv are also implemented.

Loading thumbnail…

Activity_7_task3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width for three flower species. Each circle is color-coded by species (skyblue for setosa, lightgreen for versicolor, orange for virginica), and the axes are labeled "Petal_Length" and "sepal_Length" (the latter mislabeled). The code loads CSV data from a GitHub URL using d3.csv, maps the data to x/y positions with d3.scaleLinear, and renders SVG circles with d3.select and .join. Axes are drawn using d3.axisLeft and d3.axisBottom, with the chart sized to the full browser window.

Loading thumbnail…

Activity7_task2

This stacked bar chart shows the percentage of movies within each rating category across six genres, with segments representing rating levels from “below 5.0” to “above 8.5.” Hovering over a bar segment displays an exact percentage via a tooltip. The visualization is built with D3 v7, using `d3.stack()` to generate the stacked data, `d3.scaleLinear` for the x-axis, and `d3.scaleBand` for the y-axis. The data comes from a CSV file loaded with `d3.csv()`, and the chart is rendered as an SVG.

Loading thumbnail…

Activity 7_task1_q2

This bar chart displays the 20 most populated countries in 2020, using horizontal bars to visually compare population sizes. Built with React and D3 v5, it loads CSV data from an external source and uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG `rect` elements with tooltips. The `format('.2s')` function converts large numbers into abbreviated forms like "1.2B" for the axis labels.

Loading thumbnail…

Assignment Q10

This example fetches a CSV from a GitHub gist and displays the first ten rows as JSON in a black `<pre>` block, while a large "Hello VizHub!" message appears via D3 selection. Built with Vue and D3 v5, it imports `select`, `csv`, and `csvFormat` from D3 and an ES6 module for the message. The SVG output uses a base64-encoded JPEG as a background pattern.

Loading thumbnail…

Assignment Q10

This example fetches a CSV from a GitHub gist and displays the first ten rows as JSON in a black `<pre>` block, while a large "Hello VizHub!" message appears via D3 selection. Built with Vue and D3 v5, it imports `select`, `csv`, and `csvFormat` from D3 and an ES6 module for the message. The SVG output uses a base64-encoded JPEG as a background pattern.

Loading thumbnail…

BMI by Age

This visualization displays the relationship between age and average body mass index using binned bar charts. The data comes from a CSV file, with BMI calculated from weight and height values. The code imports D3 modules through ES6 syntax, using scaleLinear, axisBottom, axisLeft, bin, and sum APIs to create the SVG rendering. Each bar represents an age bin, with its height reflecting the average BMI for that group. Axis tick lines extend across the chart to create a grid-like structure, with labels for both axes and a title.

Loading thumbnail…

Transforming Data

The visualization transforms tabular CSV data into aggregated summary statistics, displaying average sepal length per species as formatted JSON text. It loads the classic Iris dataset via `d3.csvParse`, converts measurement columns to numbers, and computes group-wise means using `d3.flatRollup` and `d3.sum`. The result renders inside a `<pre>` element, which is updated through a state-driven render cycle managed by the example’s `render` and `setState` functions. The code demonstrates importing local ES6 modules and the D3 library loaded via UNPKG.

Loading thumbnail…

activity 6

This example displays a dataset by loading a CSV file from a GitHub gist and writing a JSON-formatted preview of the first ten rows to the page. It uses D3’s `csv` and `csvFormat` functions, with the `select` API to append text elements to the document body. The visualization is rendered using SVG and WebGL.

Loading thumbnail…

5 Buddhas

The visualization displays a dense field of diamond-shaped polygons in bright, saturated colors against a black background, overlaid with a large icon of a buddha rendered as an SVG path. Multiple nested maps generate the polygons at random coordinates and colors, while React and ReactDOM manage the component structure and rendering. The buddha path is styled in red and scaled within an SVG group, showcasing a layered composition of generative abstract shapes and a figurative element.

Loading thumbnail…

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

Overlapping Buddha images appear on a black background, with a large, semi-transparent geometric path rendered multiple times in random colors. The visualization uses React to generate a grid of small circles and the SVG path element to draw the Buddha shape. The path is scaled and translated, while its color and position vary through JavaScript’s Math.random() calls. The code relies on React and ReactDOM for rendering, with SVG for the output.