A

achyutanandmishra17@gmail.com

@Achyut2995·27 public vizzes

Loading thumbnail…

World Map

This world map visualizes global population distribution by income group, using color to encode each country's economic classification. The map is rendered with D3 v5’s `d3.geoMercator` and `d3.geoPath`, projecting GeoJSON country boundaries from the world-atlas package. A color legend, built with custom D3 code, maps income categories to a sequential red color scale (`d3.schemeReds`), while interactive zooming is enabled via `d3.zoom`. Population data from the included CSV is not directly displayed but informs the visualization’s narrative.

Loading thumbnail…

Earth Tree

This example renders a hierarchical tree visualization of Earth and its continents, with countries as leaf nodes, using an SVG-based layout. The tree is generated with `d3.hierarchy` and `d3.tree`, and links are drawn as horizontal paths via `d3.linkHorizontal`. Each node is a circle with a text label, styled through CSS classes. The data is hardcoded in the script, and the visualization uses D3 v7 within a plain HTML page.

Loading thumbnail…

India Map

This example displays a choropleth map of Indian states, colored with a categorical color scale and labeled with state names positioned at each region's centroid. It renders SVG paths using `d3.geoPath` with a `geoMercator` projection, and loads GeoJSON data via `d3.json` from a public gist. State boundaries are styled with orange strokes, and tooltips appear on hover via appended `title` elements. The visualization uses `scaleOrdinal` with `schemeCategory10` to assign colors to each state based on its `NAME_1` property.

Loading thumbnail…

Earth Tree

This example displays a hierarchical tree of Earth's continents and countries, with each node represented by a circle and label. The tree layout is computed using `d3.tree()` and `d3.hierarchy()`, which assign parent-child relationships and spatial coordinates. Nodes and links are rendered as SVG elements: circles for nodes and horizontal curved paths for links, styled via CSS classes. The data is a static JavaScript object listing continents and selected countries, and the visualization uses D3 v6 within an HTML page.

Loading thumbnail…

Social Network graphic

This visualization shows a social network of cricket players, with nodes representing individuals and links representing connections between them, where link thickness encodes the weight of each relationship. The graph is rendered as an SVG using D3.js v4’s force layout, which positions nodes according to gravity, charge, and link distance. Nodes are draggable via `force.drag`, and each node displays a name label alongside a blue circle. The data comes from a local JSON file (`networkgraph.json`) defining eight nodes and seven weighted links, with node styling and link colors set through CSS.

Loading thumbnail…

Fork of 3D Scatter Plot

This example visualizes the Penguin Dataset as a 3D scatter plot using Plotly.js, mapping bill length, bill depth, and flipper length onto the x, y, and z axes. It renders three nearly identical traces with different marker colors, sizes, and border styles. The code loads the CSV data with d3.csv, then uses Plotly’s `newPlot` to display the interactive scene. The layout removes all margins so the plot fills the page. Data comes from a GitHub-hosted CSV file.

Loading thumbnail…

3D Bar Chart using D3.js

This example shows mobile phone sales data for multiple companies across twelve months as an interactive 3D bar chart. It uses the d3-x3d library to render the chart in X3DOM, a WebGL-based scene graph, by populating a `d3.x3d.chart.barChartMultiSeries()` component inside a React application. The data is loaded as CSV and parsed into a multiseries format, with D3 v5 handling scales, axes, and selections while d3-3d assists with 3D transformations.

Loading thumbnail…

3D Scatter Plot

This example displays the Iris dataset as a 3D scatter plot, mapping bill length, bill depth, and flipper length onto the x, y, and z axes. It renders three overlapping marker traces, each with distinct styling for size, color, and opacity, to highlight different visual encodings of the same data points. The visualization is built with Plotly’s `scatter3d` trace type, loaded via the CDN script, and the data is fetched and parsed using D3’s `d3.csv` function. The layout removes all margins to maximize the plotting area.

Loading thumbnail…

ICE-7 Line Chart

This example visualizes house prices over time using a line chart with a filled area beneath the curve, rendered as SVG in a React-based VizHub project. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `line`, `area`, and `curveBasis` to draw the smoothed trend, with axes from `axisBottom` and `axisLeft`. Data is loaded via `csv` from a remote GitHub Gist, parsed into `Date` and numeric cost values, and styled with CSS classes for bold black lines and a blue fill.

Loading thumbnail…

ICE - 7 Pie Chart

This interactive pie chart visualizes loan details, displaying applicant income segments with color-coded sections and a corresponding legend that maps Loan IDs to income values. Built with React and D3 v5, it uses `d3.csv` to load data from a GitHub gist, then applies `d3.pie` and `d3.arc` to generate the chart’s paths, with `scaleOrdinal` assigning colors. The SVG rendering includes formatted income labels in thousands (e.g., "5K") via `d3.format`, and the legend is manually positioned alongside the pie.

Loading thumbnail…

Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris flower dataset, showing the relationships between sepal and petal measurements. Colored circles represent different species (setosa, versicolor, and virginica). The plot animates by cycling through different x-axis columns—petal width, sepal width, petal length, and sepal length—every few seconds using `setInterval`. Built with React and D3 v6, it uses `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` for scales and axes, with SVG rendering for the animated marks and legend.

Loading thumbnail…

Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset, cycling through different feature pairs (petal width, sepal width, petal length, sepal length) on the x-axis while keeping sepal length on the y-axis. Circles are color-coded by species (red for setosa, violet for versicolor, orange for virginica) with a static legend. Built with React and D3 v6, it uses `d3.csv` for data loading, `scaleLinear` for scales, and `axisLeft`/`axisBottom` for axes. The plot updates every few seconds via `setInterval`, re-rendering the SVG with animated transitions between variable combinations.

Loading thumbnail…

ICE-7 Line Chart

This example shows the average home cost over time as an orange line chart, with years on the x-axis and price on the y-axis, including axis labels and a title. It uses React with D3 v5 to load CSV data from a GitHub gist, parse the year and cost fields, and render the visualization as SVG. The code applies `scaleTime` and `scaleLinear` for scaling, `axisBottom` and `axisLeft` for the axes, and a `line` generator to draw the path, with green gridlines and a blue title.

Loading thumbnail…

Pie Chart Example

This example displays a pie chart visualizing the distribution of totals across different categories, using a semitransparent color palette for each slice. It loads data from a remote CSV file via the Papa Parse library, extracting the `Category` and `Total` columns. The Chart.js library (version 3) is then used to render the chart onto an HTML5 Canvas element, with the chart configured to be responsive.

Loading thumbnail…

Fork of Scatter Chart Example

This example presents a scatter plot of penguin measurements, charting bill depth against body mass. The visualization, built with Plotly.js, loads its data from an external CSV file and renders SVG circles with a dark blue color and partial opacity. The chart includes labeled axes for both variables and a title, with the data fetched asynchronously using Plotly’s CSV parser. In contrast, the React component version, using D3.js, displays a separate scatter plot of stock close price versus volume, with steel blue points and linear scales defining the axes.

Loading thumbnail…

Scatter Chart Example

This example presents a scatter chart of penguin data, plotting bill depth against body mass using the Plotly JavaScript library. The chart reads a CSV file from a GitHub gist, extracts the two numeric columns, and renders them as colored markers with axis labels and a title. The code demonstrates how to use Plotly’s `d3.csv` for data loading and `Plotly.newPlot` for visual output, with styling applied via marker properties.

Loading thumbnail…

Scatter Chart Example

This example visualizes Netflix data, plotting happiness scores against life expectancy in a scatter chart. Each point represents a country, with a title “World Happiness vs Life Expentancy” displayed above the chart. The code uses React 17.0.2 to manage the DOM and d3.v6 functions like `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load and scale the data, render axes, and position circles with a radius of 10. Margins and ticks are configured to make the chart readable.

Loading thumbnail…

Fork of Bar Chart of Netflix data

This bar chart visualizes Netflix stock closing prices over time, with each bar representing the daily close value from the dataset. The chart uses D3.js v7 for data loading and SVG rendering, while React manages the component lifecycle through hooks. The code fetches CSV data via `d3.csv` and `fetch`, then constructs scales with `d3.scaleBand` and `d3.scaleLinear` to position and size the steelblue bars. Axis labels are rotated for readability, and the visualization is embedded in a React component using `useRef` and `useEffect`.

Loading thumbnail…

Bar Chart Example

This bar chart visualizes Netflix stock closing prices over time, fetched from a CSV file and rendered as individual date-labeled bars. The code uses React hooks (`useEffect`, `useRef`) to manage the chart lifecycle and D3 v6 APIs including `d3.csvParse`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. Bars are drawn as SVG `rect` elements with a steelblue fill, with dates rotated on the x-axis for readability. The chart dynamically fetches and parses the data before computing scales and rendering.

Loading thumbnail…

Bar Chart of Netflix data

This bar chart visualizes Netflix stock closing prices over time, with each bar representing the daily closing value plotted on a linear scale. The chart uses D3 v7’s `d3.csv` to load data from a GitHub gist, then employs `d3.scaleBand` for the date axis and `d3.scaleLinear` for price. SVG rectangles are drawn with steelblue fills, and rotated axis labels improve readability. The visualization is rendered directly in an HTML page without a framework, despite the React metadata.

Loading thumbnail…

ICE-6 Bar Graph

This example shows the monthly cost of basic internet service for the 12 most expensive dog-breed-owning countries, displayed as horizontal bars. It uses React with hooks (useState, useEffect) to load and manage the CSV data, while d3's scaleBand and scaleLinear map country names and costs to SVG rectangles. Axes are drawn manually with d3's max, format, and tick generation, and the visualization renders directly to SVG with red gridlines and a loading state.

Loading thumbnail…

Bar Chart Example

This example displays a horizontal bar chart ranking the average monthly cost of dog breeds across 12 countries, using a dataset loaded from a CSV file. The visualization is rendered as an SVG with React and D3 v6, where `scaleBand` positions the country labels on the y-axis and `scaleLinear` maps cost values to bar widths. Custom axes are drawn manually with `xScale.ticks()` and grid lines, while the bars are simple `<rect>` elements. The code also includes an alternative vanilla JavaScript implementation using `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Bar Chart Example with CSV Dataset

This example shows a bar chart comparing dog breed data loaded from a remote CSV file. The chart uses D3.js v6 within an HTML page to render SVG bars scaled by value, with x and y axes positioned using margins. It creates a linear y-scale and a band x-scale, then appends rectangles for each data row. The data is fetched via `d3.csv`, and axes are drawn with `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

ICE Assignment 5

This example displays a static image of a dataset related to dog breeds, presented as an embedded SVG graphic with a dark background. The visualization is rendered using raw SVG markup within an HTML page, which also includes styled headings and a preformatted text block. The code imports D3.js v7 from a CDN and uses basic CSS for layout and typography. The SVG references an embedded base64-encoded PNG image, which is repeated as a pattern, serving as the primary visual content for the breed data.

Loading thumbnail…

CSV to HTML Table with D3.js

This example displays the conversion of a CSV file into an HTML table using D3.js, with a header, styled rows, and hover effects. The code loads data from a remote CSV URL via `d3.csv`, then calculates and displays the file size, row count, and column count in a `<pre>` element. It uses D3 v7 and plain JavaScript, with CSS for table borders, padding, and row highlighting. The visualization focuses on data ingestion and basic formatting rather than advanced chart rendering.

Loading thumbnail…

Fork of 5 Buddha's in different colors -overlapping Buddha

Five overlapping Buddha silhouettes, rendered in a dark green landscape, use varied colors and opacity to create a layered visual effect. The React application generates each figure by mapping over arrays to produce numerous semi-transparent ellipses with randomized properties, which serve as a dynamic background. The primary Buddha shape is drawn using an SVG path, displayed within a `<g>` element that applies a translation and scale transform. The visualization combines React's declarative structure with SVG's vector graphics capabilities to present a stochastically generated and geometrically referenced composition.

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on the page in massive, 13em type. It demonstrates a minimal HTML document that uses a CSS class to style the message and relies on the browser’s default rendering engine. The code employs pure HTML and CSS, with no JavaScript libraries or data sources, serving as a basic template for static web content.