harsha

@Harsha-b7·37 public vizzes

Network Graph

This interactive social network graph visualizes friend connections among a group of people, with nodes representing individuals and lines representing their relationships. The D3.js visualization uses a physics-based force simulation to position nodes, with collision, charge, and link forces determining the layout. Draggable circles display each person’s name, while hovering highlights them. The graph loads data from a local JSON file and is rendered as SVG, utilizing d3.forceSimulation, d3.forceLink, d3.forceManyBody, and d3.forceCollide for the dynamic arrangement.

Jul 22, 2023

Loading thumbnail…

MuscleCars tree

This visualization presents a hierarchical tree of muscle car models, from the root "Muscle Cars" down through Ford and Dodge to specific models like the Mustang and Hellcat. The tree layout uses the D3 library, specifically `d3.layout.tree`, with nodes rendered as colored rectangles sized for readability. The visualization supports interactive zooming and panning through D3's zoom behavior and responds to mouse wheel events. Data is loaded from an external JSON file, and node colors are assigned based on a "type" field, distinguishing different levels in the hierarchy.

Jul 22, 2023

Loading thumbnail…

Activity 8 Country

This example displays a static SVG map of India using a Mercator projection, with the country’s boundary rendered as a single path. It loads geographic data from a world-atlas TopoJSON file, extracts the feature for India, and projects it with `d3.geoMercator` and `d3.geoPath`. The visualization is generated client-side using D3 v5 and the `topojson-client` library, with the final SVG output sized to 960 by 500 pixels.

Jul 22, 2023

Loading thumbnail…

Activity 8 Task 5 (2)

This example displays a large, centered text message reading "Hello VizHub!" in a bold, 12-em font. It demonstrates fundamental VizHub capabilities by loading D3 from a CDN and using the `select` API from `d3` to set the text content of an HTML element. The code also imports a local ES6 module, `myMessage.js`, which exports the displayed string, showcasing modular code structure and integration of external libraries.

Jul 22, 2023

Loading thumbnail…

Area Chart Activity 8

This area chart displays the cost of sales from 2000 to 2013, with time on the x-axis and cost on the y-axis. The visualization renders a smooth (curveBasis) line and filled area in SVG, using D3 v5 APIs including scaleTime, scaleLinear, axisBottom, axisLeft, line, and area. Data is loaded from a CSV file via d3.csv and parsed with Date. Axis labels are styled with orange text and red tick values.

Jul 22, 2023

Loading thumbnail…

linechart

This example shows the cost of sales from 2000 to 2013 as a single light-green line chart. It loads data from a CSV file using `d3.csv`, then renders axes with `d3.axisBottom` and `d3.axisLeft`. The line is drawn with `d3.line`, using a band scale for the year positions and a linear scale for the cost values. The SVG chart includes labeled axes and a title.

Jul 22, 2023

Loading thumbnail…

Pie Chart

This pie chart visualizes the count of students from each major at the University of North Texas, with each slice sized proportionally to enrollment and labeled with the student count in thousands. A legend on the right identifies each major alongside its corresponding value. The visualization loads CSV data from a GitHub gist using `d3.csv` and renders the chart as SVG. It employs `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the slices, colors, and text labels, while using `arc.centroid` to position value labels within each segment.

Jul 22, 2023

Loading thumbnail…

Reusable Scatter plot Activity 8

This example demonstrates a reusable scatter plot visualizing the Iris flower dataset, cycling through different measurement pairs on the x-axis using an animation loop. The plot color-codes data points by species and includes a legend, title, and axis labels. It loads D3 v6 via UNPKG and uses local ES6 modules, importing `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to build the chart. The rendering uses SVG with a `setInterval` timer updating the x-axis mapping every few seconds.

Jul 22, 2023

Loading thumbnail…

Bar Graph

This bar graph displays stock prices for each year from 2011 to 2016, with steel-blue bars representing values loaded from a CSV file. The visualization uses D3.js v7 to create an SVG rendering, employing `d3.scaleBand` for the x-axis years and `d3.scaleLinear` for the y-axis values. The chart includes rotated x-axis labels, axis labels, and a title, with margins and dimensions set explicitly in the code.

Jul 22, 2023

Loading thumbnail…

Bubble chart

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across different car makes, using data from a CSV file. Each circle’s position encodes torque and horsepower on the y and x axes, while its radius reflects highway MPG and its color distinguishes the manufacturer. Built with D3 v7, the SVG visualization includes hover tooltips and a legend showing MPG size scaling. The code uses `d3.csv`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, `d3.axisLeft`, and `d3.interpolateTurbo` for coloring.

Jul 22, 2023

Loading thumbnail…

Fork of Scatter Plot with Shape

This scatter plot visualizes the Iris dataset, showing sepal length on the x-axis and petal length on the y-axis. Each point’s shape encodes the iris species, with a legend mapping the three species to distinct symbols. The visualization uses D3.js and its `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs to position marks and generate glyph shapes. Data is fetched from a remote CSV file and parsed with `csvParse`. The chart includes labeled axes and a shape legend, both styled via D3’s `axisLeft` and `axisBottom` helpers.

Jul 22, 2023

Loading thumbnail…

IMDb Movie ratings

This stacked bar chart visualizes the distribution of IMDb ratings across six movie genres, with each bar segment representing the proportion of films falling into five rating brackets. The visualization uses D3 v7 to load CSV data, stack the rating categories with `d3.stack`, and render the result as an SVG. Color-coded segments correspond to each rating range, and interactive mouse events reveal exact percentages via a tooltip. The chart includes a legend, axis labels, and a percentage-scaled x-axis.

Jul 22, 2023

Loading thumbnail…

Activity 7

A horizontal bar chart displays the populations of twenty countries in 2020, using D3.js scaleBand and scaleLinear to map country names and population values to SVG rectangles. The React-based visualization reads CSV data from a GitHub repository, formats axis tick labels using D3's format function to abbreviate large numbers, and includes interactive tooltips via SVG `<title>` elements. Axes are rendered with custom React components, with blue tick lines and green bars styled through CSS.

Jul 22, 2023

Loading thumbnail…

Transforming Data

This example demonstrates data transformation with the Iris flower dataset, computing the average sepal length for each species and displaying the result as formatted JSON text. The visualization begins by fetching data.csv and parsing it with `d3.csvParse`, converting numeric fields from strings to numbers. It then uses `d3.flatRollup` combined with `d3.sum` to group records by species and calculate mean sepal lengths, with the final output rendered as a `<pre>` element via D3's `select` and `join` methods.

Jul 22, 2023

Loading thumbnail…

Activity 6

This example demonstrates loading CSV data from a GitHub gist and displaying the first ten rows as JSON in the browser. The code uses D3 v5 via UNPKG, importing the `csv` and `csvFormat` functions, and appends formatted text to the body using D3’s `select` and `append` methods. The page’s SVG contains a background imaged embedded as a base64 JPEG, with minimal styling applied to the text elements.

Jul 22, 2023

Loading thumbnail…

Dynamic Tree with D3.js

This example shows a hierarchical dataset of animals rendered as a dynamic tree diagram using D3.js v6. The tree layout positions parent and child nodes, with links drawn as horizontal curved paths via `d3.linkHorizontal`. Leaf nodes display custom colors from the data, while internal nodes are light gray, and each node is labeled with its name. The visualization is built with SVG, using D3’s `d3.hierarchy` and `d3.tree` to compute node coordinates, and the SVG height adjusts to fit the tree’s extent.

Jul 21, 2023

Loading thumbnail…

USA Map

This visualization displays a choropleth map of the United States, where individual states are filled with varying intensities of red based on values loaded from a CSV file. States without matching data appear in gray. The map is rendered as an SVG using D3.js, with geographic boundaries drawn via `d3.geoPath` and TopoJSON features from the `us-10m.v1.json` dataset. A `d3.scaleLinear` maps data values to a color range from light red to deep red for each state's fill.

Jul 21, 2023

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup that displays the text “Hello VizHub!” centered in the browser. It loads D3 v5 from UNPKG and uses the `select` API to target the `#message` div, setting its content from an imported ES6 module. The code also shows how to organize local modules with `export` and `import`, while CSS styles the large, centered text.

Jul 21, 2023

Loading thumbnail…

World Map Visualization

This visualization presents a choropleth world map where each country’s fill color encodes its population size, using a blue quantized color scale from `d3.scaleQuantize` with `d3.schemeBlues[5]`. The map is rendered as SVG paths via `d3.geoPath` with the Natural Earth projection, using GeoJSON country boundaries from a remote URL. Population data is loaded from a CSV file and matched to countries by name, with missing or unmatched areas colored black.

Jul 21, 2023

Loading thumbnail…

Fork of Hello VizHub

Jul 21, 2023

Loading thumbnail…

Reusable Scatterplot with D3.js

This example demonstrates a reusable scatterplot built with D3.js v6 and React, displaying two sample CSV datasets that users can toggle between via a button. The visualization shows grouped data points as colored circles, with linear scales mapping X and Y values to SVG coordinates, ordinal color encoding for group categories, and axes with titles. Rendering relies on SVG elements and D3’s axis, scale, and CSV parsing APIs, while the legend updates based on the active dataset’s group domain.

Jul 21, 2023

Loading thumbnail…

Bubble Chart with D3.js

This example shows a bubble chart that visualizes product performance using Revenue to size each circle and Profit to influence color, with bubbles randomly positioned across the SVG canvas. Built with D3.js v5 and React, it loads data from a CSV file using `d3.csv` and renders circles and labels through SVG selections. The code uses `d3.scaleLinear` for mapping Revenue and Profit to radii, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and adds tooltips via SVG `title` elements. Axes labels for Revenue and Profit are manually positioned as text elements.

Jul 21, 2023

Loading thumbnail…

Beauty Product Sales Scatter Plot

This scatter plot visualizes the relationship between units sold and revenue for various beauty products, with each circle labeled to identify its product name. The visualization uses the D3.js library (v5) within a React framework, rendering as an SVG. It reads data from a CSV file, scales the axes using `d3.scaleLinear` for both variables, and employs `d3.axisBottom` and `d3.axisLeft` to create the coordinate system. Data points are drawn as circles with `d3.selectAll` and appended with `.enter()`, and product names are added as text labels positioned next to each point.

Jul 21, 2023

Loading thumbnail…

Stacked Bar Graph

This stacked bar graph visualizes three numeric values per category from a CSV file, with each bar segment colored by series and a legend identifying the categories. Built with D3 v7 and React, it uses `d3.csv` to load data, `d3.stack` to compute stacked segments, and `d3.scaleBand` and `d3.scaleLinear` for positioning. SVG rendering includes axes, a title, and a legend, with colors from `d3.schemeCategory10`.

Jul 21, 2023

Loading thumbnail…

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

A dense field of small rotated polygons, colored with randomly generated RGB values, fills the screen as a chaotic, overlapping grid. The visualization layers a detailed SVG path of a Buddha figure on top of this algorithmic backdrop, scaling and translating it into place. Built with React and rendered via SVG, the code generates polygons using nested array maps and Math.random, while the Buddha outline is drawn from a fixed path data string. The green page background and oversized text hint at a playful, experimental approach to composition.

Jul 19, 2023

Loading thumbnail…

BMI by Age

This example visualizes the average body mass index (BMI) across different ages using a bar chart. The data is loaded from a CSV file and processed to calculate BMI from height and weight values. The chart is rendered as SVG using D3 v7, with scales, axes, and rectangular bins created through the `d3.bin` and `d3.area` APIs. Custom margins and tick styling are applied via CSS to present the distribution clearly.

Jul 19, 2023

Loading thumbnail…

Transforming Data

Jul 19, 2023

Loading thumbnail…

Activity 6

This example loads a CSV dataset from a GitHub gist and displays the first ten rows as JSON in a black terminal-style block. It uses D3 v5’s `csv` and `csvFormat` to fetch and format the data, and `select` to append text elements to the body. The SVG in the HTML embeds a base64-encoded static image as a background pattern.

Jul 19, 2023

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for 31 car makes. Each bubble’s position encodes horsepower (x-axis) and torque (y-axis), while its radius and color represent highway MPG and car brand, respectively. Built with D3 v7, the SVG graphic uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for categorical colors, and an animated tooltip that appears on mouseover. Data is loaded from a local CSV, and the legend clarifies size and color mappings.

Jul 19, 2023

Loading thumbnail…

Activity 7 Task 5

A statically rendered text display demonstrates basic D3.js DOM manipulation and ES6 module imports. The page shows the message “Hello VizHub!” centered in large type, with D3’s `select` method targeting the `#message` div to set its text content. The code imports `select` from the D3 v5 library loaded via CDN, and a custom `message` constant from a local ES6 module, with styling applied through a linked stylesheet.

Jul 19, 2023

Loading thumbnail…

Fork of Scatter Plot with Shape

This interactive scatter plot visualizes the Iris dataset, mapping sepal and petal lengths along the axes while encoding species with distinct D3 symbol shapes. The visualization includes a shape legend for species identification. It uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs to render marks, along with custom axis and legend modules. Data loads asynchronously via CSV parsing, and the plot updates dynamically through a state management system.

Jul 19, 2023

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width for three flower species (setosa, versicolor, and virginica), with each species distinguished by a distinct color. It also encodes sepal length and width as horizontal and vertical radii of the circular marks, adding extra dimensions to the display. The visualization loads data from a GitHub gist via `d3.csv`, uses `d3.scaleLinear` for axes, and renders SVG circles with `d3.axisLeft` and `d3.axisBottom`. The code imports D3 v6 from UNPKG and runs asynchronously to draw the chart.

Jul 19, 2023

Loading thumbnail…

IMDb Movie ratings

A stacked horizontal bar chart visualizes the distribution of IMDb ratings across six film genres, with each bar segmented by five rating intervals from "below 5.0" to "above 8.5." The chart shows the proportion of films in each rating category per genre, using a categorical color scale. The visualization uses d3.stack() to compute stacked series, d3.scaleBand() and d3.scaleLinear() for positioning, and d3.axisBottom() for the percentage axis. Interactive tooltips display precise percentages on mouseover, while a legend indicates the rating categories. The data is loaded from a CSV file using d3.csv() and rendered as SVG.

Jul 19, 2023

Loading thumbnail…

Activity 7

This visualization displays the population of 20 countries in 2020 as a horizontal bar chart, sorted by country name. Using React with D3 v5, it employs `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and renders SVG rectangles via the `Marks` component. The data is loaded from a remote CSV file using `csv` from D3, with population values calculated by multiplying the 2010 column by 1000. Axis components generate tick lines and labels, while a tooltip appears on hover showing the abbreviated population in billions via `format('.2s')`.

Jul 19, 2023

Loading thumbnail…

Activity 6 task 4

This example demonstrates a minimal D3.js setup that renders a centered message using the D3 v5 library. It imports the `select` function from D3 and a local ES6 module, then sets the text content of a `#message` div to “Hello VizHub!”. The HTML loads D3 from UNPKG and the CSS styles the text at a large font size, showcasing basic DOM manipulation and modular code organization.

Jun 14, 2023

Loading thumbnail…

Activity 6

This example demonstrates loading and displaying a tabular dataset using D3. It fetches a text file from a GitHub gist via `d3.csv`, logs the first ten rows as formatted JSON in a `<pre>` block, and includes an embedded video tutorial. The page also shows static SVG and WebGL output, alongside an ES6 module with a simple text message. The code uses D3 v5 and Vue, with styling applied through CSS.

Jun 14, 2023

Loading thumbnail…

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

A chaotic, colorful visualization layers thousands of semi-transparent, randomly positioned diamond polygons over an intricate line-art Buddha path. The overlapping shapes, generated via nested array maps and random values, create a dense, abstract mosaic that obscures and reinterprets the underlying drawing. Rendered with React and SVG, the piece uses the `polygon` element with dynamic `points`, `fill`, and `transform` attributes, while the fixed Buddha path is hardcoded as an SVG `path` data string, producing a striking contrast between algorithmic noise and deliberate illustration.

Jun 14, 2023