Deepa-Murugesan

@Deepa-Murugesan·15 public vizzes

ICE-8 plant classification Tree

This interactive visualization displays a plant classification hierarchy as an animated tree diagram, starting from a PLANT root and branching into categories like NON-SEEDS, SEEDS, and SHRUBS, with leaf nodes such as FERNS, MOSSES, ALGAE, and CONIFERS. Built with D3 v3, it uses a force-directed tree layout (`d3.layout.tree`) to position nodes, with SVG rendering for custom rectangular nodes, links, arrow markers, and tooltips. The code implements zooming and dragging through `d3.behavior.zoom`, animates node updates with transitions, and loads hierarchical data from a JSON file via `d3.json`. Color-coded node types and interactive click-to-expand behavior enhance the exploration of the taxonomic structure.

Mar 30, 2023

Loading thumbnail…

ICE8- social network

A force-directed network graph visualizes a small social network of nine people connected by ten friendship links. The chart uses D3 v6’s `d3.forceSimulation` with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, which are rendered as gold circles with labels. The code loads data from a JSON file, applies drag interaction via `d3.drag`, and renders arrows on edges using SVG markers. Node highlighting occurs on mouse hover, while link thickness reflects a numeric `value` attribute from the data.

Mar 29, 2023

Loading thumbnail…

Fork of Force Network

A force-directed network visualizes the relationships between actors, directors, and films. Actors and directors are color-coded by their professional role, with films as separate nodes. The graph uses a physics simulation with link, charge, and collision forces to position the nodes. Using `d3.forceSimulation` and `d3.forceLink`, the layout is interactive, and users can drag nodes to explore connections. The code loads data from JSON and renders the network as SVG.

Mar 29, 2023

Loading thumbnail…

USA Map

This visualization displays the 50 U.S. states using a SVG map with land areas filled in olive and state borders in white. It uses the `geoAlbersUsaTerritories` projection and `d3.geoPath` to render geographic features from TopoJSON data sourced from the US Atlas. The map is built with React, employing the `useData` hook to asynchronously load and process the topology. Hovering over a state highlights it in orange, demonstrating interactive feedback.

Mar 29, 2023

Loading thumbnail…

ICE-8 World Map

This example displays a simple world map with countries rendered in light gray against an olive-colored ocean sphere. Using D3 v5 and TopoJSON, it loads world-atlas country boundaries and projects them with `geoEquirectangular` and `d3.geoPath`. Hovering over any country changes its fill to pale turquoise. The map is drawn as SVG paths, with the sphere generated from a GeoJSON Sphere object.

Mar 29, 2023

Loading thumbnail…

Fork of Geo Albers with Territories Demo

This demo displays US state boundaries using the custom geoAlbersUsaTerritories projection, which extends the standard Albers USA projection to include US territories. The map renders as an SVG, with state interiors drawn as a mesh and land areas filled in teal. Data comes from the US Atlas TopoJSON file, processed with `feature` and `mesh` from topojson. The code leverages React hooks to load data asynchronously and d3’s `geoPath` and `geoGraticule` to generate the geographic paths.

Mar 29, 2023

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a world map with countries filled in light green against a blue spherical backdrop, rendered as SVG paths using D3.js v5 and TopoJSON. It uses `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to generate country outlines, and fetches geographic data from the World Atlas TopoJSON source (110m resolution). The code appends a sphere path first, then loads and draws country features, with stroke opacity creating thin borders.

Mar 29, 2023

Loading thumbnail…

ICE7-Reusable D3 Scatter Plot

This example visualizes the Iris Dataset with a reusable D3 scatter plot, mapping petal width against sepal length and encoding species using distinct D3 symbols. Built with D3 v6, it uses `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` to generate SVG marks. The chart is fully responsive, sizing to the window, and implements a reusable chart pattern with configurable accessor functions for x, y, and symbol values, plus margin and symbol size settings.

Mar 13, 2023

Loading thumbnail…

ICE7_Area Chart

This area chart displays the total volume of avocados sold per year, with a blue filled region beneath a black curved line. The visualization uses D3 v5 to load CSV data, parse dates with d3.timeParse, and render an SVG. It applies d3.scaleTime and d3.scaleLinear for the axes, with d3.line and d3.area generators using curveBasis for smooth interpolation. Grid lines and rotated axis labels highlight the time series trend.

Mar 13, 2023

Loading thumbnail…

Line Chart ICE-7

A line chart displays average avocado prices over time, with dates on the x-axis and prices on the y-axis, using a red stroke path to highlight trends. The visualization loads CSV data from a GitHub gist, parses date strings and numeric price values, and renders with SVG. It uses D3 v5 functions including `scaleTime`, `scaleLinear`, `line`, `axisLeft`, and `axisBottom` to construct the chart, with axis labels and a title formatted via CSS classes.

Mar 13, 2023

Loading thumbnail…

ICE 7 PIE-CHART

This pie chart visualizes drug satisfaction survey results, with each slice representing a drug and its corresponding satisfaction percentage. The chart uses D3.js v5 to load CSV data from a Gist URL via `d3.csv`, render the pie using `d3.pie` and `d3.arc`, and color segments with `d3.scaleOrdinal`. A legend lists drug names and computed percentages, formatted with `d3.format` to five significant digits. The SVG output is interactive in layout but static in behavior, with all elements positioned explicitly.

Mar 12, 2023

Loading thumbnail…

ICE6-Barchart

This interactive bar chart visualizes the satisfaction ratings for various drugs, scaled to percentages from the United Nations World Population Prospects 2019 dataset. The chart displays the top 10 most populous countries, with horizontal bars representing satisfaction scores, using an SVG rendering approach within a React framework. The visualization leverages D3 v5's `scaleBand` and `scaleLinear` for axis scaling, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) handle the rendering of axes and data bars. Tooltips provide the exact satisfaction value for each drug, and the axis label "Satisfaction" clarifies the metric being measured.

Mar 9, 2023

Loading thumbnail…

ICE6-Penguin Data set scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length against body mass for individual penguins, with each point colored by species (Adelie, Gentoo, and Chinstrap). The visualization uses D3 v5 to load the CSV data, apply linear scales via `scaleLinear` with `extent` for domains, and render SVG circles with species-based color markers. Axes are generated using `axisLeft` and `axisBottom`, with custom labels created via appended text elements. The layout is responsive to the browser window dimensions and renders entirely as SVG.

Mar 9, 2023

Loading thumbnail…

Document

This example displays metadata about a CSV dataset of Oscar-nominated and winning directors, showing the file size, row count, and column count. It retrieves the data from a GitHub-hosted CSV file using the `d3.csv` function, formats the metadata with `d3.csvFormat`, and computes the file size in kilobytes. The information is rendered as text within a `<pre>` element. The page’s styling, including an aqua background and an Oscar statuette image, is defined in a separate CSS file, while the visualization relies on D3 v7 and JavaScript within a basic HTML structure.

Mar 2, 2023

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiley face built from SVG shapes demonstrates basic D3.js DOM manipulation and animation. The code selects an SVG element, appends a group, and constructs the face using circles for eyes and the head, rectangles for eyebrows, and a path generated with the `d3.arc` function for the mouth. A chained `transition().duration()` sequence moves the eyebrow group vertically, creating a bobbing effect. No external data is loaded; the visualization relies solely on hardcoded dimensions and D3’s selection, arc, and transition APIs.

Feb 23, 2023