P

pjdhungana@gmail.com

@pjdhungana·47 public vizzes

Loading thumbnail…

Bubble chart Presentation

This interactive bubble chart visualizes the correlation between average sugar, carbohydrate, and calorie content across various breakfast cereals. Each circle’s position is mapped using d3.scaleLinear for the x and y axes, while its radius encodes calorie count through a separate scale. Hovering reveals a tooltip with the cereal’s name, calories, carbs, and sugar. The visualization uses D3 v7 to load CSV data, render SVG circles, and apply the interpolateTurbo color scheme for categorical distinction.

Loading thumbnail…

Scatter Plot Cereals

A scatter plot displays the relationship between sugar and sodium content for a random selection of 35 cereals, with points colored by their overall rating. Ratings from 18-39 appear red, 40-59 orange, 60-100 green, and all others blue. The visualization loads CSV data from a GitHub gist using `d3.csv`, scales axes with `d3.scaleLinear`, and renders circles as SVG elements with `select` and `join`. Axis labels and a legend explain the color coding, while tick text is styled at 20 pixels for readability.

Loading thumbnail…

Reusable Scatter plot Presentation

This example demonstrates a reusable scatter plot visualization that animates through different cereal data attributes on the x-axis, including cups, sugars, sodium, and fat. The visualization loads data from a CSV file using D3's `csv` function and employs a custom ES6 module (`scatterPlot.js`) that uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs. The scatter plot displays circles colored by rating values (red, orange, green) to indicate low, average, and good ratings, with an animated `setInterval` updating the x-axis attribute every few seconds. The SVG rendering includes custom legends, axis labels, and a title styled with Google Fonts.

Loading thumbnail…

Bubble chart

This bubble chart displays the correlation between average potassium, sodium, and carbohydrate levels across different breakfast cereals. Each circle represents a cereal brand, with its position determined by potassium and sodium values, while its radius encodes carbohydrate content and color maps to the cereal name. The visualization includes interactive tooltips that appear on hover, as well as legends for both circle size and color. Implemented with D3 v7, the chart loads data from a CSV file, uses SVG for rendering, and employs d3.scaleLinear, d3.scaleOrdinal, and d3.interpolateTurbo for visual encoding.

Loading thumbnail…

Activity-2.7.2

This example displays a social network graph with nine nodes and eight links, representing people and their connections. Nodes are rendered as blue-outlined pink stars rather than circles, with labels showing each person's name. The graph uses d3.forceSimulation with link, charge, collision, and center forces to position the elements inside an SVG. Node dragging is handled through d3.drag, and arrowheads are defined using SVG markers. Data comes from a local graph.json file, with the visualization employing a categorical color scale from d3.

Loading thumbnail…

Assignment 2.3

This interactive scatter plot visualizes cereal data filtered to 100 calories, comparing sodium and sugar content. Each circle represents a cereal, with markers colored by rating value: red for ratings below 40, orange for 40–60, and green for ratings above 60. The visualization loads CSV data via `d3.csv` from a GitHub gist, uses `scaleLinear` for both axes, and renders circles as SVG elements with `d3.select` and `join`. Axis labels are positioned with SVG transforms, and the D3 v6 API is loaded directly from UNPKG.

Loading thumbnail…

Assign 2.7.1

This visualization displays a hierarchical organizational chart as an animated, collapsible tree. It categorizes the structure into government, non-profit, and private sectors, with color-coded nodes indicating different levels. The code uses D3’s layout tree and SVG rendering, with zoom and drag behavior, plus custom tooltips and link arrows. It also demonstrates ES6 module imports and loading D3 via CDN in a VizHub context.

Loading thumbnail…

Assignment 2.2

A stacked bar chart displays monthly sales data from a CSV file, showing both quantity and amount per month in two color-coded segments. The visualization uses D3.js with SVG rendering, loading data via `d3.csv` from a GitHub gist. The chart leverages `d3.scaleBand` for the categorical month axis, `d3.scaleLinear` for the numeric amount axis, and `d3.scaleOrdinal` for color assignment. It includes manually positioned axis labels, a title, and a legend built with SVG rectangles and text. The styling uses custom fonts and colors defined in a separate CSS file.

Loading thumbnail…

Assignment 2.6.2

This example displays a choropleth map of Nepal, rendered as a green SVG path with a red stroke. It fetches the world-atlas GeoJSON dataset from a CDN and isolates the Nepal geometry using TopoJSON. The code projects the shape with a Mercator projection via `d3.geoMercator` and draws it using `d3.geoPath`, styling it with inline attributes.

Loading thumbnail…

Activity-8.5.2

This example displays a map of Nepal, rendered as an SVG using a Mercator projection. It loads world-atlas GeoJSON data from a CDN and filters it for the Nepal geometry. The code uses D3 v5 functions like `d3.json`, `d3.geoMercator`, `d3.geoPath`, and the `topojson-client` library to project and draw the country's boundary.

Loading thumbnail…

Assignmant 2.6.1

This interactive map displays country labels using two-letter ISO codes upon mouseover, with hover highlighting. The visualization loads world geography from the World Atlas TopoJSON dataset and country code data from a CSV file. It uses d3.geoEquirectangular projection, d3.geoPath for rendering country boundaries, and d3.zoom for panning. Mouseover events trigger text labels, while hovering changes fill colors via CSS.

Loading thumbnail…

assign 2.8: tree

This visualization displays a hierarchical tree of employment sector categories, including government, private sector, and stock market nodes with subcategories like supply-demand and laborer. The code uses d3.tree and d3.hierarchy to compute the layout, then renders the structure as SVG text elements connected by d3.linkHorizontal paths. The dataset comes from data.json, and the visualization includes zoom functionality via d3.zoom. Nodes are de-duplicated and repositioned using underscore.js utilities, with the last root-level branch highlighted in steel blue. Transitions animate node movement using d3 transitions.

Loading thumbnail…

Assignment 2.5:Reusable Scatter plot

This example demonstrates a reusable scatter plot that visualizes the nutritional properties of cereals, with the x-axis cycling through cups, sugars, sodium, and carbohydrates over time. The plot encodes three variables simultaneously using both the position of the circles and their horizontal and vertical radii, while color indicates the cereal's rating (red for low, orange for average, green for good). The visualization leverages D3 v6.7.0 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll().join()` for rendering, and it smoothly animates between different x-axis variables using `setInterval`. The code loads data from a CSV file and renders the interactive chart as SVG within a full-window canvas.

Loading thumbnail…

Vega-Lite API Stacked Bar Chart Template

This example demonstrates a stacked bar chart generated using the Vega-Lite API, with data loaded from a CSV of religious demographics by country. The code imports the vega, vega-lite, and vega-lite-api libraries, registers them together, and configures a custom tooltip handler. The visualization renders as an SVG that fills the entire viewport, using the `autosize` fit option and custom axis and label styling defined in a separate configuration module. The data is fetched asynchronously via D3's `csv` function.

Loading thumbnail…

Assignment 2.1

A horizontal bar chart displays weapon export values for six countries in 2017, using a linear scale for the numeric count and a band scale for country categories. The SVG rendering loads data from a local CSV file and builds the visualization with D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format`. Axis ticks extend across the plot, while red axis labels, green bars, and a styled title demonstrate custom color and font adjustments. The example also showcases ES6 module imports and D3 loaded via UNPKG.

Loading thumbnail…

Bar Chart

This bar chart displays weapon export values by country for 2017, sourced from a CSV file hosted on GitHub. The visualization uses D3 v4’s `scaleBand` and `scaleLinear` to map countries to the x-axis and values to the y-axis, with `axisBottom` and `axisLeft` generating the axes. Bars are rendered as SVG rectangles, and the chart includes labeled axes and a title. The code loads D3 via UNPKG and demonstrates importing from local ES6 modules.

Loading thumbnail…

Bar Chart

This example displays a horizontal bar chart of weapon exporter values by country for 2017. The React component uses D3’s `scaleBand` and `scaleLinear` to map country names and numeric values to pixel positions, rendering each bar as an SVG `rect`. Data is loaded asynchronously from a CSV file via `d3.csv` and parsed with unary plus. The chart is styled with CSS classes, and margins define the layout within the SVG canvas.

Loading thumbnail…

Bar Chart

This bar chart displays weapon exporter values for different countries in 2017 as horizontal bars. Using React with SVG rendering, it loads data from a CSV file via d3.csv, while d3-scaleBand positions the countries on the y-axis and d3.scaleLinear maps the values to bar widths. The bars are colored with CSS class .bar, and the chart is built within a React component that receives data, dimensions, and margins as props.

Loading thumbnail…

assign 2.1

This example renders a horizontal bar chart using React and SVG, with data mapped from countries to their numeric values. The chart uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with bars drawn as `rect` elements. The code imports `scaleLinear`, `scaleBand`, and `max` from D3, and the chart’s dimensions are controlled via `width`, `height`, and `margin` props. The visual output is a straightforward comparison of values across categories, without axes or labels.

Loading thumbnail…

Untitled

This example displays a horizontal bar chart of weapon exporter values by country for 2017. The React app fetches CSV data from a GitHub gist using D3’s `csv` loader, then renders the chart as an SVG. Bar lengths are scaled with `scaleLinear`, while the categorical country labels use `scaleBand` with padding. Axes are custom React components (`AxisBottom`, `AxisLeft`) that iterate over D3 scale ticks and domains to draw lines and text.

Loading thumbnail…

Activity-8.6.2

This example shows a social network graph of nine named individuals connected by weighted links. The node-link diagram uses D3's `forceSimulation` engine, combining `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to compute the layout. Each node is a light-green circle rendered with SVG, and links are blue lines with arrow markers. Data sets come from `graph.json`, loaded via `fetch`, and the code uses `scaleOrdinal` for coloring, though not visible in this output.

Loading thumbnail…

Activity-8.6.1

This interactive visualization displays a hierarchical tree of muscle car models, using collapsible nodes to explore the relationships between brands like Ford and Dodge and their respective vehicles. Implemented with D3.js v3, it loads hierarchical JSON data from a local file and renders the tree as SVG, with nodes colored by type and directional links between them. The visualization includes zoom and drag functionality, as well as tooltips, and uses custom CSS classes to style the node rectangles and link paths.

Loading thumbnail…

Activity-8.5.1

This example displays an interactive world map using a spherical projection, rendered as SVG paths. It loads geographic data from a TopoJSON file via `world-atlas@2`, converting it to GeoJSON features with `topojson.feature`. The visualization supports zooming through `d3.zoom`, and styles continents with `d3.geoPath` and `geoEquirectangular`. Hovering over countries changes their fill color to maroon.

Loading thumbnail…

Activity-8.4

This D3.js (v5) SVG visualization displays the cost of sales from 2000 to 2013 as a smooth area chart. It uses `scaleTime` and `scaleLinear` for the axes, with `line` and `area` generators employing `curveBasis` for the curved trend. Data is loaded from a CSV via `csv()`, and the chart includes bold orange axis labels and red tick text.

Loading thumbnail…

Activity-8.3

This example visualizes the cost of sales from 2000 to 2013 as a line chart, with the x-axis representing years and the y-axis showing cost values. The chart uses a band scale for the years and a linear scale for costs, rendered in an SVG. Data is loaded from a local CSV file via `d3.csv`. The code builds the visualization using D3 v7, including `d3.scaleBand`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` for axes. The line is stroked in light green, and red axis labels are styled with large font sizes.

Loading thumbnail…

Activity-8.2

A donut chart displays the count of students from each major at UNT, with each slice labeled with its value in thousands and a corresponding color-coded legend. The visualization loads CSV data from a GitHub gist using D3's `csv` method. It constructs the pie layout with `d3.pie` and `d3.arc`, maps colors via `d3.scaleOrdinal`, and renders SVG paths and text elements, with legends positioned manually.

Loading thumbnail…

Activity-8.1

This animated scatterplot visualizes the Iris dataset, cycling through four attribute combinations on the x-axis while sepal length remains on the y-axis. It demonstrates D3 data joins and scales from the `d3` module, with a custom `scatterPlot` reusable chart updating via `setInterval`. Points are colored by species, and a legend with a title and axis labels is rendered in SVG.

Loading thumbnail…

Activity 8-1

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes while coloring each point by species (setosa, versicolor, or virginica) using skyblue, lightgreen, or orange. The code loads the CSV via d3.csv, imports the scatterPlot module, and renders an SVG sized to the window. It demonstrates D3’s import syntax and local ES6 module usage, with styles from the Share Tech font and CSS.

Loading thumbnail…

Activity 7-3: IMDb Movie ratings

This example visualizes the distribution of IMDb movie ratings across six genres as a stacked horizontal bar chart. Each bar shows the proportion of movies falling into five rating brackets, from below 5.0 to above 8.5, with interactive tooltips revealing exact percentages on hover. The chart uses d3.csv to load the data, d3.stack to compute the stacked segments, and d3.scaleOrdinal with a custom color palette. SVG rendering with d3.axisBottom and d3.axisLeft provides the axes, while mouseover events trigger the tooltip display.

Loading thumbnail…

assignment1

This example displays the first ten rows of a realtor dataset, fetched from a GitHub gist, in a JSON-formatted block with aqua monospace text on a black background. It loads D3 v5 via UNPKG and uses the `d3.select`, `d3.csv`, and `d3.csvFormat` functions to parse and preview the tabular data. The visualization also demonstrates importing local ES6 modules, though no module output is shown in the main rendering.

Loading thumbnail…

Activity 7-6

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle’s position encodes horsepower and torque, while its radius scales with highway MPG and its color distinguishes car make. The visualization includes interactive tooltips displaying the make on hover, plus legends for bubble size and color. Built with D3 v7, it loads CSV data and renders SVG with scales for position, size, and ordinal color mapping.

Loading thumbnail…

Activity 7-5

This example displays the classic Iris dataset as a scatter plot, mapping sepal length against petal length and encoding species with distinct symbol shapes. It renders points as scalable vector graphics using D3.js version 7, leveraging `scaleLinear`, `scaleOrdinal`, and `symbol` generators. The visualization includes labeled axes and a custom shape legend built with local ES6 modules. Data is loaded asynchronously from a remote CSV and parsed with `csvParse` before rendering.

Loading thumbnail…

Activity 7-4

This scatter plot visualizes the Iris dataset, depicting petal length against petal width, with each point colored by species (setosa, versicolor, or virginica). It loads data from a CSV URL using the `csv` function, then maps values through `scaleLinear` scales. The visualization uses D3 v6 APIs including `select`, `extent`, `axisLeft`, `axisBottom`, and SVG circle marks for rendering, with axis labels styled via SVG `text` elements.

Loading thumbnail…

Activity 7-2.2

This example displays a horizontal bar chart ranking the population of ten countries in 2010, using green bars with blue tick marks and country labels on the left axis. It loads population data from a CSV file via `d3.csv`, then slices the first ten rows. The chart is built with React components, using `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. SVG rendering with D3 v5 handles the visual output, including a formatted axis using `d3.format`.

Loading thumbnail…

Activity 7-1

A horizontal bar chart displays the population of 19 countries in 2015, sorted alphabetically by country name. The bars are filled with light green rectangles, with blue tick marks and gray text labels for the axes. Built with React and D3 v5, the visualization uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and `d3.csv` to fetch the data from a GitHub raw CSV file. Hovering over a bar reveals a tooltip with the population value formatted using `d3.format`. The SVG output is rendered directly within a React component.

Loading thumbnail…

Activity 7-2.1

A horizontal bar chart visualizes the 2020 populations of the top 20 countries, sourced from a GitHub CSV file. The chart uses green bars with blue tick lines and tooltips, formatted with D3's `format` API to show abbreviations in billions. Built with React and D3 v5, the visualization demonstrates ES6 module imports, including local components for axes and marks, and renders entirely as SVG elements.

Loading thumbnail…

Activity 7.3

This stacked horizontal bar chart visualizes the distribution of movie ratings across six genres, using percentage categories from below 5.0 to above 8.5. Each genre is represented as a single bar with colored segments, and hovering over a segment reveals the exact percentage via a custom tooltip. The visualization uses D3 v7’s `d3.stack` to compute the stacked series, `d3.scaleOrdinal` for categorical coloring, and `d3.scaleBand` for the horizontal layout. Data is loaded from a CSV file and rendered as SVG elements within a 960×500 viewport.

Loading thumbnail…

assign1csvData

This example displays a full-screen SVG image of a jet, rendered with a WebGL-backed data URI as a pattern fill. It uses D3 v5 loaded via UNPKG to demonstrate imports from local ES6 modules and the D3 library. The visualization is built with the Vue framework, employing SVG and WebGL for rendering. A separate CSS file styles a message, while JavaScript modules provide the core functionality.

Loading thumbnail…

BMI by Age

This visualization displays average body mass index (BMI) by age using a bar chart. The data comes from a CSV file containing individual height and weight measurements, from which BMI is calculated. D3.js version 7 is used with SVG rendering, employing `scaleLinear`, `axisLeft`, `axisBottom`, and `bin` to group ages into bins. Orange rectangles represent the average BMI for each age range, with axes labeled "Age" and "Average Body Mass Index."

Loading thumbnail…

Transforming Data

This example demonstrates data transformation by loading the classic Iris dataset from a CSV file, converting string values to numbers, and computing the average sepal length for each Iris species using the `flatRollup` and `sum` functions from D3 v7. The resulting summary is rendered as a JSON string inside a `pre` element. The visualization also showcases ES6 module imports and asynchronous state management through the `setState` callback pattern.

Loading thumbnail…

Transformingdata

This example demonstrates a data-transformation workflow using the classic Iris dataset. It calculates the average sepal length for each iris species and displays the result as a formatted JSON summary. The visualization uses D3.js version 7, specifically leveraging `flatRollup` and `sum` to aggregate the data, while `csvParse` handles loading the CSV file. The code also showcases VizHub's ability to import D3 modules and local ES6 modules, fetching the data asynchronously and displaying the computed summary in a `<pre>` element.

Loading thumbnail…

transformingdata

This example displays a simple message, "Hello VizHub!", centered on a plain web page. It demonstrates the fundamental capabilities of the VizHub platform, including loading D3 v5 from a CDN, using D3's `select` function to target an HTML element, and importing a custom string from a local ES6 module (`myMessage.js`). The visualization is minimal, focusing on the integration of external libraries and modular code rather than presenting a data-driven chart.

Loading thumbnail…

activity6

This example displays the first ten rows of a CSV dataset in a formatted JSON structure on a black page. It uses D3 v5’s `csv` and `csvFormat` functions to fetch and measure the dataset, while `select` appends the data to the body as HTML `<pre>` elements. The page also embeds a large background SVG image rendered as an inline base64-encoded JPEG pattern.

Loading thumbnail…

Activity6

This example demonstrates how to use D3.js v5 within a VizHub project to display a custom message on a webpage. It shows a simple text rendering workflow, where the message "Hello VizHub!" is centered and styled using CSS. The code imports the `select` function from D3 and a local ES6 module exporting the message string. D3’s `select` method targets the `#message` div and sets its text content. The project also illustrates loading D3 from a CDN via UNPKG and bundling local ES6 modules.

Loading thumbnail…

activity 6

This example displays a large, abstract visual texture composed of a base64-encoded JPEG image rendered across an SVG canvas. The code imports D3 and a local ES6 message module, using D3's `select` function to set the text of a message div. The visualization is built with Vue, rendering via SVG and WebGL, with the image sourced from an embedded data URI.

Loading thumbnail…

activity 6

This example demonstrates how to combine D3.js selection methods with ES6 module imports in a VizHub project. The page displays the text "Hello VizHub!" centered at a large font size using D3’s `select` function to target a div element and set its content. The message text itself comes from a separate local module, `myMessage.js`, while D3 v5 is loaded via a CDN script tag. The code shows a minimal workflow for importing both D3 APIs and custom modules, with styling handled by external CSS.

Loading thumbnail…

5 Buddhas

The visualization renders a dense, abstract field of multicolored, rotated polygons overlaid with an intricate, predefined SVG path depicting a seated Buddha figure. Built with React and ReactDOM, the piece generates a grid of shapes using nested `map` functions and `Math.random()`, while the Buddha path is embedded as static path data within a `<g>` element. The result combines algorithmic noise with a structured, sacred iconographic form.