N

NitheeshSama

@NitheeshSama·22 public vizzes

Loading thumbnail…

Social Network graph

A social network graph displays eight people as orange circles connected by black links, with each person's name labeled beside their node. The network layout is computed using the D3 v4 force simulation (`d3.layout.force`) with gravity, charge, and distance parameters that position nodes dynamically. Data comes from a JSON file (`graph.json`) containing node names and group assignments, plus weighted links between individuals. Users can click and drag any node to rearrange the graph, with link thickness varying according to the weight value of each connection.

Loading thumbnail…

ICE 8 Social Network

A force-directed network graph visualizes a personal social network, with each person as a light blue circle labeled by name and connected by thick black links. It displays the relationships among friends from a JSON dataset loaded via `d3.json`. The layout uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while SVG circles and text elements render the final result, with positions updated on each simulation tick.

Loading thumbnail…

ICE8_family_tree

This interactive family tree visualization displays hierarchical relationships using a branching node-and-link layout, with each person represented as a circle and their descendants connected by curved paths. The tree expands smoothly when new nodes are introduced, with transitions animating nodes to their final positions. Built with D3.js version 3.5, it uses `d3.layout.tree`, `d3.svg.diagonal`, and CSS-styled SVG elements, with node colors and names coming from the embedded JavaScript dataset.

Loading thumbnail…

ICE8_CountryMap

This visualization displays a map of the United States, with each state filled in light green and state boundaries highlighted in teal. It uses the `geoAlbersUsaTerritories` projection from the `geo-albers-usa-territories` library to render the land and interiors. The map is built with React and D3 v5, utilizing `geoPath` and `geoGraticule` from d3, and TopoJSON’s `feature` and `mesh` functions to process geographic data from the US Atlas states-10m JSON file. The SVG output is styled via CSS, with a loading message shown until the data is fetched.

Loading thumbnail…

ICE8_Worldmap

This example presents a world map visualization using a natural Earth projection. The map displays countries as distinct filled regions with black outlines against a vibrant purple background, with landmasses rendered in green. The code utilizes D3 v5’s `geoNaturalEarth1` and `geoPath` for geographic projection and path generation, alongside TopoJSON’s `feature` function to extract country boundaries from the world-atlas dataset. The visualization is built within a React framework, rendering to an SVG element, and incorporates CSS styling for the map’s color scheme.

Loading thumbnail…

Canada Map

This example presents a choropleth-style map of Canada’s provinces, rendered as orange SVG paths with white strokes on a blue background. It uses `d3.json` to load the `provinces-10m.json` TopoJSON dataset from the `canada-atlas` package, then converts it to GeoJSON via `topojson.feature`. The `d3.geoPath` generator applies a `d3.geoMercator` projection with a scale of 1500 to draw each province boundary, with styling handled through static attributes.

Loading thumbnail…

Nitheesh ICE 7: Line Chart

This visualization displays the changing US population in millions over time as a line chart. Built with D3 v5, the code uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to generate an SVG plot with a blue line, grid lines, and axis labels. Data is loaded from a CSV file via D3’s `csv` function, then mapped with `Date` objects and numerical population values for rendering.

Loading thumbnail…

Nitheesh_ICE7_PieChart

This pie chart visualizes the death counts from air pollution for the top 10 countries in 2017, using a custom color for each segment. The chart is rendered as SVG via D3 v5, where the `d3.pie` function computes the arc data and `d3.arc` generates the path geometry. A legend to the right maps each country to its color and displays the death count in thousands, formatted with `d3.format`. Data is loaded asynchronously from a CSV file using `d3.csv`.

Loading thumbnail…

Fork of PieChart of EV_Cars_ICE7

This pie chart visualizes the top speeds of various EV car brands from a CSV dataset. Each slice represents a brand, colored via a d3.scaleOrdinal, with the corresponding speed in KmH shown beside each brand in the legend. The chart uses d3.pie and d3.arc to generate SVG paths, and positions the legend and chart group using SVG transform attributes. Data is loaded asynchronously with d3.csv.

Loading thumbnail…

NiteeshSama ICE-7: Reusable D3 Scatter Plot

This example presents a reusable scatter plot of the Iris dataset, cycling through different x-axis variables (petal width, sepal width, petal length, sepal length) every second. Built with D3 v6 and the reusable chart pattern from Mike Bostock, it renders SVG symbols scaled by sepal width and petal length, colored by species. The visualization uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisLeft`, `d3.axisBottom`, and `d3.symbol` to generate marks, with axes and data updated via a `setInterval` loop.

Loading thumbnail…

Nitheesh_ICE 7:Area Chart

This area chart displays US population in millions over time, using a smooth curve to emphasize trends and an aqua-filled region beneath the line to highlight magnitude. The visualization is built with D3 v5, importing `scaleTime`, `scaleLinear`, `line`, `area`, and `curveBasis` to generate the SVG paths. Data is loaded from a CSV file hosted on GitHub, parsed with `csv`, and rendered with custom axes, tick marks, and labels. The chart uses a time-based x-axis and linear y-axis, with population values formatted using `format`.

Loading thumbnail…

Nitheesh_ICE7 line chart

This example presents a line chart tracking the population of Hyderabad from 1990 to 1999. The visualization uses a blue, smoothed line to connect yearly population data points, with green axis labels and tick marks. Built with React and D3 v7, the chart renders as an SVG. It uses D3’s `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for the path, and fetches data from a CSV file. Historical population data is loaded asynchronously via D3’s `csv` function.

Loading thumbnail…

Reusable D3 Scatter Plot-ICE7

This example shows an animated scatter plot of the Iris dataset, cycling through four different x-axis variables (petal width, sepal width, petal length, and sepal length) every 1.5 seconds while keeping sepal length as the y-axis. It uses D3 v6 with the reusable `scatterPlot` module, which employs `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` to render SVG circles and axes. Species are color-coded via an ordinal scale, and a legend is drawn manually. The data is loaded from a GitHub gist CSV using `d3.csv`, with `setInterval` triggering the axis transitions.

Loading thumbnail…

Fork of ICE - 7 - Reusable Scatter Plot

This example presents a reusable scatter plot of the Iris dataset, visualizing relationships between sepal and petal dimensions. Each point is colored by species (setosa, versicolor, virginica) and uses a distinct symbol shape via d3.symbol and scaleOrdinal. The plot cycles through different X-axis variables every five seconds using setInterval, re-calling the scatterPlot function. Built with d3.scaleLinear, axisLeft, and axisBottom, the visualization renders as animated SVG paths and includes an on-page legend.

Loading thumbnail…

ICE6_Nitheesh-Sama-scatterplot

This scatter plot visualizes penguin measurements from a CSV dataset, mapping flipper length to body mass while coloring points by species (Adelie, Chinstrap, and Gentoo). The code uses D3 v5 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale axes, and render tick marks. SVG circles are positioned using the `join` operation, with custom font styling for axis labels and a rotated y-axis title.

Loading thumbnail…

ICE6_Nitheesh-Sama-scatterplot

This scatter plot visualizes penguin data, showing flipper length on the x-axis and body mass on the y-axis, with each point colored by species (Adelie, Chinstrap, or Gentoo). The code loads a CSV from a GitHub gist and uses d3.csv, d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to map the data and render axes. Circles are drawn via SVG selection joins, with margins and labels styled using CSS and inline attributes. The visualization is built with D3 v5 within a React-free HTML page.

Loading thumbnail…

Fork of ICE6-Nitheesh-Sama-bargraph

This bar chart shows the salary of employees across different ages, displaying the top 15 ages in the dataset. The visualization uses React with hooks to manage state, and D3 v5’s `csv` loader to fetch and parse the data from a GitHub gist. Scales are created with `scaleBand` for the y-axis and `scaleLinear` for the x-axis, while axes are rendered manually using `ticks`. The chart is drawn as SVG elements, with blue grid lines and horizontal bars.

Loading thumbnail…

Fork of Fork of ICE6-Nitheesh-Sama-bargraph

This interactive bar chart visualizes the salary of employees across different ages, using data from a CSV file hosted on GitHub. The visualization is built with React and D3 v5, rendering SVG elements. It employs D3's `scaleBand` and `scaleLinear` to map age and salary values to the chart's axes, while axis ticks and labels are generated manually. The chart displays horizontal bars, with a blue gridline for each salary tick, and the data is limited to the first 15 records from the source.

Loading thumbnail…

Fork of ICE6-Nitheesh-Sama-bargraph

This bar chart shows the salary of employees across different ages, displaying the top 15 ages in the dataset. The visualization uses React with hooks to manage state, and D3 v5’s `csv` loader to fetch and parse the data from a GitHub gist. Scales are created with `scaleBand` for the y-axis and `scaleLinear` for the x-axis, while axes are rendered manually using `ticks`. The chart is drawn as SVG elements, with blue grid lines and horizontal bars.

Loading thumbnail…

ICE6-Nitheesh-Sama

This example displays a horizontal bar chart of employee salaries across different ages, using data from a CSV file loaded via `d3.csv`. The visualization renders as an SVG, with `d3.scaleBand` positioning the age categories on the y-axis and `d3.scaleLinear` mapping salary values to bar widths on the x-axis. React manages the state and lifecycle, fetching the data and slicing it to the first 15 records. Gridlines and tick labels are generated programmatically using D3’s scale methods, while the bars themselves are drawn as SVG `<rect>` elements.

Loading thumbnail…

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

This horizontal bar chart displays salary data for employees at different ages, using bars whose lengths encode salary values and y-axis positions encode age. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` to map data to SVG rectangle marks, with custom axis ticks rendered via D3’s `axisLeft`, `axisBottom`, and `scaleLinear` methods. It loads CSV data from a GitHub gist, filtering the first 15 rows, and renders entirely as SVG within a React component, with loading state managed via React hooks.

Loading thumbnail…

niteesh_dv6

This bar chart displays greenhouse gas emissions in 2019 for the top 11 GDP countries, using horizontal bars sorted by population. It loads data from a CSV file and renders with d3.v7, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom`/`axisLeft` for ticks. Interactive tooltips appear on mouseover via d3 event handlers, and bars change fill color through a custom `shadeColor` function. The visualization uses SVG with animated hover effects.