N

nithish-1999

@nithish-1999·20 public vizzes

Loading thumbnail…

Family Tree

This visualization displays a family tree as an interactive, animated diagram of connected nodes and links. The tree layout is computed using a custom `d3.layout.tree` function, and the SVG rendering is handled with D3.js v3, incorporating zoom and drag behaviors. The node colors vary by the `type` attribute from the JSON data, and the tooltips provide additional details. The rendering uses `baseSvg.append`, `svgGroup`, and specialized groups for nodes, links, and tooltips, with an arrow definition and drop shadow for visual clarity.

Loading thumbnail…

ICE-8 Social Network Graph

The ICE-8 Social Network Graph visualizes a small network of eight people connected by friend relationships, with node size and link thickness reflecting relationship strength. The graph uses a force-directed layout via `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes dynamically. It renders on an SVG canvas with circles for nodes, text labels, and lines with arrow markers, all styled through external CSS. Nodes are draggable using `d3.drag`, and hovering triggers a CSS class change. The data comes from `data.json`, containing node IDs and link relationships with values.

Loading thumbnail…

ICE8 -Country Map-US

This example displays a map of the United States rendered with green land areas and white state boundaries against a pale-green sphere background. It uses React to manage the application state and render SVG elements, while D3’s `geoAlbers` projection, `geoPath`, and `geoGraticule` handle the map geometry. Geographic data is loaded asynchronously from a TopoJSON file via D3’s `json` method, with the TopoJSON `feature` and `mesh` APIs extracting the nation outline and state borders.

Loading thumbnail…

ICE8-Maps Using TopoJson

This example uses d3.geoPath and d3.geoNaturalEarth1 to render a world map from TopoJSON data loaded from the world-atlas package. Countries appear as golden shapes with green strokes, while a blue sphere layer shows the Earth’s surface. The map is drawn as SVG, with the topojson.feature API converting the TopoJSON topology into GeoJSON features for rendering.

Loading thumbnail…

ICE - 7 Pie Chart_Task2

This pie chart visualizes the gross earnings of top films in USD, with each slice labeled by its value and accompanied by a legend listing film titles and corresponding amounts. The chart is rendered as an SVG using D3 v5, employing the `pie` and `arc` generators to compute slice paths and positions. Data is fetched as CSV from a GitHub gist, and categorical colors are assigned via `scaleOrdinal`. Slice labels are positioned using `arc.centroid`, while legend items are manually appended with rectangles and text elements.

Loading thumbnail…

ICE-7_Area Chart_question_4

This area chart displays the USA population from 2010 to 2022, showing a smooth trend line over time. The visualization uses D3 v5 with SVG rendering, employing `d3.line` and `d3.area` generators with basis curves to create the line and filled area. Axes are constructed using `d3.axisBottom` and `d3.axisLeft`, with linear scales for both population and year values. Data is loaded from a CSV file hosted on GitHub Gist, with the population values formatted using `d3.format`.

Loading thumbnail…

ICE-7_question 3 Line Chart

This line chart visualizes automobile sales in India from 1999 to 2012, with the x-axis mapped to years and the y-axis to electronic sales figures. The chart is rendered as an SVG using D3 v5 within a React framework, employing `scaleTime` for the temporal axis and `scaleLinear` for the sales values. The data is loaded from a GitHub-hosted CSV file and parsed using the `csv` function. The visualization includes labeled axes, gridlines, and a purple title, with a blue line path generated by the `line` generator.

Loading thumbnail…

Fork of Pie Chart

This example shows a pie chart of the populations of the ten most populous countries, with each slice labeled in a side legend. Data is loaded from a CSV file using `d3.csv`, sorted, and sliced before being passed to `d3.pie` and `d3.arc` to generate the SVG segments. The chart uses `d3.scaleOrdinal` with `schemeCategory10` for slice colors and appends legend groups with rectangles and text. Hovering over a slice logs its population value to the console.

Loading thumbnail…

ICE - 7 Pie Chart .

This visualization shows the top 10 countries by deaths from air pollution in 2020 using a pie chart with D3.js (v5) and SVG rendering. The pie chart is divided into colored segments, each labeled with the death count, alongside a legend listing country names and corresponding values. The code fetches data from a CSV file hosted on GitHub, loads it using D3’s `csv` function, and renders the chart with `d3.pie`, `d3.arc`, and `scaleOrdinal` for color assignment. Text labels and legend elements are positioned using D3’s arc centroid calculations, and formatting is handled with `d3.format`.

Loading thumbnail…

ICE - 7 Pie Chart

This visualization shows the top 10 countries by deaths from air pollution in 2020, using a pie chart with color-coded slices and a legend listing each country’s death count in thousands. The chart is rendered in SVG using D3 v5, with data fetched as CSV from a GitHub gist. The pie layout is computed via `d3.pie()`, arcs are drawn with `d3.arc()`, and colors are assigned using `scaleOrdinal`. Each slice displays its value in thousands, while the legend explicitly pairs country names with their corresponding death totals.

Loading thumbnail…

ICE-7_Pie Chart

This pie chart displays the distribution of carbon emissions across different states in the USA, with each slice representing a state’s total emissions in thousand tonnes. The visualization uses D3 v5’s `pie` and `arc` generators to create the SVG segments, while `scaleOrdinal` assigns colors to each state. Legends are positioned manually alongside the chart, and data is loaded asynchronously from a CSV file via a custom `getData` function using D3’s `csv` method.

Loading thumbnail…

Fork of Fork of Fork of ICE7 Pie Chart

This example displays a pie chart of the top ten cricketers by total runs, with each slice sized proportionally to a player’s run count and colored via `d3.schemeCategory10`. A legend lists player names alongside their runs, formatted with `d3.format`. The chart is rendered as SVG using D3 v5, loading data from a JSON file with `d3.json`, and constructing arcs with `d3.arc` and `d3.pie`.

Loading thumbnail…

ICE_7_Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements while coloring each point by species. The chart cycles through four different x-axis variables on a timer, updating the axes and labels dynamically with animated transitions. Built with D3 v6, it uses SVG rendering with custom scales, axes, and legend elements. The code leverages d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.csv to load and process the data, with a reusable scatterPlot function handling the chart structure.

Loading thumbnail…

week 6 Iris Scatter Plot with Color Legend

A scatter plot displays sepal length against petal length for Iris flowers, with each species encoded by color and identified through a legend. D3 v5 loads the data from a CSV file, using scaleLinear for axes and scaleOrdinal with schemeCategory10 for colors. The chart renders as SVG, with styled axis labels and a d3-legend color legend. Axes use tick padding and negative tick sizes to create gridlines.

Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the relationship between petal length and sepal length using the classic Iris dataset. Loaded from a CSV file via `d3.csv`, the chart plots each flower as a circle using `d3.scaleLinear` to map data values to SVG coordinates, with margins applied to the full viewport. The visualization includes `d3.axisLeft` and `d3.axisBottom` for labeled axes, and the SVG rendering is driven by data joins through `selection.join('circle')`. The chart updates responsively to the window size, with points sized at a fixed radius of five pixels.

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal length for individual flowers. Each circle represents one iris, colored by its species to reveal clustering patterns. The D3.js code uses `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color mapping. Axis labels and a color legend are rendered using SVG elements and the d3-legend library’s `legendColor` component.

Loading thumbnail…

Week-6: In Class Exercise: Rendering Marks and Channels with React & D3

This example visualizes carbon dioxide emissions in thousand metric tonnes for the top ten U.S. states during electricity generation in 2019, using a horizontal bar chart rendered with React and SVG. The chart displays state names on the y-axis and emission values on the x-axis, with blue tick lines for the quantitative scale. The code loads CSV data via `d3.csv`, applies a row-parsing function to convert emissions to numbers, and constructs the visualization using `scaleBand`, `scaleLinear`, and `max` from D3 v5. React state management with `useState` and `useEffect` handles data loading, while React components generate the SVG marks and gridlines.

Loading thumbnail…

Ice-5 Data Visualization

A black-and-white schematic drawing of an insect-like form is displayed, with its body and wing outlines rendered as a blurred SVG path. Colored ellipses represent data points or labels across the figure, while small black dots mark other locations. The page loads salary data from a CSV file via `d3.csv` and displays the dataset’s size, row, and column counts in a large `<pre>` element. The visualization is built with React, uses D3 v7 for data handling, and presents the static SVG image alongside the dynamic text output.

Loading thumbnail…

ICE-5 Data Visualisation

This example presents a bare-minimum HTML page that displays a static message, “Hello HTML!”, centered in a large font. The page uses inline CSS for styling and plain JavaScript within the HTML file, with no external libraries or frameworks. The visualization is a simple text-based output, demonstrating how CSS and JavaScript can be combined in a single document. The code does not include React, data processing, or any interactive charts, despite the React Starter reference in the README.

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example renders a yellow emoji-like face with two eyes and an open mouth as an SVG graphic, centered within a fixed 960×500 viewport. Using React’s declarative JSX, it positions the face’s circle and eye elements via computed coordinates, while D3’s `arc` generator creates the mouth path with specified inner and outer radii and angular extents. The code relies on React 17 and D3 v7 loaded from unpkg CDN, and uses a `<g>` transform to translate the entire face to the canvas center.