Danthalakirankumar

Network Graph by using JSON and HTML

This example presents a force-directed network graph of seven nodes representing a dean, two teachers, and four students, with weighted links showing relationships. The visualization uses D3 v4 and the older d3.layout.force API to position nodes within an SVG canvas. Node positions update dynamically via the force.on("tick") callback, while node dragging is enabled through force.drag. The graph reads its structure from a JSON file, rendering each node as a tomato-colored circle with a name label and links as stroked lines whose thickness corresponds to the link's weight attribute.

Apr 4, 2022

Fork of Network Graph

This interactive network graph depicts a crime investigation, with nodes representing a murder, victims, suspects, and a witness, connected by weighted links. The visualization uses a traditional force-directed layout to position the nodes, allowing users to click and drag them around the canvas. Built with React and D3 v4, the graph is rendered as an SVG and loads its data from a JSON file. The code relies on the deprecated `d3.layout.force` API and `d3.select` to manage the simulation and rendering.

Country Map by using D3.js

This example shows a choropleth-style map of the United States, displaying state boundaries as black lines against a dark blue fill. The visualization uses React to render SVG elements, with D3’s `geoPath` and a custom `geoAlbersUsaTerritories` projection to convert TopoJSON data from `us-atlas` into geographic paths. State land areas are drawn from the `states` object, while interior borders are generated with `topojson.mesh`. The map is static, with no interaction or labels, focusing solely on geometric representation.

World maps by using D3.js

This SVG world map uses D3.js to render country boundaries as projected paths. The visualization fetches geographic data from the world-atlas JSON endpoint, extracts country features via TopoJSON, and draws them with d3.geoPath using an equirectangular projection. The ocean sphere and landmasses are filled with distinct colors, referenced from the included stylesheet.

Country Map by using JavaScript

This example shows a single country, the United States of America, rendered as a green SVG path on a blue background. It uses D3 v5’s `d3.geoAlbersUsa` projection and `d3.geoPath` to generate the map geometry. The code fetches world country boundaries from the world-atlas TopoJSON dataset, filters for the USA by name, and draws the path onto the SVG canvas. The `topojson` library’s `feature` method converts the TopoJSON data into GeoJSON for path generation.

Area Chart Visualization

This area chart displays Google’s annual user counts from 2011 to 2021, emphasizing the upward trend through a filled region beneath a smooth curve. The visualization is built with D3 v5, using `d3.line` and `d3.area` generators with a `curveBasis` interpolation to create smooth paths. It loads CSV data from a GitHub gist, maps years to a linear x-scale and user counts to a linear y-scale, and renders axes with gridlines as SVG. Styling is applied via external CSS, with distinct colors for ticks, labels, and the area fill.

Line chart Visualization

This line chart visualizes Google’s annual user counts from 2011 to 2021, loaded from a GitHub-hosted CSV file using d3.csv. It renders an SVG with d3.scaleTime for the x-axis (years) and d3.scaleLinear for the y-axis (users), alongside d3.axisBottom and d3.axisLeft with gridlines. A d3.line generator creates the path, while axis labels and a title are added via SVG text elements. The chart employs d3.extent and d3.max to set domain bounds and custom margins for layout.

Pie chart Visualization

This pie chart visualizes the top 10 Indian states by population, with each slice colored distinctly and paired with a legend listing state names and population values in thousands. Built with D3 v5, the code loads CSV data from a GitHub gist via `d3.csv`, computes arc segments using `d3.pie` and `d3.arc`, and renders the chart as SVG. Color mapping uses `d3.scaleOrdinal`, while numeric labels are formatted with `d3.format`. The legend is manually appended alongside the pie, and no interactivity is implemented.

Fork of Pie chart Visualization

This example displays a pie chart showing the top 10 countries by deaths from air pollution in 2020. Each slice is labeled with the death count in thousands, and a legend lists the countries alongside their corresponding values. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute the arc paths and assign colors, while rendering the chart as SVG. Data is loaded asynchronously via `d3.csv` from a remote gist URL.

Pie chart Visualization

This pie chart visualizes the top 10 countries by deaths in 2020 attributed to air pollution, using a dataset fetched from a GitHub gist via the d3.csv API. Each slice is colored using d3.scaleOrdinal, with the country and death count displayed directly on the chart and in a legend. The code generates SVG arcs with d3.arc and d3.pie, centering the chart within a fixed 960x500 SVG canvas. Death values are formatted in thousands (e.g., “123K”) using d3.format.

Reusable Scatter Plot - Data Visualization

This reusable scatter plot visualizes the Iris dataset, mapping petal width against sepal length. Each circle represents a data point, color-coded by species (setosa, versicolor, virginica) using a custom `getColor` function. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while the `scatterPlot` factory pattern allows dynamic updates to x-value selections. The SVG is drawn full-window on an orange background with white text and axis labels.

Mar 27, 2022

Visualization for Scatter Plot by using Iris DataSet

This visualization presents a scatter plot of the Iris dataset, mapping petal length and width as the primary x and y axes. Each point is colored by species (setosa, versicolor, or virginica) and additionally encodes sepal length and width as elliptical radii on the circles. The code uses D3 v6 modules including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select` within a React framework, rendering to SVG. Data is loaded from a GitHub gist URL, with axes labeled "Petal length" and "Sepal length."

Mar 27, 2022

Bar chart Graph with D3.js

A horizontal bar chart displays the population of Indian states, with bars sorted by descending values from Uttar Pradesh to Andhra Pradesh. The visualization uses D3.js v7 to load CSV data via `d3.csv` and renders SVG rectangles scaled with `d3.scaleLinear` and `d3.scaleBand`. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, with state labels on the y-axis and population counts on the x-axis. The bars are styled orange with axis labels added as SVG text elements.

Mar 7, 2022

Iris Dataset Scatter Plot for data visualization

This D3.js scatter plot visualizes the Iris dataset, mapping petal length and width for each sample while coloring points by species using a custom marker function. The chart displays axes labeled “PETAL LENGTH” and “SEPAL LENGTH” with rotated text, and uses d3.csv to load the data, d3.scaleLinear for scaling, and d3.axisLeft/axisBottom for tick marks. Rendered as SVG, the plot derives dimensions from window.innerWidth and window.innerHeight.

Mar 7, 2022

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris dataset, plotting petal length and width for individual flowers, with each species (setosa, versicolor, virginica) assigned a distinct color (blue, red, black). It uses D3 v6 to fetch the CSV data via `d3.csv`, then maps the values to screen coordinates using `d3.scaleLinear` and `d3.extent`. Circles are rendered with an SVG `join` operation, and axes are added with `d3.axisLeft` and `d3.axisBottom`. The plot fills the browser window, leveraging a full-screen SVG canvas.

Mar 7, 2022

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

This bar chart displays the top 10 most populous countries, loading data from a CSV file containing 2019 population figures. The visualization renders as an SVG using React components that map country names to a band scale and population values to a linear scale. The code leverages React hooks like `useState` and `useEffect` alongside D3 utilities including `csv`, `scaleBand`, `scaleLinear`, and `max` to fetch, parse, and visually encode the dataset.

Mar 5, 2022

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

This example demonstrates how to load and parse CSV data using D3.js within a React framework, rendering an SVG visualization. The code fetches tabular data and maps it to visual elements, including a series of styled paths, rectangles, and ellipses that form a recognizable icon-like shape. It uses D3’s data binding methods to iterate over the parsed rows and attributes like `fill` and `stroke` to style the output. The SVG viewBox and coordinate system are explicitly defined to control the layout, with D3’s `d3.csv` and DOM selection APIs driving the data-to-visual mapping.

Feb 28, 2022

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

This example demonstrates loading and parsing CSV data with D3.js, displaying the dataset’s size in kilobytes, row count, and column count in a styled HTML document. The page includes a decorative SVG illustration and a heading. The code uses `d3.csv` to fetch data from a GitHub gist URL, then calls `d3.csvFormat` to calculate the formatted string length. The resulting statistics are injected into a `<pre>` element via the DOM API. The visualization relies on D3 v7 and React, rendering as SVG.

Feb 25, 2022

Fork of homework smiley face

This example shows a stylized smiley face rendered as a single SVG scene, built with React and D3. The face includes a pink circular head, two eyes with colored pupils and eyebrows, and a curved mouth generated using the `d3.arc` path generator. All shapes are drawn with SVG primitives, including circles, ellipses, lines, and paths, positioned using fixed coordinates and a centered translation group. The app is created with React functional components and D3 v7, with the SVG output defined entirely in JSX. The design appears to be a customized homework exercise rather than a data-driven visualization.

Feb 20, 2022