Harshavardhan

@Harshavardhan-manne-tamu·19 public vizzes

Animal Classification Family Tree

This interactive tree diagram visualizes the hierarchical classification of animals, from the root "Animals" down to specific groups like Mammals and Insects. Built with D3 version 3.5, it uses the `d3.layout.tree` and `d3.svg.diagonal` APIs to create curved links and collapsible nodes, with user clicks toggling child visibility. Node and link styling is defined via CSS, and the static data is embedded directly in the JavaScript.

Apr 12, 2023

Loading thumbnail…

Social Network Graph --> ICE-8

This social network graph visualizes the friendships among nine people, with nodes representing individuals and lines representing the "Friend with" relationships between them. The visualization uses D3 version 6 with the `d3.forceSimulation` library, which applies forces like link distance, many-body repulsion, collision, and centering to arrange the nodes. The rendering is an SVG that responds to mouseover events to highlight nodes, and users can drag nodes around the canvas. The data is loaded from an external JSON file containing node and link definitions.

Apr 11, 2023

Loading thumbnail…

World Map

This example displays a world map rendered as an SVG, with countries filled in orange against a sky-blue sphere. The visualization uses D3 v5’s `geoEquirectangular` projection and `geoPath` to draw country outlines, while TopoJSON’s `feature` method converts the world-atlas countries dataset into geographic features. Hovering over a country changes its fill to red via CSS, and the map includes a black stroke with partial opacity for borders.

Apr 10, 2023

Loading thumbnail…

Country Map of USA

A static SVG map of the United States renders all 50 states in pink with black state borders, using a `geoAlbersUsaTerritories` projection and `d3.geoPath` to draw geographic features. The map loads U.S. state boundaries from a TopoJSON file via `us-atlas`, then applies a hover effect that turns each state purple. React manages the data-fetching and rendering lifecycle, while D3 v5 handles the geographic path generation and mesh computation for interior borders.

Apr 10, 2023

Loading thumbnail…

USA country map

This example displays a choropleth-style map of the 50 US states, rendered as navy SVG paths with black state borders. The map uses the `geoAlbersUsaTerritories` projection and `d3.geoPath` to draw geographic features from TopoJSON data loaded via `d3.json` from the us-atlas package. State shapes highlight in purple on hover, with React managing the component state and rendering the SVG output.

Apr 7, 2023

Loading thumbnail…

USA country map

This example displays a map of the 50 U.S. states, with each state filled in navy and black borders outlining state boundaries. Hovering over a state changes its fill color to purple. The visualization uses React for component structure and D3’s `geoPath` with the `geoAlbersUsaTerritories` projection to render geographic data as SVG paths. TopoJSON data from the `us-atlas` package is processed via `feature` and `mesh` functions to generate the land and interior boundaries.

Apr 7, 2023

Loading thumbnail…

Line Chart

This line chart displays India’s GDP in billion U.S. dollars from 2001 to 2021, with the year on the x-axis and GDP values on the y-axis. The visualization uses D3 v5 with the `csv`, `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs, rendering in SVG. Data is loaded from a remote CSV file, and axes include gridlines and labels. A red path traces the GDP trend over time.

Mar 25, 2023

Loading thumbnail…

Pie Chart to show Runtime of top rated movies on IMDB

This visualization presents the runtime of the top ten rated movies on IMDB as a pie chart, with each slice colored by runtime and accompanied by a legend listing the movie title and its duration in minutes. The chart is rendered as SVG using D3 v5, with the `pie`, `arc`, and `scaleOrdinal` functions from D3 computing the slice geometry and categorical color scheme. Data is loaded from a CSV file hosted on GitHub, and hover events log the runtime to the console.

Mar 25, 2023

Loading thumbnail…

Area Chart of GDP of India in last two decades

This area chart visualizes India’s GDP in billion US dollars from 2001 to 2021, using a smooth basis curve to draw both a black line and a pink filled area beneath it. The visualization loads CSV data from a GitHub gist, parses the numeric GDP values and year, then renders the chart as an SVG using D3 v5 APIs such as `d3.select`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.line`, and `d3.area`. Axis labels are styled via CSS, with tick marks and text formatted to show GDP values in a compact notation.

Mar 25, 2023

Loading thumbnail…

Line Chart

This line chart visualizes the GDP of India over two decades, with the x-axis representing years and the y-axis showing GDP in billion dollars. The chart displays a single red line path, generated using d3.line, with axes created via d3.axisBottom and d3.axisLeft. Data is loaded from a CSV file using d3.csv and parsed with scaleTime and scaleLinear for positioning. Rendered as an SVG, the visualization includes axis labels and a title, with styling applied through CSS classes.

Mar 25, 2023

Loading thumbnail…

Reusable scatter plot implementing different symbols

This example presents a reusable scatter plot that visualizes the Iris dataset, encoding species through different symbols. Built with D3 v6, it leverages d3.scaleLinear for axes, d3.scaleOrdinal to map species to a symbol range, and d3.symbol to generate the varying path shapes. The plot renders to an SVG canvas, with margins and axis labels for sepal_length and petal_width. The reusable scatterPlot function is configured through a fluent interface, accepting data, value accessors, and symbol mappings. Styling is applied via CSS, with additional d3.axisLeft and d3.axisBottom components.

Mar 24, 2023

Loading thumbnail…

Penguin Data set scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, showing flipper length on the x-axis and body mass on the y-axis, with each point colored by species (Adelie, Gentoo, or Chinstrap). The visualization uses D3 v5’s `csv` loader, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to map the data to SVG circles. Additional penguin measurements—culmen length and depth—are stored as `rx` and `ry` attributes on each circle, though they do not affect rendering. The chart includes axis labels and a title, with data fetched from a GitHub gist.

Mar 24, 2023

Loading thumbnail…

Reusable scatter plot with different symbols

This example visualizes the Iris Dataset, plotting petal width against sepal length with each of the three species represented by a distinct D3 symbol (circle, cross, diamond, etc.) via `d3.scaleOrdinal` and `d3.symbol`. Rendering to SVG, the reusable `scatterPlot` function uses `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` for scales and axes, while loading CSV data with `d3.csv`. Symbol size is fixed, and the chart adapts to the browser window dimensions.

Mar 24, 2023

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example visualizes the top 15 movies by metascore as a horizontal bar chart, using the length of each bar to encode the score. The visualization is rendered as an SVG element, with axes and tick labels drawn manually using D3 functions like `scaleBand`, `scaleLinear`, and `max`. The code loads data from a CSV file via `d3.csv` and integrates D3’s scaling and tick-generation methods within React’s component structure, using `useState` and `useEffect` to manage the asynchronous data loading. The chart is built with React’s declarative syntax, producing SVG rectangles and text elements.

Mar 9, 2023

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes penguin data, mapping flipper length on the x-axis and body mass on the y-axis. Each point’s color indicates the species (Adelie, Gentoo, or other), while the circle’s radius is fixed at 5 pixels. The chart uses D3 v5 with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to create scales and axes, and renders SVG circles via `selectAll` and `join`. Data is loaded asynchronously from a CSV using `d3.csv`, with numeric parsing for measurement columns.

Mar 8, 2023

Loading thumbnail…

ICE5

This example displays metadata about an electronic store dataset, including its size in kilobytes, row count, and column count. The page loads a CSV file from a remote URL using D3 v7’s `d3.csv` method, then calculates and displays the dataset’s statistics inside a `<pre>` element. The background features a custom SVG image, and text styling is applied via CSS. The interface includes a hyperlink to the original dataset and uses plain JavaScript with D3’s `csvFormat` to compute the byte length of the data.

Mar 3, 2023

Loading thumbnail…

Fork of Hello VizHub

This example renders a simple centered text message, “Hello VizHub!”, on a web page. It demonstrates the basic workflow of a D3 project within VizHub by loading the D3 library from UNPKG and using the `select` function to target a specific DOM element. The code also shows how to import and use a local ES6 module, `myMessage.js`, to supply the displayed string. The page’s styling is handled through an external CSS file, showcasing modular organization of code and assets.

Mar 3, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example creates a smiling face from SVG primitives, with animated eyebrows and fixed features like eyes, ears, a nose, teeth, glasses, and a beard. It demonstrates DOM manipulation and transitions using D3.js v5, specifically `select`, `append`, and `transition().duration()`. The face is built on a single SVG canvas, using paths from `d3.arc()` for the mouth and nose, and basic shapes for the remaining elements. An embedded YouTube video shows the resulting animation.

Feb 25, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example demonstrates a smiley face drawn with D3.js, featuring animated eyebrows that move up and down in a looping transition. The face is constructed using SVG primitives, with a yellow circle for the head, two eye circles, and a mouth path generated with the `arc` function. The code imports `select` and `arc` from D3 v5, explicitly setting dimensions from the SVG attributes and centering a group element. The eyebrows are rectangular shapes within a nested group, animated via chained `transition` calls that adjust their vertical position over two-second intervals.

Feb 25, 2023