N

Naveed945

@Naveed945·33 public vizzes

Loading thumbnail…

Fork of tree test

This interactive visualization displays a hierarchical tree of animal classifications, from "Animals" down to species like "Tiger" and "Snake." It uses the D3.js library with the `d3.layout.tree` and `d3.svg.diagonal` APIs to position nodes and draw links. Users can click on nodes to expand or collapse their children, with animated transitions handled by D3's `.transition().duration()`. SVG circles represent nodes, styled with a yellow fill and black stroke, while orange paths depict the connecting links.

Loading thumbnail…

Fork of Tree Example: ICE-8

This interactive tree diagram visualizes a biological classification hierarchy, showing how animals are grouped into vertebrates and invertebrates, with further subdivisions down to individual species. The visualization uses a collapsible tree layout where nodes can be clicked to expand or collapse their children. Built with D3.js v3 and React, the code employs `d3.layout.tree` for the hierarchical layout, `d3.svg.diagonal` for the orange curved links, and SVG circles and text for nodes. Colors distinguish different taxonomic levels, with yellow nodes, green type indicators, and black leaf nodes.

Loading thumbnail…

Fork of Network graph of social connection

This network graph visualizes social connections among nine named people, with nodes positioned by a force-directed layout and links indicating relationships. The code loads data from a JSON file and uses d3.layout.force with gravity, distance, and charge parameters to simulate node placement. Node circles are green with maroon strokes, while link thickness varies with the weight value from the data. Text labels display each person’s name, and dragging is enabled via force.drag. The visualization renders in SVG on an HTML canvas using D3 v4.

Loading thumbnail…

Fork of

This example displays a world map using the Natural Earth projection, with countries filled in sky blue against a black spherical backdrop. The visualization loads geographic data from the World Atlas TopoJSON dataset via `d3.json`, then converts it to GeoJSON features using `topojson.feature`. The `d3.geoNaturalEarth1` projection and `d3.geoPath` render the countries as SVG paths, while a separate path for the sphere outlines the globe.

Loading thumbnail…

Fork of ICE-8

This example displays a choropleth-style map of Telangana State, India, with district boundaries drawn in black and fill colors that change to grey on hover. It uses React for component structure and D3 v5’s `geoMercator` projection with `geoPath` to render the SVG paths, while TopoJSON’s `feature` and `mesh` functions parse the district boundary data from a remote Telangana JSON file. The map is titled “Telangana State” and appears centered in a fixed 960×500 viewport, demonstrating a basic interactive state-level geographic visualization.

Loading thumbnail…

Fork

This interactive map of Dutch municipalities shows the administrative borders of the Netherlands, which users can click to zoom into a specific region. Clicking a municipality highlights it in red and smoothly animates the view to center on it, while clicking the background resets the map to its full extent. The visualization uses D3 v6 with the `d3.geoMercator` projection, `d3.geoPath` for rendering vector features, and the D3 zoom behavior (`d3.zoom`) to handle panning and scaling transforms. Data comes from a TopoJSON file of 2020 municipal boundaries fetched via `d3.json`, with hover states colored orange.

Loading thumbnail…

Untitled

This example presents a world map with red circles marking a curated list of cities, including Tokyo, London, and Easter Island. The map is built using D3.js version 3 with a Mercator projection and TopoJSON data for country boundaries. Users can pan and zoom the map via the d3.behavior.zoom API, while a tooltip-like styled div is defined but not activated. City coordinates are projected onto the SVG canvas using d3.geo.path.

Loading thumbnail…

Untitled

This example displays a 3D scatter plot of a grocery store dataset, with cost price, profit, and selling price mapped to the X, Y, and Z axes. It loads Plotly.js from a CDN to render the interactive `scatter3d` chart, while D3.js is used to fetch and parse the CSV data from a GitHub gist. Each point is styled with a fixed size, opacity, and subtle line color, and the plot layout customizes axis titles with blue fonts. The code demonstrates combining external libraries for data loading and visualization in a single page.

Loading thumbnail…

Fork of Bonus ICE - 3D Bar chart

A 3D bar chart displays car model sales across five countries—USA, India, China, Japan, and Canada—for five manufacturers: Toyota, Volkswagen, Honda, Ford, and Suzuki. It uses Highcharts with the highcharts-3d module to render rotated, depth-enhanced columns with stacked series. The chart includes labels for total sales on the y-axis and various models on the z-axis, with data embedded directly in the script.

Loading thumbnail…

Untitled

This example shows a bar chart displaying sales data with drop-shadowed bars and axes, animated in an SVG container. The chart uses a hierarchical caption system for tick labels and is built with D3 v2 scales and axes, including ordinal and linear scales. It also employs jQuery for DOM selection and element sizing. The code structures the visualization within a React framework, using D3’s SVG rendering and a filter with feGaussianBlur and feOffset for the shadow effect.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot animates through four variables from a grocery store dataset, cycling Profit, Quantity, Selling_Price, and Cost_Price on the x-axis while Cost_Price remains on the y-axis. SVG circles are colored by category (Frozen, Grocery, Produce) using a switch statement, with the reusable `scatterPlot()` module handling scales and axes via `scaleLinear`, `axisLeft`, and `axisBottom`. A `setInterval` triggers the x-value changes, rebuilding the plot and updating the axis labels, while custom legends and titles are appended dynamically. Data comes from a CSV loaded with `d3.csv`.

Loading thumbnail…

Fork of Fork of ICE-7 Area Chart

This visualization displays Netflix subscriber costs over time, using a smoothed area chart drawn as an SVG. The code relies on D3 v5 functions like `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` with `curveBasis` to generate the path. Data is loaded from a CSV file and parsed with `d3.timeParse`. The chart is rendered inside an HTML page with CSS styling, with axis labels and gridlines styled via `.tick` and `.axis-label` classes.

Loading thumbnail…

Fork of Internet Users by World Region

A multi-line chart shows the number of Internet users per world region from 1990 to 2015, highlighting North America’s saturation and East Asia & Pacific’s rapid growth. Built with MetricsGraphics, it renders seven region-specific series using d3.csv and d3.nest for data grouping. The chart spans the full viewport, applies a custom SI tick format (replacing “G” with “B” for billions), and uses d3.schemeCategory10 for line colors. Data originates from World Bank via Our World in Data.

Loading thumbnail…

Fork of line chart naveed

This visualization shows trends in internet users across different global regions from 1990 to 2010, using multi-line chart with color-coded paths and an interactive tooltip that displays the region name on hover. The code uses d3.csv to load the data, d3.nest to group by entity, d3.scaleTime and d3.scaleLinear for axes, and d3.line to generate the SVG paths. A d3.schemeCategory10 color scale assigns distinct colors to each line, while the legend is built manually using SVG text elements. The rendering relies on SVG with CSS-styled paths and axes, and mouse event handlers drive the tooltip display.

Loading thumbnail…

Fork of

A donut chart displays box office collections for the film Bahubali across Indian cities, with each slice representing a city's revenue in crores. The visualization uses D3.js v4 to generate SVG paths via `d3.arc` and `d3.pie`, with a `d3.scaleOrdinal` color scheme. Interactive hover effects highlight slices and show tooltips with city names and values, while a separate legend lists all cities.

Loading thumbnail…

emic

This example shows a scatter plot of academic publication influence against University Ranking, with the size of each bubble encoding the number of alumni employed. The visualization is built using the vega-lite-api, which registers Vega and Vega-Lite for declarative chart creation, and includes a d3.csv loader to fetch data from a GitHub-hosted CSV file. The plot is rendered to SVG, with tooltips enabled via the vega-tooltip Handler, and the config file customizes axis and label colors for readability against a light background.

Loading thumbnail…

Fork of

This visualization displays a scatter plot of grocery data from a GitHub-hosted CSV file, plotting Profit against Cost_Price, with color encoding by origin and point size representing mpg. Points are rendered as semi-transparent circles with tooltips showing Cost_Price values. The code uses the vega-lite-api library to construct the chart, registering vega and vega-lite, and leverages d3.csv for data loading. A dark-themed config customizes axis labels and title styling, while the chart auto-fits to the window dimensions.

Loading thumbnail…

Reusable Scatterplot Example

This example presents a reusable scatterplot component built with D3.js (v3 via CDN) and rendered as SVG. It visualizes the classic Iris dataset, mapping sepal length to the x-axis, petal length to the y-axis, and sepal width to the radius of each circle, while species determines color. The chart is configured through a chainable API (e.g., `.outerWidth()`, `.xAxisLabel()`, `.rMax()`), demonstrating how to load D3 from UNPKG, import local ES6 modules, and implement a modular, reusable visualization with custom axes, scales, and labels.

Loading thumbnail…

ICE - 6 Scatter Plot

This interactive D3.js scatter plot visualizes grocery store data, plotting Cost Price on the x-axis against Profit on the y-axis. Points are colored by product category (Grocery, Produce, or other) and sized with additional attributes for Selling Price and Quantity. The visualization uses D3's `csv` loader to fetch data, `scaleLinear` for axis scaling, and `axisLeft` and `axisBottom` for rendering axes. The chart spans the full browser window and applies a custom margin, with data-driven circles drawn via SVG joins.

Loading thumbnail…

ICE-6:

This visualization displays the profit for the top 12 grocery products using a horizontal bar chart rendered as SVG through React. The code uses React hooks (useState, useEffect, useCallback) to load CSV data via d3.csv, then constructs scales with d3.scaleBand and d3.scaleLinear to map product names and profit values. Profit bars are drawn as SVG rect elements, with gridlines and tick labels generated manually from scale ticks. The data comes from a GitHub-hosted Grocery.csv file, and the chart title appears above the visualization.

Loading thumbnail…

ICE-6

This example renders a minimalist bar chart of grocery product profits using React and D3 v5. It loads CSV data via `d3.csv` and displays only the first two records. The visualization uses `scaleBand` for the y-axis positions and `scaleLinear` for x-axis widths, with profit values mapped to rectangle widths inside an SVG. The chart intentionally lacks axes or labels, and the data comes from a GitHub-hosted grocery dataset rather than the UN population data mentioned in the README.

Loading thumbnail…

ICE-6 DV

This visualization displays the profit earned by the top 11 grocery products, rendered as a horizontal bar chart using React and D3 v5. The chart uses `scaleBand` for the product categories on the y-axis and `scaleLinear` for profit values on the x-axis, with purple bars showing relative profitability. Data is loaded from a CSV file via `d3.csv` and simple SVG `<rect>` elements are generated for each bar, accompanied by axis labels and tick marks drawn with SVG primitives.

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the Iris Dataset, plotting petal length against sepal width. Each flower is represented as a circular mark, with axis labels and tick marks providing scale context. Built with React and D3 v5, it uses `scaleLinear` for both axes, `extent` to compute domains, and `csv` to load the data from a GitHub gist. The SVG rendering includes custom axis components that generate ticks, while the marks use a native `<title>` element to display formatted values on hover.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to structure a minimal VizHub project using D3 v5 and ES6 modules. It displays the text "Hello VizHub!" centered on the page, loaded through a local `myMessage.js` module. The code imports the `select` function from D3 via UNPKG to target the `#message` div, and applies styling from `styles.css`. The project shows the basic pattern of combining external D3 imports with local modular JavaScript files.

Loading thumbnail…

Fork of Fork of React & D3 Starter

This example demonstrates a decoupled React and D3 integration for rendering a scatter plot of the Iris dataset. The visualization plots sepal length against petal length, using SVG circles to represent individual data points. The code showcases a scalable architecture pattern with separate modules for data loading, visualization logic, and axes rendering, highlighting how D3's `scaleLinear` and `axisLeft`/`axisBottom` APIs combine with React's `useRef` and `useEffect` hooks. The visualization selects SVG elements via D3's `select` and `join` methods to manage circle rendering.

Loading thumbnail…

Fork of Fork of Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This visualization demonstrates loading and parsing a remote CSV dataset using D3.js, then displays summary statistics about the data in a large text area. The code fetches the CSV from a GitHub gist URL and uses `d3.csv()` to parse the response, reporting the file size in kilobytes, the number of rows, and the number of columns. Beneath the statistical summary, a decorative cityscape SVG image is rendered. The page uses plain HTML with embedded CSS and JavaScript, leveraging D3 v7 for asynchronous data handling.

Loading thumbnail…

Fork of Fork of IN CLASS EXERCISE-5

This visualization presents a text-based data summary for a CSV file containing lipstick sales data. The page displays a header and a large preformatted text block that reports the data file's size in kilobytes, the number of rows, and the number of columns. It loads data asynchronously using the `d3.csv` function, then formats the message with `d3.csvFormat` and `Math.round`. The HTML structure includes inline CSS styling for the header and message area, and the page also embeds an external SVG image.

Loading thumbnail…

Fork of IN CLASS EXERCISE-5

This example displays a data summary for a lipstick sales CSV file, showing the file size in kilobytes, the number of rows, and the number of columns within a styled HTML page. It uses the D3.js library (version 7) to fetch the remote CSV via `d3.csv`, then processes the parsed data with `d3.csvFormat` to calculate the byte length and access the data's column count. The results are rendered into a `<pre>` element, accompanied by a static SVG image and custom CSS styling for the headings.

Loading thumbnail…

Fork of Fork of D3 Starter

This example displays a sortable, searchable DataTable of grocery store sales data. It uses React and D3 version 6 to asynchronously fetch a CSV file from a GitHub gist, parse it with `d3.csvParseRows`, and build an HTML table element. The table is then enhanced with the DataTables jQuery library for interactive features, while a React component adds a static label above the visualization.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how a web page can load a CSV file and display its contents as an HTML table using the jQuery plugin `csvToTable`. It also shows how to integrate external JavaScript libraries within a VizHub project, specifically importing D3.js version 5 from UNPKG and using the D3 `select` API to update the text of a `div` element. Additionally, it highlights the use of local ES6 modules by importing a `message` string from `myMessage.js`. The page styling is defined in `styles.css`, setting the message to be centered and large.

Loading thumbnail…

Ice example

A yellow smiley face composed of SVG shapes is rendered on a black background, with circular eyes, red pupils, eyebrows, a red mouth, and black ears. The visualization uses React to define the SVG elements and d3.arc to generate the curved paths for the mouth, eyes, and ears. The code sets explicit dimensions, positions, and stroke widths for each facial feature. The face is centered in an 850 by 455 SVG canvas.

Loading thumbnail…

Ice fork

A yellow smiley face with black eyes, eyebrows, and a curved mouth is centered on a plain background. The eyebrows continuously raise and lower in an infinite loop using D3 transitions. The shape is drawn with SVG primitives like `circle` and `rect`, while the mouth is generated via the `d3.arc()` path generator. No external data is loaded; the graphic is purely code-driven.

Loading thumbnail…

ice fork

This example shows a stylized smiley face built entirely from SVG shapes, with the facial features arranged around a central point using React components. The face includes a yellow background circle, elliptical eyes and eyebrows, and a mouth drawn as a d3.arc path. The React components (BackgroundCircle, Eyebrows, Eyes, Mouth) accept props for positioning and sizing, while the main App component translates the coordinate system to center the face within a 960×500 viewport.