JayanthKumarkoni

@JayanthKumarkoni·22 public vizzes

Activity 6

This example loads a dataset from a CSV file and displays the first 10 rows in a JSON-formatted block on the page, using the D3.js library (d3.csv, d3.csvFormat) to fetch and format the data. The visualization renders as static SVG and WebGL elements within an HTML page, with a black background and aqua-colored text for the output. The code also imports a local ES6 module and demonstrates D3’s data-handling capabilities in a Vue framework context.

Jul 23, 2023

Loading thumbnail…

Area Chart Activity 8

This area chart visualizes the cost of sales from 2000 to 2013, using a smooth curve to connect annual data points and a light green fill to emphasize the area beneath the line. The example loads data from a CSV file and renders the visualization as an SVG using D3 v5, leveraging `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, `d3.line`, and `d3.area` with a basis curve. Red tick labels and orange axis labels highlight the chart’s styling, while gridlines extend across the plotting area.

Jul 23, 2023

Loading thumbnail…

linechart

A line chart visualizes the cost of sales from 2000 to 2013, with years on the x-axis and cost on the y-axis. The chart is rendered as SVG, using D3 v7's `scaleBand`, `scaleLinear`, `line` (via `d3.line()`), and axis functions (`axisBottom`, `axisLeft`) to draw the path and axes. Data is loaded from a CSV file using `d3.csv`. The chart includes red axis labels and a red title.

Jul 23, 2023

Loading thumbnail…

Pie Chart

This pie chart displays the count of students from each major at UNT, with slices colored and labeled with values in thousands. The visualization uses D3 v5’s `d3.pie` and `d3.arc` generators to compute and draw each segment, while `d3.scaleOrdinal` maps majors to a fixed palette. Data is loaded asynchronously via `d3.csv` from a GitHub gist, and the SVG output includes interactive-free labels and a legend. Styling is applied through an external stylesheet, and the chart is rendered entirely with SVG elements.

Jul 23, 2023

Loading thumbnail…

Network Graph

This network graph visualizes social connections between seven individuals. Green nodes represent people with their names displayed, while black lines with arrowheads indicate friend relationships. The layout uses a physics-based force simulation with charge, collision, link, and centering forces, enabling interactive dragging and reorganization. Node highlighting occurs on hover, and the graph is rendered as an SVG using D3.js v6, with data loaded from a JSON file.

Jul 23, 2023

Loading thumbnail…

Network Graph

This network graph visualizes a social network of people connected by friendship links. The data, loaded from a JSON file, defines ten nodes and twelve directed relationships with varying edge weights. Built with D3 v6, the visualization uses `d3.forceSimulation` for physics-based layout, with forces for links, many-body repulsion, collision, and centering. Nodes are rendered as large green circles with red labels, and links are drawn as blue lines with arrow markers. Viewers can drag nodes to reposition them.

Jul 23, 2023

Loading thumbnail…

MuscleCars tree

The MuscleCars tree visualizes linked list structures as an interactive, collapsible hierarchy using d3.v3’s `d3.layout.tree`. Nodes are color-coded by type (e.g., root, list, node) and rendered as SVG rectangles with hover tooltips. Green arrow markers trace parent-child links, and a drop-shadow filter enhances depth. The layout supports zooming, panning, and node click to toggle children, with spacing adjusted via collision detection. Data comes from a static `Tree.json` file defining nested nodes and their relationships.

Jul 23, 2023

Loading thumbnail…

Activity 8 Country

This example renders a simple choropleth-free map of India using D3.js version 5 and the TopoJSON client library. It loads world country boundaries from the world-atlas package, filters the geometry for India, and applies a Mercator projection fitted to a 960 by 500 pixel canvas. The resulting SVG path is drawn with `d3.geoPath`, demonstrating the direct use of geographic projections and TopoJSON feature extraction without additional styling or data overlays.

Jul 23, 2023

Loading thumbnail…

Activity 8 Canada

This example displays a map of Canada using a Mercator projection fitted to the country’s geographic boundaries. The visualization renders the nation’s outline as a single SVG path, shaded in black against a white background for clear contrast. The code loads world country geometries from the World Atlas TopoJSON dataset, extracts Canada’s feature, and draws it with d3.geoPath coupled with d3.geoMercator. It relies on d3.json for data fetching, topojson-client for feature extraction, and appends the resulting SVG to the page.

Jul 23, 2023

Loading thumbnail…

Activity 8 Map

This map visualization displays the countries of the world using the geoEquirectangular projection to render a flat view of the Earth. The visualization allows users to zoom and pan across the geographic data. It employs D3 v5’s geoPath and geoEquirectangular functions to draw the countries, which are loaded from a world-atlas GeoJSON file made available via jsdelivr. The SVG map features interactive hover states that change the country fills to maroon, providing immediate visual feedback on the map. The code also integrates the topojson package to process the GeoJSON data into usable features.

Jul 23, 2023

Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive visualization uses D3.js to display the Iris dataset as an animated scatter plot. The code cycles through different x-axis measurements every few seconds, showing relationships between petal width, sepal width, petal length, and sepal length. Points are colored by species (setosa, versicolor, virginica) with a legend and axis labels. The reusable scatterPlot component handles scales and axes via d3.scaleLinear, axisLeft, and axisBottom, while circles are rendered with SVG and animated using setInterval.

Jul 23, 2023

Loading thumbnail…

Bubble chart

This bubble chart visualizes healthcare facility data, plotting the number of beds on the x-axis against average rating on the y-axis, with bubble size representing the number of doctors. Each point uses the `d3.scaleSqrt` function to map doctor counts to circle radii, creating a clear proportional comparison. The chart renders with SVG circles and D3.js axes, displaying a title and axis labels. It reads the data from a CSV file and updates the visualization asynchronously. The tooltip and hover effects provide interactivity, highlighting individual data points on demand.

Jul 23, 2023

Loading thumbnail…

Traffic Data Scatter Plot

This scatter plot visualizes traffic data, showing the number of vehicles against the hour of day, with each point’s radius and color encoding the percentage of heavy vehicles. It loads CSV data from GitHub and renders circles in an SVG using D3 v6, employing `scaleLinear` for axes, `scaleSqrt` for circle sizing, and `scaleOrdinal` with `schemeCategory10` for color mapping. Axes are added via `axisLeft` and `axisBottom`.

Jul 23, 2023

Loading thumbnail…

Car Type Distribution

A stacked horizontal bar chart shows the proportional distribution of five car types—compact, midsize, large, SUV, and truck—across three brands, with each bar segmented by percentage. The visualization uses D3 v7’s `d3.stack` to compute stacked series, `d3.scaleBand` for brand categories, and `d3.scaleOrdinal` for color mapping. SVG rects render the segments, and mouseover tooltips display exact percentages. Data comes from a local CSV file, with axes and a legend generated via `d3.axisBottom` and manual legend elements.

Jul 23, 2023

Loading thumbnail…

Activity 7

This visualization displays a horizontal bar chart comparing the number of users across various applications. Built with React and D3 v5, it renders data from a remote CSV file, loading and displaying the first 50 entries. The chart uses D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with bars rendered as SVG `<rect>` elements. The code includes custom axis components and formatting, converting large numbers to abbreviated forms with `format('.2s')`, and provides tooltips showing the formatted user counts.

Jul 23, 2023

Loading thumbnail…

Bubble chart

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for various car makes. Each circle is positioned by its horsepower and torque on the x and y axes, with its size encoding highway MPG and color distinguishing the car brand. Built with D3 v7, the SVG chart uses linear scales, a color legend, and interactive tooltips that appear on hover. The data comes from a CSV file, and the visualization is rendered as an animated SVG.

Jul 22, 2023

Loading thumbnail…

Fork of Scatter Plot with Shape

This scatter plot visualizes iris flower measurements, mapping sepal length and petal length along the axes while using distinct symbols to encode species type. It is built with D3 v7, leveraging `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and `symbolGenerator` to draw marks. The visualization includes a custom shape legend and loads data from a CSV file, then parses numeric fields before rendering.

Jul 22, 2023

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes while coloring each point by species. The D3.js code loads CSV data and uses `scaleLinear` with `extent` to establish scales, rendering circles via SVG. Axis labels appear for both dimensions, and the plot dynamically sizes to the browser window.

Jul 22, 2023

Loading thumbnail…

IMDb Movie ratings

This stacked bar chart shows the percentage of IMDb ratings across five genres, from documentary to action, revealing how rating distributions shift by genre. Each bar segment represents a rating bracket, and hovering highlights the segment while displaying the exact percentage via a tooltip. The visualization uses D3 v7 with SVG rendering, employing d3.stack, d3.scaleLinear, and d3.scaleBand to structure the data, and d3.csv to load the pre-aggregated dataset. A legend and axis labels clarify the rating categories and percentage scale.

Jul 22, 2023

Loading thumbnail…

Raing

This example demonstrates how a D3.js v5 project can load the library from a CDN and use ES6 modules to structure code, displaying the text “Hello VizHub!” in the center of the page. The index.js file imports the `select` function from D3 and a local `message` constant, then applies it to set the content of a div. The HTML page links a CSS file for styling, and the accompanying README explains the project’s use of UNPKG and modular imports. The visualization is a simple, static text rendering rather than a data-driven graphic.

Jul 22, 2023

Loading thumbnail…

IMDI rating

This example displays the text “Hello VizHub!” in a large, centered layout using D3’s `select` method to target a div with the ID `message`. It demonstrates loading D3 v5 from a CDN via UNPKG and importing a local ES6 module, `myMessage.js`, which exports the displayed string. The code shows a minimal setup with a `styles.css` file controlling font size and alignment, illustrating how to combine external libraries, local modules, and styling in a single visualization template.

Jul 22, 2023

Loading thumbnail…

Activity 7

This example displays a horizontal bar chart comparing the 2020 populations of 20 countries, using data loaded from a CSV file. The visualization is built with React and D3 v5, rendering as an SVG. It uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with bars colored light green. Mouse-over tooltips, generated via a `<title>` element, reveal the population values in a formatted, abbreviated style (e.g., using "B" for billions).

Jul 22, 2023