Skip to main content
Log in
N

NHRK555

@NHRK555·24 public vizzes

Loading thumbnail…

Country Map

This interactive India map lets users zoom and pan across state and district boundaries. Clicking a region automatically animates the map to focus on that area, with a smooth zoom transition. Built with React and D3 v6, it uses `geoMercator` and `geoPath` to render the TopoJSON data, while `d3.zoom` and `d3.zoomIdentity` handle the zooming and click-to-focus behavior. The SVG rendering updates dynamically as users navigate from the country level down to individual districts.

Jul 10, 2022
Loading thumbnail…

Networking Relation between People

This visualization shows a network graph of friendships between people, with nine nodes connected by eleven directed links. Each node is a person, and every link represents a "Friend with" relationship, with an arrow marker indicating direction. Built with D3 v6, the example uses `d3.forceSimulation` with link distance, charge, collision, and center forces to lay out the nodes. Nodes and links are rendered as SVG circles and lines, with labels placed in the center of each circle. Dragging is supported via `d3.drag`, and hovering highlights a node. Data comes from a local `data.json` file.

Jul 10, 2022
Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This network graph visualizes friend connections among ten people, with nodes rendered as cyan circles and links as directed lines with arrowheads. The interactive layout uses d3.forceSimulation with link, charge, collision, and center forces, while circles are colored via a scaleOrdinal and respond to mouseover events. Data comes from a JSON file containing node and link objects with relationship metadata.

Jul 10, 2022
Loading thumbnail…

Visualization of World Map

This visualization displays a world map using a simple equirectangular projection, with countries rendered as pink filled paths with black outlines. The map is drawn to an SVG canvas, and the spherical background is filled with violet. The code uses D3 v5’s `geoEquirectangular` and `geoPath` to project and draw geographic features, while TopoJSON’s `feature` method extracts country boundaries from the world-atlas dataset. A title and heading with coral backgrounds frame the map, and a CSS rule attempts to apply a green fill to an unspecified element.

Jul 10, 2022
Loading thumbnail…

United States, States Tree

This example visualizes a hierarchical tree of U.S. states, counties, and cities, with nodes colored by depth (orange, blue, pink, red, or yellow). Using D3.js v6 and the `d3.stratify` and `d3.tree` APIs, it positions nodes and animates path connections between parent and child elements. Rendered as an SVG with transitions, the code draws circles and text labels for each node, with hardcoded data showing relationships like Texas to Denton to Lewisville.

Jul 10, 2022
Loading thumbnail…

World Map

This example renders a world map using D3.js (v5) and the TopoJSON library, projecting country boundaries with the Natural Earth projection via `d3.geoNaturalEarth1` and drawing them as SVG paths with `d3.geoPath`. It fetches country geometry from the world-atlas dataset hosted on jsDelivr, then styles each country with a yellow stroke and violet background. The map is displayed at a fixed SVG size of 910×415 pixels, with no interaction or animation.

Jul 10, 2022
Loading thumbnail…

Fork of World Map - ICE-8

This example shows a world map rendered in an SVG, with each country outlined in yellow against a blue background. It uses d3.geoPath with a geoNaturalEarth1 projection to convert geographic data into SVG paths. The country boundaries come from the world-atlas TopoJSON dataset, loaded via d3’s json function and processed with the topojson feature API. The map is static, displaying only land outlines without additional styling or interaction.

Jul 10, 2022
Loading thumbnail…

Wastage of products from Top selling companies

This 3D column chart displays the annual wastage of products from seven top online retailers, including Amazon, eBay, and Walmart, broken down by four product categories: Toys, Electronics, Clothing, and Cosmetics. Each company is shown on the x-axis, with the y-axis measuring the number of wasted products in millions. The visualization uses Highcharts with the highcharts-3d.js extension, enabling a perspective view through settings like alpha, beta, and depth. The chart employs column stacking and grouping with a groupZPadding to separate category clusters, rendering each series as a distinct colored column.

Jul 7, 2022
Loading thumbnail…

Fork of BONUS 1: 3D Scatter Plot

This 3D scatter plot visualizes the relationship between height, weight, and body fat percentage from a BMI dataset loaded via `d3.csv()`, displaying each data point as a pink circular marker. The visualization uses Plotly's `Plotly.newPlot()` method to render the interactive `scatter3d` trace within a div, with axes labeled for Height, Weight, and Body Fat. The scene layout configures red axis titles with Arial/Open Sans fonts, while margin settings minimize surrounding whitespace. This React-based example demonstrates how to convert CSV data into a rich three-dimensional coordinate system using d3.js for data loading and Plotly for the chart rendering.

Jul 7, 2022
Loading thumbnail…

Fork of Bonus ICE - 3D Bar chart

This example shows a three-dimensional grouped bar chart comparing download counts for seven popular apps across six different app stores, with each store represented by a distinct colored bar series. The chart uses Highcharts with the highcharts-3d.js module, configuring the chart’s 3D perspective through the `options3d` object, setting alpha, beta, and depth values. Bars are rendered with a specified depth and grouped along the z-axis using `groupZPadding`, while the x-axis lists app names and the y-axis tracks total downloads; stacking and grouping are enabled via the `plotOptions.column` settings. Data values are hardcoded in the series arrays, with each series named after its respective store.

Jul 7, 2022
Loading thumbnail…

Untitled

A bar chart displays categorical data with drop-shadowed rectangles, using D3 v2 to map values to an ordinal x-scale and linear y-scale. The visualization animates via SVG transitions, with tick labels formatted from a caption mapping. It relies on jQuery for container sizing and D3’s `d3.svg.axis` for axes, rendering inside an HTML div with a filter-defined shadow effect.

Jul 7, 2022
Loading thumbnail…

Percentages of four different Products imported in each country

This visualization displays the percentages of four different products imported by each country, with data points representing individual countries. The scatter plot dynamically cycles through different product dimensions on the x-axis every 1.7 seconds using `setInterval`. The visualization uses D3 v6 with SVG rendering, employing `scaleLinear`, `axisLeft`, `axisBottom`, and `scatterPlot()` from a reusable chart module. Data is loaded from a remote CSV file, with US data points highlighted in yellow and other countries in red, alongside a custom legend.

Jul 3, 2022
Loading thumbnail…

Fork of ICE7 - Reusable Scatter Plot

This reusable scatter plot animates through the Iris dataset, cycling the x-axis through petal width, sepal width, petal length, and sepal length while keeping sepal length on the y-axis. It colors data points by species (setosa, versicolor, virginica) with a custom legend and rotating axis labels. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The animation uses `setInterval` to update the plot’s x-value binding, demonstrating a modular `scatterPlot` chart factory.

Jul 2, 2022
Loading thumbnail…

Ford stock price - Area Chart

This area chart displays Ford stock prices over time, using a filled blue curve to show price trends. The visualization is built with D3 v5, using `scaleTime` and `scaleLinear` for axes, `area` with `curveBasis` for the smoothed area path, and `axisLeft`/`axisBottom` for grid lines. Data is loaded from a CSV file via D3’s `csv` function, and the SVG output includes labeled axes and a title.

Jul 2, 2022
Loading thumbnail…

Vizhub for pie chart

This pie chart visualizes the top five U.S. states by fuel consumption percentage, with each slice labeled and color-coded, alongside a legend listing state names and values. The data is loaded from a CSV file via `d3.csv`, and the chart is rendered as SVG using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for colors. Text labels are positioned on slice centroids with `arcGenerator.centroid`, while the legend is built manually with SVG rectangles and text elements. The visualization updates dynamically as the CSV is fetched asynchronously.

Jul 2, 2022
Loading thumbnail…

Ford stock prices for one week

This line chart displays Ford stock prices over the course of one week. The visualization uses D3 version 5 to render an SVG, with time-scaled x-axis and linear y-axis. Data is loaded from a remote CSV file and smoothed using a basis curve. The chart includes labeled axes, a title, and a styled line path to represent the price fluctuations.

Jul 2, 2022
Loading thumbnail…

Fork of Bitcoin - Line Chart ICE-7 _Sravan

This example visualizes Bitcoin rates over the last week as a smooth, maroon line chart. It uses a time-scaled x-axis for timestamps and a linear y-axis for rates, with labeled axes and a title. Built with D3 v5, the code employs `scaleTime`, `scaleLinear`, `line`, and `curveBasis` to construct the path, while `axisBottom` and `axisLeft` generate grid lines. Data is fetched as CSV from a GitHub repository and rendered as an SVG.

Jul 2, 2022
Loading thumbnail…

In Class Assignment 6

This scatter plot visualizes the Iris dataset, mapping petal length and width as x and y coordinates while encoding species through point color (grey, violet, and blue). The visualization uses D3 v6 with SVG rendering, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes. Data is loaded via `d3.csv` from a remote GitHub gist. The code also applies `rx` and `ry` attributes to circles using sepal measurements, creating elliptical points, though the visual effect is subtle due to the fixed radius.

Jun 26, 2022
Loading thumbnail…

In Class Assignment 6

This visualization shows the average pass percentage for each school section in 2021 using a horizontal bar chart. It displays section names on the y-axis and percentage values on the x-axis with red grid lines. The chart is built with React and D3 v5, using `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG `rect` elements for bars. Data is loaded asynchronously from a CSV file via `d3.csv`, and the visualization renders in an SVG container with a grey background.

Jun 26, 2022
Loading thumbnail…

Fork of Data Visualization - ICE-6 - Bar chart

This visualization displays a horizontal bar chart of the world’s top 10 revenue-generating athletes, with bars sized by total pay in millions of dollars. The React component uses `useState` and `useEffect` to load CSV data via D3’s `csv` method, then renders SVG rectangles scaled with `scaleBand` and `scaleLinear`. Custom axes are drawn manually, including tick lines and labels, while CSS styles colored bars red and tick text blue. Data originates from a GitHub Gist, loaded asynchronously before rendering the chart.

Jun 25, 2022
Loading thumbnail…

Student Course Data description

This example presents a demonstration webpage that showcases the size and structure of a student course performance dataset. The page displays a static classroom SVG image alongside a summary of the loaded CSV data, including its file size in kilobytes, row count, and column count. The code uses the D3.js v7 `d3.csv` and `d3.csvFormat` APIs to fetch and measure the dataset from a GitHub-hosted CSV file, then inserts the calculated text into a styled `<pre>` element. The page is built with minimal HTML, CSS, and JavaScript.

Jun 25, 2022
Loading thumbnail…

Fork of ICE-5: Welcome to ICE-5 Data visualization

This example displays a welcome message and an SVG image on an HTML page, summarizing the top 100 actors dataset loaded from a CSV file. The page uses D3 v7 to fetch the data via `d3.csv`, then calculates and displays the file size in kilobytes, the number of rows, and the number of columns in a styled `<pre>` element. A static SVG image is embedded directly from a GitHub gist URL, while CSS styles the heading and message container with bold colors.

Jun 23, 2022
Loading thumbnail…

viz mine

A green smiley face rendered in SVG depicts a cheerful visage with purple-and-red eyes, a wide arc mouth, and thick black lines for hair and eyebrows. The face is constructed from basic geometric shapes—circles, ellipses, lines, and a path—all drawn within a single SVG canvas. The code uses React for structure and D3's `arc()` function to generate the mouth's curved path, with all coordinates and dimensions explicitly defined.

Jun 18, 2022
Loading thumbnail…

Nekkadapu viz

This example shows a stylized face rendered in SVG, drawn with yellow circular head, eyes, eyebrows, a red nose, a mouth arc, and animated teeth and eyebrows. The face includes a red cigarette shape rotated and scaled, with white teeth that swing between rotations. The code uses d3 v6 with the `arc` and `select` APIs to construct shapes, and `transition().duration()` to animate the eyebrow and teeth positions. All elements are generated in JavaScript and appended to an SVG container.

Jun 18, 2022