M

MounishSeeni

@MounishSeeni·18 public vizzes

Loading thumbnail…

ICE_8

This is a force-directed network graph built with D3.js that visualizes connections between seven people across four groups. Nodes are rendered as white circles with thick red borders and blue labels, while links appear as orange lines weighted by an optional numerical value. The graph reads from a JSON file containing node and link definitions, and uses the d3.layout.force API to simulate physical forces, allowing users to click and drag nodes. The SVG canvas is styled with a green background, and the implementation relies on D3 v4 and v2 libraries.

Loading thumbnail…

ICE_8

An interactive SVG tree diagram visualizes a family lineage from Srinivasarao down through multiple generations. The chart uses animated transitions: clicking a node collapses or expands its children, moving nodes along curved diagonal paths. Built with D3.js (version 3.5.17), it employs the `d3.layout.tree` for node positioning and `d3.svg.diagonal` for link paths. Nodes appear as circles with labels, while expanding nodes turn red to indicate collapsed state. The demo displays static sample data embedded in the JavaScript, with all styling defined in embedded CSS.

Loading thumbnail…

ICE_8

This visualization displays a choropleth map of the United States, with each state filled in red and outlined in black, and the interior borders rendered as a mesh. It uses the `geoAlbersUsaTerritories` projection with `d3.geoPath` to draw the SVG paths, while React manages the component state via the `useData` hook. Geographic data is loaded from the us-atlas TopoJSON source, processed with `topojson.feature` and `topojson.mesh`, and includes a hover interaction that changes the state fill color to purple.

Loading thumbnail…

ICE 8

This visualization displays a world map using an equirectangular projection, with countries rendered in red and oceans in blue. The map is drawn as SVG paths generated by `d3.geoPath`, using geographic data from the world-atlas TopoJSON file, converted to GeoJSON via TopoJSON’s `feature` method. Country shapes respond to mouse hover by changing fill color, and the map is framed by a blue sphere outline.

Loading thumbnail…

ICE 8

A world map rendered in red on a blue sphere, with country borders outlined in white, highlights each nation’s shape. Built with D3 v5 and TopoJSON, it uses `d3.geoEquirectangular` for projection and `d3.geoPath` to generate SVG paths from the world-atlas dataset. Hovering a country changes its fill to a darker red, while the base sphere is drawn using a GeoJSON Sphere object, displaying a full global projection.

Loading thumbnail…

ICE 8

This example displays a world map from the world-atlas TopoJSON dataset, rendered as styled SVG paths for each country, with an underlying blue sphere as background. It uses d3.geoEquirectangular for projection and d3.geoPath to generate paths from GeoJSON features extracted with topojson.feature. Hover effects change country fill colors via CSS, while the React framework integrates the D3 code within a margin-aware container component.

Loading thumbnail…

Fork of 2015 Internet Users World Map

A world map of 2015 internet users per country, colored with a green sequential scale from d3.schemeGreens, displays the percentage of internet users in each nation. Hovering over a country reveals its name and usage percentage via a tooltip, and users can zoom and pan using d3.zoom. The visualization uses d3.geoPath with a geoNaturalEarth1 projection and topojson-client to render the world atlas, with data sourced from a Kaggle internet users dataset.

Loading thumbnail…

Line Chart

This example shows a line chart tracking the cost of sales from 2000 to 2013, with time on the x-axis and cost on the y-axis. The visualization uses D3 v5 to load CSV data, apply a time scale via `scaleTime` and a linear scale via `scaleLinear`, and render axes with `axisBottom` and `axisLeft`. A `line` generator creates the path, with gridlines drawn through tick sizing and a red stroke styled in CSS. The SVG output is centered on a fixed 960×500 canvas.

Loading thumbnail…

Untitled

This example shows the cost of sales from 2000 to 2013 as a smooth area chart, with the area filled in red and a black line overlaid on top. The visualization uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `line` and `area` generators with `curveBasis` for smoothing, and renders to an SVG. Data is loaded from a CSV file via `d3.csv`, with year values parsed as dates and costs as numbers, while axis labels and tick formatting are customized using D3’s `axisBottom` and `axisLeft`.

Loading thumbnail…

Untitled

This pie chart visualizes deaths in 2020 attributed to air pollution by country. Each colored slice represents a nation’s death count, with labels showing values in thousands. A legend lists countries alongside their corresponding colors and totals. Built with D3 v5, it uses `d3.pie`, `d3.arc`, and `scaleOrdinal` to generate SVG paths, while data is loaded from a CSV using `d3.csv` and styled via CSS.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Iris dataset, cycling through four flower measurements (petal width, sepal width, petal length, and sepal length) on the x-axis every two seconds while sepal length remains on the y-axis. Built as a reusable chart function, it uses D3 v6 APIs including `csv` for data loading, `scaleLinear` for scales, `axisLeft` and `axisBottom` for axes, and `selectAll` with data joins to update circle positions. The SVG visualization also applies a custom font and full-window sizing.

Loading thumbnail…

Fork of ICE-6(11630234)- Penguin Data set scatter Plot

This visualization is a scatter plot of Palmer Penguin data, showing the relationship between flipper length (x-axis) and body mass (y-axis). Each circle represents a penguin, colored by species: Adelie (yellow), Gentoo (green), and Chinstrap (blue), while the circle’s rx and ry attributes are set to the bill length and depth values, though the visual effect is subtle. Built with D3 v5, the code loads a CSV via `d3.csv`, uses `scaleLinear` for axes, and draws SVG circles with `selectAll` and `join`. Axis labels and a title are added as SVG text elements.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This fork of the Penguin Data set scatter plot visualizes the relationship between flipper length and body mass, with points colored by penguin species. The code also maps culmen length and depth to the `rx` and `ry` circle attributes, though the radius is fixed. It loads CSV data from a GitHub gist, parses numeric fields, and renders SVG circles using D3 v5’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. The visualization updates to fill the window and includes custom axis labels and a title.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This example presents a scatter plot of penguin data, using D3.js version 5 within a React framework. It visualizes the relationship between flipper length and body mass, with additional ellipse-shaped points encoding culmen length and depth through the `rx` and `ry` attributes. The SVG chart uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, styled with cursive fonts and a labeled title. Data is loaded as CSV from a GitHub gist, with numeric fields parsed for the plot.

Loading thumbnail…

Fork of Fork of Penguin Data set scatter Plot

This example visualizes the Palmer Penguins dataset as a scatter plot, mapping flipper length against body mass while coloring each point by species (Adelie, Gentoo, or Chinstrap). The code uses D3 v5’s `csv` loader, `scaleLinear`, `extent`, and axis generators (`axisLeft`, `axisBottom`) within a React-free SVG rendering. Circles are positioned via the scales and include custom `rx` and `ry` attributes derived from culmen measurements, though the visual radius remains fixed. The chart also adds cursive axis labels and a title, with the data fetched from a raw GitHub gist URL.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This example presents a scatter plot of penguin data, visualizing flipper length against body mass. Each point is colored by species (Adelie, Gentoo, or Chinstrap), with additional fields for culmen length and depth stored in the data binding. The visualization uses D3 v5’s `csv` loader, `scaleLinear`, `extent`, and axis generators (`axisLeft`, `axisBottom`) to map the dataset, rendering circles as SVG elements with a fixed radius. The code also adds axis labels and a title styled with custom fonts, all within a React-compatible HTML page.

Loading thumbnail…

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

A horizontal bar chart displays the selling prices of fifteen motorcycle models, using bike details data loaded from a CSV file. Built with React components and D3 scales, the visualization renders SVG rectangles whose lengths encode price, with axes and tick labels generated. D3’s `scaleBand`, `scaleLinear`, and `csv` functions handle data mapping and parsing. React manages the state and lifecycle for loading the dataset.

Loading thumbnail…

ICE5

This page displays the bike information of customers, presenting the dataset's metadata through a simple textual readout. The visualization shows the data file's size in kilobytes, its row count, and column count within a preformatted text container. The example loads a CSV file from a GitHub gist using D3.js version 7.3.0, specifically leveraging the `d3.csv` and `d3.csvFormat` APIs to fetch and analyze the data. A Honda SVG background image is applied via CSS, with the page featuring clickable links to view the underlying bike details dataset.