Pujitha14challagulla

@Pujitha14challagulla·45 public vizzes

Fork of Fork of Fork of Force Network

This D3 v6 force-directed network chart maps the connections between Tom Hanks, directors, and films from data.json. It uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while `d3.drag` enables interactive dragging. Nodes are colored by group, with link relationship labels attempted via text on lines; arrow markers are defined but currently render behind nodes. The SVG rendering shows a cream background with 23 nodes and 29 links.

Jul 9, 2022

Loading thumbnail…

Fork of ice8

This interactive tree diagram displays a family hierarchy loaded from a JSON file, with nodes labeled by names and connected by curved links. Users can click any node to collapse or expand its subtree, with smooth 1.1-second transitions animating nodes and links to new positions. The visualization uses D3.js v3’s `d3.layout.tree` for layout and `d3.svg.diagonal` for link paths, rendered as SVG with green-bordered circles and bold text labels. Node expansion state is managed by toggling between `children` and `_children` arrays.

Jul 9, 2022

Loading thumbnail…

ice8

This interactive tree diagram visualizes a family hierarchy, starting with a root node and branching through named individuals. The graph shows parent-child relationships, with nodes that can be clicked to expand or collapse their descendants. Built with D3.js, the visualization uses a `d3.layout.tree` for positioning and `d3.svg.diagonal` for the connecting links. Data is loaded from an external JSON file, and the animated transitions between states are handled through D3’s `.transition().duration()` method.

Jul 9, 2022

Loading thumbnail…

Fork of india map

This choropleth map displays India’s districts and states, colored by district name via a categorical scale. It uses d3.geoPath and d3.geoMercator to project TopoJSON boundaries from GitHub sources, with district and state paths rendered as SVG. Pan and zoom interactions are enabled using d3.zoom, applying a transform to the grouped geometry.

Jul 9, 2022

Loading thumbnail…

india map

This visualization shows India’s administrative boundaries with district-level polygons filled by state using a categorical color scale, overlaid with state outlines. Pan and zoom are enabled via d3.zoom. The map uses d3.geoMercator projection and d3.geoPath to render TopoJSON data from two external sources: state boundaries and district boundaries. District polygons include hover effects and tooltips displaying district and state names via SVG title elements.

Jul 9, 2022

Loading thumbnail…

Fork of ice8

This interactive map of world countries allows the user to switch between an orthographic projection and a Mercator projection by clicking on individual nations. The visualization also supports dragging to rotate the orthographic view and zooming, all rendered as SVG paths. The code uses the `d3.geoPath` and `d3.geoOrthographic` APIs from the D3-geo-projection library, and it loads country boundaries from a TopoJSON file alongside a TSV file containing country names. Dynamic rotation and zoom are handled through the `d3.drag` and `d3.zoom` interactions.

Jul 9, 2022

Loading thumbnail…

ice8

This interactive world map visualization displays country boundaries over a graticule, with smooth rotation and zoom controls. Users can drag to reorient the orthographic projection, scroll to zoom, and click countries to switch between Mercator and orthographic views. The code uses `d3.geoPath`, `d3.geoOrthographic`, and `d3.geoMercator` projections, with TopoJSON data from world-atlas and country names from a TSV file. The visualization renders in SVG with animated transitions, graticule overlays, and hover highlighting. Drag interactions rotate the projection using `projection.rotate`, while zoom transforms affect the entire SVG group.

Jul 9, 2022

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example displays a 3D bar chart of car manufacturer sales data for the first six months of the year, with each manufacturer’s monthly values rendered as a series of bars. It uses the d3-x3d library to generate the 3D scene, along with d3.v5 for data loading and parsing via `d3.csv`, and x3dom for rendering the X3D content in the browser. The code defines a `barChartMultiSeries` chart component, attaches it to a chart holder div, and populates it with data from a remote CSV file. The bars are positioned along categorical and temporal axes, with height encoding the numeric value.

Jul 5, 2022

Loading thumbnail…

Fork of bonus ice

This example presents a 3D scatter plot of the abbreviatus dataset, using Plotly’s `Plotly.newPlot` to render flower measurements. Two traces show different variable combinations: the first plots calyx length, calyx width, and corolla length in `scatter3d` style, while the second overlays calyx length, calyx width, and corolla width as `scatter3d` markers. Data is loaded via `d3.csv` from a GitHub gist, with marker styles customized through Plotly’s `marker` options for size, opacity, and color. The layout uses zero margins to focus on the plotted points.

Jul 5, 2022

Loading thumbnail…

bonus ice

This example shows a 3D scatter plot of the abbreviatus dataset, comparing calyx length, calyx width, and two corolla measurements. It uses Plotly’s `scatter3d` and `scatter2d` trace types to render points as markers with varying colors and opacity, loaded via `d3.csv` from a GitHub gist. The visualization is embedded in a React app using the Plotly.js CDN, with margins set to zero for a minimal layout.

Jul 5, 2022

Loading thumbnail…

Fork of Fork of 3D Scatter Plot with Iris Dataset

This example visualizes the Iris dataset as a 3D scatter plot, mapping sepal length, sepal width, and petal length for one trace, and petal width for another. The visualization uses Plotly’s `scatter3d` and `scatter2d` trace types, rendered inside a `myDiv` element via `Plotly.newPlot`. Data is loaded asynchronously from a GitHub-hosted CSV file using `d3.csv`, while marker styles, colors, and opacity are configured through Plotly’s marker properties. The layout removes all margins to maximize the plot area.

Jul 5, 2022

Loading thumbnail…

Fork of bonus ice

This visualization presents a 3D cube field where each cube's height encodes a data value, rendered with SVG and animated transitions. The cubes originate from a CSV dataset of population figures, though the primary visual focus is the interactive perspective. Users can drag to rotate the entire scene, adjusting the beta and alpha rotation angles via d3.drag. The code leverages d3._3d(), a custom plugin, to generate and sort cube faces, while d3.randomUniform determines cube heights. A text label on each cube animates its numeric value using transition.tween and d3.interpolateNumber, creating a dynamic, exploratory 3D bar chart experience.

Jul 5, 2022

Loading thumbnail…

bonus ice

A grid of 3D cubes rises and falls over a flat plane, each cube’s height representing a numerical value from a static dataset. Users drag the scene to rotate it in three dimensions, revealing the bars from any angle. The visualization uses d3-3d to project cube vertices into two-dimensional SVG paths, with d3.scaleOrdinal assigning colors. Each cube displays its height as a tweened text label on its top face. The rendering is SVG, with animations driven by D3 transitions during rotation.

Jul 5, 2022

Loading thumbnail…

Fork of 3D Bar Plot AISHWARYA-M

This example presents an interactive 3D bar plot where bars are visualized as cubes arranged on a grid, with heights corresponding to a random uniform distribution between -2 and -7. The visualization uses the d3-3d library alongside D3 v4 to render the cube geometry and manage 3D transformations. Users can drag to rotate the entire scene, adjusting the rotation angles for both the X and Y axes in real time. The chart includes color-coded cubes with darker strokes, text labels displaying the height values on top of each cube, and smooth transitions when the data is initially processed.

Jul 5, 2022

Loading thumbnail…

Fork of ICE7

A scatterplot displays flower yield measurements across three sites (StPaul, Duluth, Morris), with points colored orange, blue, or white by site. The animation cycles the x-axis variable among four yield columns every second using `setInterval`. Built with D3 v6, the visualization uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while SVG circles represent data points. The code loads CSV data via `d3.csv` from a GitHub gist and includes a manually drawn legend and rotating axis label.

Jul 2, 2022

Loading thumbnail…

ICE7

This animated scatterplot displays flower measurements across three sites (StPaul, Duluth, and Morris), with each point colored by site and styled as an ellipse based on additional yield dimensions. The visualization cycles through four yield variables on the x-axis using `setInterval`, while the y-axis remains fixed on yield1. Built with D3 v6, the code uses `scaleLinear`, `axisLeft`, `axisBottom`, and SVG circles with custom `rx`/`ry` attributes. Data comes from a CSV loaded via `d3.csv`, and the pink background with white text creates the distinctive styling.

Jul 2, 2022

Loading thumbnail…

Fork of D3 Update Pattern –Punchcard Example V5

This interactive punchcard chart uses D3 v5 to visualize barley crop yields across multiple Minnesota sites over two years. Users select a site from a dropdown menu, triggering animated transitions of circles positioned by year and barley genotype, with circle radius scaled by yield value. The chart displays SVG axes and marks, and the code uses D3's `nest()`, `map()`, `dispatch`, `scalePoint`, `scaleSqrt`, and `axisBottom` for data aggregation and rendering.

Jul 1, 2022

Loading thumbnail…

Fork of Fork of Fork of ICE 7 Reusable D3 Scatter Plot

This visualization presents the classic Iris dataset as an animated scatter plot, mapping flower measurements (petal width, sepal length, etc.) to Cartesian coordinates. The SVG rendering is built with the d3 library, using a custom `scatterPlot()` function that leverages `scaleLinear`, `scaleOrdinal`, and `symbol()` to draw distinct species markers. Every 15 seconds, the plot cycles its x-axis through the dataset’s numeric columns, dynamically re-scaling the axes. This reusable chart demonstrates how to create a flexible D3 module with setters and getters, allowing for interactive data exploration.

Jul 1, 2022

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE 7 Reusable D3 Scatter Plot

This fork of a reusable scatter plot visualizes the Iris dataset, showing species as different symbols on axes that cycle through the dataset's four numeric columns every 15 seconds. Built with D3.js, it uses `scaleLinear` for axes, `scaleOrdinal` for symbol mapping, and `axisLeft`/`axisBottom` for ticks. The chart's reusable structure, defined via a `scatterPlot` function with configurable accessors, animates by repeatedly calling the plot with a new `xValue` inside `setInterval`.

Jul 1, 2022

Loading thumbnail…

Fork of Fork of ice7

This area chart displays the opening bid prices for January 2021, using a purple semi-transparent fill beneath a green curved line to emphasize price trends over time. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` for the date axis and `scaleLinear` for price, while smoothing the path with `curveBasis`. Axis labels appear in orange, and gridlines are drawn in blue. The data is loaded from an external CSV file and formatted for the y-axis using `format('.5s')`.

Jul 1, 2022

Loading thumbnail…

Fork of ice7

This area chart displays the opening bid price for each day in January 2021, derived from a CSV file hosted on GitHub. The visualization uses D3 v5, leveraging `scaleTime` and `scaleLinear` for the axes, `line` and `area` generators with `curveBasis` for the smoothed trajectory and shaded region, plus `axisBottom` and `axisLeft` for the grid and labels. The SVG output includes a purple translucent area and a green line, with axis ticks and labels styled via CSS.

Jul 1, 2022

Loading thumbnail…

ice7

This graphic displays the opening bid price of EURUSD across the months of 2021, using a combined line and area chart. The visualization employs D3.js v5 with an SVG rendering approach. It uses `scaleTime` and `scaleLinear` to map dates and prices, while `axisBottom` and `axisLeft` create labeled axes. The data is loaded from a CSV file via `csv`, and the chart is drawn using `line` and `area` generators with a `curveBasis` smoothing effect.

Jul 1, 2022

Loading thumbnail…

Fork of Fork of Fork of ICE 7 Line Chart

A line chart shows annual sales of cars in India from 2009 to 2019, with a single line tracking sales volume over time. The visualization uses d3.scaleTime and d3.scaleLinear to map year and sales values, while d3.axisBottom and d3.axisLeft generate gridlines and tick labels. The line is drawn with d3.line and rendered as an SVG path, with data loaded from a CSV via d3.csv. Axis labels and tick styling are applied through external CSS classes.

Jul 1, 2022

Loading thumbnail…

ice7

This line chart shows the sales of cars in India from 2009 to 2019, with time on the x-axis and sales figures on the y-axis. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleTime` and `d3.scaleLinear` to map the temporal and numeric data. It reads CSV data from a GitHub gist, parses the year with `d3.timeParse`, and draws the trend line using `d3.line`. The chart includes labeled axes and styled grid lines, with a bold blue line highlighting the sales trend over the decade.

Jul 1, 2022

Loading thumbnail…

Fork of Fork of ICE 7 Line Chart

This example visualizes car sales in India from 2009 to 2019 using a line chart rendered with D3 v5 and SVG. The chart plots annual sales data on a time-scaled x-axis and a linear y-axis, with grid lines and axis labels for clarity. The code uses `d3.csv` to load the dataset, `d3.scaleTime` and `d3.scaleLinear` for scaling, `d3.line` to generate the path, and `d3.axisBottom` and `d3.axisLeft` to render axes.

Jul 1, 2022

Loading thumbnail…

Fork of ICE 7 Line Chart

This line chart shows the sales of cars in India from 2009 to 2019, with the x-axis representing time (parsed from date strings using `d3.timeParse`) and the y-axis representing sales volume. The chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, rendered as SVG with `d3.axisBottom` and `d3.axisLeft`, and the line is generated via `d3.line`. Data is loaded from a CSV file using `d3.csv`. Grid lines are styled via CSS classes.

Jul 1, 2022

Loading thumbnail…

Fork of Fork of ICE - 7

A pie chart shows the top 10 countries by deaths from air pollution in 2020, with each slice labeled by death count in thousands and accompanied by a legend listing country names and values. The chart is rendered as SVG using D3 v5, with data loaded from a CSV via `d3.csv`. Slices are generated with `d3.pie` and `d3.arc`, colored by `d3.scaleOrdinal`, and labels are placed using arc centroid calculations. The legend and labels use D3 selections and `d3.format` for number formatting.

Jun 30, 2022

Loading thumbnail…

Fork of ICE - 7

This donut chart visualizes the top 10 countries by deaths in 2020 due to air pollution, with each slice labeled with its value in thousands. The chart uses a D3 pie layout (`d3.pie`) and `d3.arc` to generate the segments, while a legend maps slice colors to country names. The data is fetched from a CSV file and rendered as an SVG, with colors assigned via `d3.scaleOrdinal`.

Jun 30, 2022

Loading thumbnail…

Fork of Fork of ICE - 7

Jun 30, 2022

Loading thumbnail…

Fork of ICE - 7

This pie chart visualizes the top 10 countries by deaths from air pollution in 2020, with each slice sized by the number of deaths and labeled with a shortened value (e.g., “123.4K”). The chart is built using D3 v5, using the `pie` layout to compute arc segments, `arc` to generate the sector paths, and `scaleOrdinal` to assign a fixed color palette to the countries. A legend on the right maps each color to its country and corresponding death count. The data is fetched from a CSV via the `csv` function, and the SVG canvas is rendered with the chart centered at (250, 250) with a 250-pixel outer radius.

Jun 30, 2022

Loading thumbnail…

Fork of ICE7

This pie chart displays the top 10 car-producing countries in 2019, with each slice sized by total production value and labeled in a legend showing country names and quantities in thousands. The visualization uses D3 v5’s `pie()` and `arc()` generators to compute and draw the SVG paths, with `scaleOrdinal()` assigning a distinct color to each segment. Data is loaded asynchronously from a CSV hosted on GitHub Gist via `d3.csv`, and the legend is manually constructed with appended circles and text elements, with values formatted using `format()`.

Jun 30, 2022

Loading thumbnail…

ICE7

This example shows a pie chart of the top 10 car-producing countries by 2019 total value. It uses D3 v5 within an SVG rendering. The code loads a CSV via `d3.csv`, converts values to numbers, and applies the `d3.pie` layout with `d3.arc` segments. Colors are assigned through `d3.scaleOrdinal` with a custom palette. Legends display each country name and its formatted value using `d3.format`.

Jun 30, 2022

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE 7 Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, displaying petal width against sepal length using distinct D3 symbols for each species. The visualization, built with a reusable D3 v6 chart module, employs scales, axes, and ordinal symbol mapping via `d3.scaleOrdinal`. Every 15 seconds, the x-axis automatically cycles through different measurement columns, animating the data points to new positions while maintaining the species-based symbol encoding. The SVG rendering includes dynamic axis updates and custom typography from the Share Tech font.

Jun 30, 2022

Loading thumbnail…

Fork of Fork of ICE 7 Reusable D3 Scatter Plot

This visualization presents the Iris Dataset as an animated scatter plot, cycling through different variable pairings on the x-axis every 15 seconds while the y-axis remains fixed on sepal length. It uses D3 v6 modules including `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft`, rendering SVG paths with custom symbols via the `symbol` generator to distinguish species. The chart is built as a reusable function following the Towards Reusable Charts pattern, with axes and marks updating dynamically through `selection.join` and interval-driven re-calls.

Jun 30, 2022

Loading thumbnail…

Fork of Fork of Data Visualization- Scatter Plot with Iris DataSet

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements via dropdown menus for the x and y axes. Circles are colored by species, with petal length and width shown on the default axes. The visualization is built with React, D3 v6, and SVG, using `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` for scales and axes, with data loaded from a CSV URL.

Jun 25, 2022

Loading thumbnail…

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

This example visualizes the top 10 countries by 2019 population using a horizontal bar chart rendered with React and D3 v5. It shows population values as bar lengths on an SVG canvas, with country names on the y-axis and numeric ticks on the x-axis. The code loads CSV data via `d3.csv`, then uses `scaleBand` and `scaleLinear` to map countries and populations to pixel coordinates. Gridlines and axis labels are manually generated using `xScale.ticks()`, while bars are drawn as SVG `<rect>` elements. The visualization updates reactively via React's `useState` and `useEffect` hooks.

Jun 25, 2022

Loading thumbnail…

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

This example shows the ten most populous countries based on 2019 data, rendered as a horizontal bar chart with steel-blue rectangles. The visualization uses React’s `useState` and `useEffect` hooks to load and filter CSV data via `d3.csv`, then applies `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. Tick marks and labels are generated manually with SVG elements, while axes are drawn using the D3 `scale` API without helper functions. The chart updates reactively as data loads, with a loading message displayed initially.

Jun 25, 2022

Loading thumbnail…

Fork of Data Visualization- Scatter Plot with Iris DataSet

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two of the four flower measurements (sepal length/width, petal length/width) via dropdown menus. The visualization uses D3 v6 within a React framework, rendering SVG circles colored by species (setosa, versicolor, virginica). The code leverages d3.scaleLinear, d3.extent, d3.axisBottom, and d3.axisLeft to construct axes, while the dropdown menus update the chart dynamically by re-scaling and re-plotting the data points. Data is loaded from a CSV file.

Jun 25, 2022

Loading thumbnail…

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

This example displays a horizontal bar chart of the ten most populous countries, ranking them by their 2019 population figures. The visualization uses React hooks to fetch and manage CSV data via `d3.csv`, while rendering rectangles and axes as SVG elements. D3’s `scaleBand` and `scaleLinear` map country names and population values, with custom tick marks drawn through explicit loops rather than axis components. The code imports `axisLeft` and `axisBottom` but does not use them, instead manually positioning labels and lines for a lightweight, instructional implementation.

Jun 25, 2022

Loading thumbnail…

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

This interactive visualization demonstrates parsing and rendering CSV data within a React application using D3.js. It displays an image and a data message in a styled HTML container. The SVG output is generated using D3’s v7 library, incorporating drawing primitives like paths, circles, and ellipses. The code defines SVG patterns and scales an embedded base64-encoded JPEG image, which is referenced within the SVG’s `<defs>` section, while the webgl rendering is present in the metadata but not directly visible in the source.

Jun 22, 2022

Loading thumbnail…

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

This example displays a page that loads a CSV file from a GitHub gist, then calculates and displays the file size, row count, and column count. The data is fetched using D3.js v7’s `d3.csv` method, and the string summary is rendered in a styled `<pre>` element. The page also includes a decorative SVG image. The visualization is built with React and relies on D3’s CSV parsing and formatting APIs to summarize the dataset.

Jun 22, 2022

Loading thumbnail…

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

Jun 18, 2022

Loading thumbnail…

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

This example demonstrates how to load and parse a CSV data file using D3.js, displaying the file’s size, row count, and column count in a large text block on a web page. The code uses the `d3.csv` method to fetch data from a GitHub Gist URL, then formats the data with `d3.csvFormat` to calculate its size. The page also includes an inline SVG image and applies simple CSS styling, with the visualization rendered in an HTML pre element. The approach is minimal, focusing on data loading and basic metadata reporting rather than complex charting.

Jun 18, 2022

Loading thumbnail…

Fork of Fork of Smiley Face Part III

A smiling face rendered with SVG circles and an arc path, assembled with React and D3. The face uses a pink circle with a red stroke for the head, two black circles for eyes, and a curved path generated with D3's `arc()` generator for the mouth. The React component defines the layout with fixed coordinates and renders the SVG directly.

Jun 17, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a smiley face drawn as a static SVG graphic using React and D3. It renders a pink circle with a red stroke for the face, two dark eye circles positioned symmetrically, and a mouth created with a D3 arc path generator. The code uses React to define the SVG elements and d3.arc to compute the mouth’s curved path, with dimensions and offsets set as constants. All shapes are rendered directly in SVG within a React component, demonstrating a simple integration of React and D3 for declarative visualization.

Jun 17, 2022