D

dheeraj1509

@dheeraj1509·20 public vizzes

Loading thumbnail…

Social Network

A force-directed graph displays a social network of six people and five weighted connections, with nodes as orange circles and links as gray lines. Built using D3 v4, the visualization loads node and link data from a local JSON file and uses the `d3.layout.force()` API to simulate physical forces that position the nodes. Dragging is enabled via the force simulation's `drag` method, and each node includes a text label showing the person's name, with link thickness scaled by the `weight` value.

Loading thumbnail…

India map

A choropleth map of India displays districts and states, with district boundaries colored by state and hover states highlighting individual districts. The visualization uses D3.js version 5.16 and d3-geo-projection.v2 to project TopoJSON data for India’s states and districts from GitHub sources. Tooltips reveal district names and their parent states. The map employs the Mercator projection and includes zoom functionality via event handling.

Loading thumbnail…

Plant Kingdom

This interactive tree diagram visualizes the hierarchical classification of the plant kingdom, from major divisions like Cryptogamae and Phanerogamae down to specific groups such as Algae and Dicotyledons. Users can click nodes to expand or collapse branches, with smooth animated transitions updating the layout. Built with D3 version 3.5, the visualization uses the `d3.layout.tree` and `d3.svg.diagonal` APIs to position nodes and draw connecting links. Data is loaded from an external JSON file and rendered as an SVG with animated node and link transitions.

Loading thumbnail…

ICE-8 World Map

This interactive world map lets users explore country boundaries by clicking on them, which switches the projection between Mercator and orthographic views, with the United States triggering a third Albers USA projection. Built with D3 v6 and TopoJSON, the visualization uses d3.geoPath to render country shapes from world-atlas data, while d3.drag and d3.zoom enable rotating the orthographic globe and panning/zooming the map. A graticule overlay and country hover effects are drawn as SVG paths, with transitions animating projection changes.

Loading thumbnail…

ICE 7 Line Chart

This chart shows sample sales data from 2010 to 2022 as a single line, with a time-scaled x-axis for years and a linear y-axis for sales values. The visualization uses D3 v5 to load CSV data, then draws an SVG line path using `d3.line`, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The code imports modules like `scaleTime`, `scaleLinear`, `extent`, and `max` from D3 via a Rollup bundle that outputs to `bundle.js`. The styling applies custom CSS for gridlines, axis labels, and the stroke color of the line path.

Loading thumbnail…

ICE7 Pie Chart

This pie chart displays the top 25 countries with confirmed COVID-19 cases, using a categorical color scale to distinguish each nation. The visualization is rendered as an SVG with a legend listing country names and case counts in thousands. Built with D3 v5, the code uses `d3.pie` and `d3.arc` to generate segments, `d3.scaleOrdinal` for colors, and `d3.csv` to load data from a GitHub gist.

Loading thumbnail…

ICE-7 Area

This area chart visualizes sample sales data from 2010 to 2022, with the x-axis representing years and the y-axis showing sales figures. The chart uses a smooth curve to fill the area beneath the sales trend line, rendering in SVG via D3 v5. It employs `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.area` with `curveBasis` for the filled region, and `d3.axisBottom` and `d3.axisLeft` for labeled ticks. Data is loaded as CSV from a GitHub gist.

Loading thumbnail…

Reusable scatter plot with different symbols

A reusable scatter plot displays the Iris dataset, mapping petal width to the x-axis and sepal length to the y-axis. Different iris species are distinguished using distinct symbols, rendered as SVG paths. The visualization is built with React and D3, leveraging `scaleLinear`, `scaleOrdinal`, `symbols`, and `symbol` to generate and place the glyphs, along with `axisLeft` and `axisBottom` for the axes.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 version 7 setup, where the text “Hello D3 version 7” is rendered in the browser. It uses the `select` method from the D3 library to target the `body` element and set its text content. The page is styled with large, centered text and loads D3 from a CDN, serving as a basic template for starting new visualizations.

Loading thumbnail…

Penguins Dataset Scatter plot

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length on the x-axis and body mass on the y-axis, with each circle colored by species (Adelie, Gentoo, or Chinstrap). The D3.js v5 code loads CSV data via `d3.csv`, parses numeric fields, and uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes. Circles are positioned via `attr` and colored using a custom switch function. Axis labels and a title are added as SVG text elements.

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This example displays a scatter plot of penguin data that cycles through different x-axis attributes every two seconds, showing how the distribution shifts when petal width, sepal width, petal length, or sepal length is plotted against sepal length. Data points are colored by species (setosa, versicolor, virginica) using blue, red, and yellow fills, with white axis labels and strokes. The visualization builds a reusable chart using D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `setInterval` for animation. It loads CSV data from a GitHub gist and renders SVG circles on a black background.

Loading thumbnail…

Fork of Penguins Dataset Scatter plot

This example visualizes the Palmer Penguins dataset as a scatter plot, mapping flipper length to the x-axis and body mass to the y-axis, with each point colored by species (Adelie, Gentoo, or Chinstrap). It uses D3 v6 with `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct the scales and axes, while `selectAll`, `data`, and `join` render SVG circles. The code loads data from a CSV URL via `csv` and attempts to set `rx` and `ry` attributes on circles, though the latter references a non-existent property. The visualization fills the browser window and includes a title text element.

Loading thumbnail…

Penguins Dataset Scatter plot

This scatter plot visualizes the Iris dataset, mapping sepal length against petal length for individual flowers. Each circle represents a data point, and the plot reveals how these measurements cluster by species. The visualization is built with React and D3.js, using `d3.scaleLinear`, `d3.extent`, and `d3.axisBottom`/`d3.axisLeft` for scales and axes. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering uses simple joined circles with a fixed radius of 10 pixels.

Loading thumbnail…

Penguins Dataset Scatter plot

This scatter plot visualizes the Palmer Penguins dataset, showing the relationship between flipper length and body mass for three penguin species, with each species color-coded. The React application uses d3.csv to load data and d3.scaleLinear with d3.extent to map values to screen coordinates. The visualization renders circles as SVG elements with fill-opacity for overlapping points, and includes axes generated using d3.axisLeft and d3.axisBottom within a decoupled React and D3 architecture.

Loading thumbnail…

Penguins Dataset Scatter plot

A scatter plot visualizes the Palmer Penguins dataset, mapping flipper length to body mass for individual penguins. Each circle is colored by species (Adelie, Gentoo, or Chinstrap) and also encodes bill length and depth through its horizontal and vertical radii. Built with React and D3 v6, the example uses `d3.csv` to load data, `scaleLinear` and `extent` for axes, and `axisBottom` for the x-axis. A reusable `VizContainer` component applies the margin convention and renders the SVG.

Loading thumbnail…

Top 25 Countries with confirmed covid cases

This horizontal bar chart ranks the top 25 countries by confirmed COVID-19 cases, using a linear x-scale and band y-scale. It loads CSV data via `d3.csv`, slices the first 25 rows, and renders SVG rectangles with `d3.scaleBand` and `d3.scaleLinear`. Axes are manually drawn using `xScale.ticks()` and `yScale.domain()`, with blue gridlines. Built with React and D3 v6, the visualization uses a fixed 960×500 viewport and margin convention.

Loading thumbnail…

Top 25 Countries with confirmed covid cases

This visualization shows the top 15 countries with the highest number of confirmed COVID-19 cases using horizontal bar charts. The bars represent case counts with a linear scale on the x-axis and country names on the y-axis. The code loads data from a CSV file hosted on GitHub and uses React’s useEffect hook to fetch and parse the data asynchronously. D3’s scaleBand and scaleLinear functions map the data to SVG rectangles, while d3.csv handles the data import. The chart is embedded within a React component that renders the SVG output directly.

Loading thumbnail…

ICE5

This page shows metadata about an electronics sales dataset, summarizing its size, row count, and column count in a text overlay. The visualization loads a CSV file from a GitHub gist using D3 v7’s `d3.csv` method, then computes the file size from the formatted CSV string’s length in kilobytes. It also counts the number of rows and columns from the parsed data, displaying all three metrics in a large red monospace block. A background SVG image and a link to the raw dataset are included as supplementary information.

Loading thumbnail…

Fork of homework smiley face

This smiley face visualization presents a yellow circular face with black stroke outlining, featuring two eyes with green irises and purple pupils, raised eyebrows, and a partial smile rendered as an arc. The face also includes hair-like lines extending from the top of the head. The graphic is built using React components that render SVG elements, with the mouth path generated by d3.arc(). All dimensions, positions, and stroke properties are hardcoded within the React JSX, creating a static, purely decorative illustration without any interactive or animated behavior.

Loading thumbnail…

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

A smiling face is drawn with SVG shapes, with a yellow circle for the head, two eyes, and a mouth formed using the d3.arc path generator. The animated eyebrows, rendered as rectangles, repeatedly transition upward and back down over two-second intervals using D3's transition method. The example demonstrates fundamental DOM selection and manipulation through d3.select, attribute setting, and chained transitions, operating entirely within a 960×500 SVG canvas.