T

tejaswikalluri05

@tejaswikalluri05·16 public vizzes

Loading thumbnail…

Untitled

A force-directed network diagram visualizes a graph of ten named nodes connected by red links. The visualization uses `d3.forceSimulation` with a link force, a many-body charge force set to -1300, and a center force to position the nodes. Each node is rendered as a white circle with a red stroke, labeled with its name and placed using the simulation's `ticked` event. The graph loads its data from a `flare.json` file containing node and link definitions.

Loading thumbnail…

Fork of Family Tree

A family tree for three generations is depicted, where each node is a colored circle representing a family member, and the connecting lines show parent-child relationships. The visualization uses a static dataset of ten family members and renders the hierarchy with D3 v6, employing the `d3.stratify()` function to build the hierarchy from link data and `d3.tree()` to calculate node positions. The SVG output animates the growth of the connecting paths and the appearance of the circles, with node colors (`#ff00ff`, `#00ff00`, `#ffa500`) distinguishing generations.

Loading thumbnail…

Fork of USA Country Map

This example displays a choropleth-style map of the 50 US states, rendered as an SVG where each state boundary is drawn using D3’s `geoPath` and a custom `geoAlbersUsaTerritories` projection. The map initially fills each state with a teal color, and hovering over a state highlights it in magenta. Data is loaded asynchronously from the US Atlas TopoJSON file (`states-10m.json`) using React hooks (`useState`, `useEffect`) and processed with TopoJSON’s `feature` and `mesh` functions to generate land and interior borders. The visualization is built with React 16 and D3 v5, with styling defined in an external CSS file.

Loading thumbnail…

Fork of World Map with D3.js!

This example displays a world map using an equirectangular projection, with countries rendered as lime-green SVG paths with dark outlines and a teal sphere background. Built with D3.js v5 and TopoJSON, it loads country boundaries from a world-atlas JSON dataset and uses `d3.geoPath` with `geoEquirectangular` to generate the geographic shapes. Hovering over a country highlights it in a light beige color via a CSS `:hover` rule.

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This example visualizes population data from 1997 to 2005 using a combined line and area chart. It renders the population trend as a smooth curve (via `curveBasis`) with a yellow filled area beneath it, while labeled axes show year and population values. The code uses D3 v5 APIs including `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` generators. Data is loaded from a CSV file and rendered as SVG, with axis ticks formatted using D3’s `format` function.

Loading thumbnail…

Fork of Line Chart

This visualization displays population trends across various cities from 1997 to 2005 using a green line chart. It loads CSV data from a GitHub gist, parses the year and population fields, and renders them through D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs. The SVG chart includes labeled axes, gridlines, and a title, with margins framing the plot area.

Loading thumbnail…

Fork of Fork of Line Chart

This line chart displays annual US cancer cases from 2009 to 2022, using a red stroke to emphasize the trend over time. The visualization is built with D3 v5, using `d3.scaleTime` and `d3.scaleLinear` for the axes, and `d3.line` to generate the path. Data is loaded from a GitHub Gist CSV. The chart includes labeled axes and a title, with grid lines provided by the axis ticks.

Loading thumbnail…

Fork of Fork of Pie Chart

This visualization displays city population data as a pie chart, with each slice colored distinctly and accompanied by a legend showing city names and population counts. Built with D3 v5 and rendered as SVG, it uses `d3.pie` and `d3.arc` to compute and draw the pie segments, while `d3.scaleOrdinal` assigns colors. Data is loaded from a CSV file via a gist URL using `d3.csv`, and the chart positions the pie with a fixed translation and labels with custom text elements.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Iris Dataset, cycling through different floral measurements every two seconds. The visualization uses D3 v6 to render SVG circles, with a reusable chart module (`scatterPlot`) that updates scales and axes dynamically. Data is loaded via `d3.csv` from a GitHub Gist, and species are color-coded using `d3.scaleOrdinal`. Explicit `setInterval` calls re-invoke the chart with new x-value columns, while axes are redrawn with `d3.axisLeft` and `d3.axisBottom`.

Loading thumbnail…

Fork of Data Visualization- Scatter Plot with Iris DataSet

This visualization displays the Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis. Each circle represents an iris flower, colored by species (blue for setosa, yellow for versicolor, green for virginica) using D3 v6 APIs including `csv`, `scaleLinear`, `extent`, and `axisBottom`. The SVG renders circles with a fixed radius, while sepal measurements are bound but not visually encoded. Data is loaded from a GitHub gist via CSV, with axes labeled and styled via CSS.

Loading thumbnail…

Rendering Marks and Channels with React & D3

This visualization displays a horizontal bar chart of extinct animal races, ranking the top 20 countries by a numeric count. The bars are rendered as SVG rectangles using React, with the chart constructed through D3's `scaleBand` and `scaleLinear` functions to map data to positions. The code loads CSV data from a GitHub gist, then uses D3's `csv` parser and React's `useState`/`useEffect` hooks to manage the data loading and rendering lifecycle. Axis ticks and labels are manually created as SVG elements within a translated group.

Loading thumbnail…

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

A horizontal bar chart displays population estimates for twenty countries, rendered as SVG rectangles scaled by population value. The chart uses D3's `scaleBand` for the categorical country labels on the vertical axis and `scaleLinear` for the quantitative population axis. The React component fetches CSV data from a remote URL via `d3.csv`, stores it in state, and uses React's `useEffect` to trigger the asynchronous load. Axis ticks and labels are generated using D3's scale methods, with gridlines and text elements constructed as React SVG components.

Loading thumbnail…

Teju Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis. Each flower is rendered as a circle using SVG. The code loads the data from a CSV file via `d3.csv`, parses numeric fields, and scales the axes with `d3.scaleLinear` and `d3.extent`. It draws the marks with `selectAll` and `join`, then adds axes using `d3.axisLeft` and `d3.axisBottom`. The visualization fills the browser window and uses a minimal margin-based layout.

Loading thumbnail…

Fork of Teju ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse a CSV dataset using D3.js version 7. The page displays a header message and a pre-formatted text block that counts the data's size in kilobytes, number of rows, and number of columns. The visualization uses the `d3.csv` API to fetch a remote CSV file from a GitHub gist, then processes the parsed data to calculate and present these summary statistics. The page also embeds an external SVG image depicting a virus, and uses minimal CSS styling for typography and background colors.

Loading thumbnail…

Teju ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse CSV data using D3.js v7, displaying a summary of the dataset's size, row count, and column count in a styled HTML page. The code fetches a remote CSV file from a gist URL using `d3.csv`, then formats and calculates the data size with `d3.csvFormat`. The visualization also includes an inline SVG city illustration, with the summary text rendered in a `<pre>` element using standard DOM manipulation. The page uses minimal CSS for typography and background styling.

Loading thumbnail…

Fork of Let's make a face: part 3 tweaks

This example displays a stylized smiley face built with SVG, featuring a gradient-filled head, khaki eyes, and a curved mouth. The face is centered on a canvas and constructed using React components, while D3’s `arc` API generates the mouth’s path geometry. SVG gradients are defined for the face and outline, and the code uses ReactDOM to render the composition directly into the page.