V

Vaishnavi6199

@Vaishnavi6199·41 public vizzes

Loading thumbnail…

Social Network

This example displays a small social network as a force-directed graph, with nodes representing named individuals and lines (links) sized by a numeric weight. It uses the older `d3.layout.force` API from D3 v4 (and also loads D3 v2) to simulate physical motion, making nodes draggable and repositioning linked elements on each tick. Data comes from a local JSON file, and the rendering is done with SVG circles, text labels, and lime-colored line elements, all styled via inline CSS.

Loading thumbnail…

Social Network

This example displays a small social network as a force-directed graph, with nodes representing named individuals and lines (links) sized by a numeric weight. It uses the older `d3.layout.force` API from D3 v4 (and also loads D3 v2) to simulate physical motion, making nodes draggable and repositioning linked elements on each tick. Data comes from a local JSON file, and the rendering is done with SVG circles, text labels, and lime-colored line elements, all styled via inline CSS.

Loading thumbnail…

family tree

This example shows an animated family tree using D3.js v6, with nodes representing family members and lime-green links indicating parent-child relationships. The visualization uses `d3.stratify()` to build the hierarchical structure from a flat data array, then applies `d3.tree()` to compute node positions in a 900x350 layout. SVG elements—circles for nodes and paths for connections—are rendered with transitions that animate the links over 1000 milliseconds and the node radii over 800 milliseconds. The data includes ten named family members, with the root node "Surya" having no parent.

Loading thumbnail…

family tree

This example shows an animated family tree using D3.js v6, with nodes representing family members and lime-green links indicating parent-child relationships. The visualization uses `d3.stratify()` to build the hierarchical structure from a flat data array, then applies `d3.tree()` to compute node positions in a 900x350 layout. SVG elements—circles for nodes and paths for connections—are rendered with transitions that animate the links over 1000 milliseconds and the node radii over 800 milliseconds. The data includes ten named family members, with the root node "Surya" having no parent.

Loading thumbnail…

Fork of ICE - 8 Family Tree Maanas Katta

This visualization presents a family tree using an animated node-link diagram. The tree is built from a flat dataset of parent-child relationships, processed by the `d3.stratify()` and `d3.tree()` utilities, and rendered as SVG circles and paths. Green nodes, representing individuals, connect via lime-colored links that draw themselves over one second, while the node radius animates in. Text labels appear inside each circle using `d3.select('g')` and `transition.attr`, mapping child names to positions derived from the tree layout.

Loading thumbnail…

Country Map

This example displays a single country, the United States of America, as a green SVG path with a black stroke on a blue background. It uses `d3.geoAlbersUsa()` to project the country’s boundaries from the world-atlas TopoJSON dataset. The code fetches the `countries-110m.json` file, filters the GeoJSON features by name, and renders the geometry with `d3.geoPath`. The projection is scaled and translated using the `d3.geoAlbersUsa` API to center the map.

Loading thumbnail…

Country Map

This example displays a single country, the United States of America, as a green SVG path with a black stroke on a blue background. It uses `d3.geoAlbersUsa()` to project the country’s boundaries from the world-atlas TopoJSON dataset. The code fetches the `countries-110m.json` file, filters the GeoJSON features by name, and renders the geometry with `d3.geoPath`. The projection is scaled and translated using the `d3.geoAlbersUsa` API to center the map.

Loading thumbnail…

World Map Vaishnavi

This example displays a green world map rendered as SVG paths on a white background, with each country outlined in black. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the `feature` method from topojson. The map is drawn with `d3.geoPath` and a `geoNaturalEarth1` projection, with countries appended as path elements carrying the class `country`. The visualization uses d3.v5 and demonstrates a straightforward approach to choropleth-free geographic mapping.

Loading thumbnail…

World Map Vaishnavi

This example displays a green world map rendered as SVG paths on a white background, with each country outlined in black. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the `feature` method from topojson. The map is drawn with `d3.geoPath` and a `geoNaturalEarth1` projection, with countries appended as path elements carrying the class `country`. The visualization uses d3.v5 and demonstrates a straightforward approach to choropleth-free geographic mapping.

Loading thumbnail…

ICE-8 world map

This visualization displays a world map using a natural Earth projection, with countries rendered as light green filled paths with subtle dark strokes against a blue sphere background. The map is built with D3 v5’s `geoNaturalEarth1` projection and `geoPath`, drawing geographical features from TopoJSON data loaded via `json()`. Country boundaries are extracted using `topojson.feature` and appended as SVG paths to the document, demonstrating a straightforward choropleth-free geographic rendering.

Loading thumbnail…

ICE-8 world map

This visualization displays a world map using a natural Earth projection, with countries rendered as light green filled paths with subtle dark strokes against a blue sphere background. The map is built with D3 v5’s `geoNaturalEarth1` projection and `geoPath`, drawing geographical features from TopoJSON data loaded via `json()`. Country boundaries are extracted using `topojson.feature` and appended as SVG paths to the document, demonstrating a straightforward choropleth-free geographic rendering.

Loading thumbnail…

ICE-8 world map

This visualization displays a world map using a natural Earth projection, with countries rendered as light green filled paths with subtle dark strokes against a blue sphere background. The map is built with D3 v5’s `geoNaturalEarth1` projection and `geoPath`, drawing geographical features from TopoJSON data loaded via `json()`. Country boundaries are extracted using `topojson.feature` and appended as SVG paths to the document, demonstrating a straightforward choropleth-free geographic rendering.

Loading thumbnail…

ICE 7 Area Chart

This area chart shows motorcycle sales in India from 2012 to 2022, highlighting the trend of sales volume over time. The visualization uses D3.js v5 to render an SVG with both a line path and an area fill beneath it, employing `d3.line`, `d3.area`, and `curveBasis` for smoothing. Data is loaded from a CSV file and parsed with `d3.csv` and `d3.timeParse`, with axes generated via `axisBottom` and `axisLeft`.

Loading thumbnail…

Fork of ICE 7 Area Chart

A combined area and line chart visualizes motorcycle sales in India from 2012 to 2022, with the area fill in orange and a black line tracing the trend. The code uses d3.scaleTime and d3.scaleLinear for axes, d3.area and d3.line with curveBasis for smooth shapes, and d3.axisLeft and d3.axisBottom for gridlines. It loads CSV data from a gist with d3.csv, parses years via d3.timeParse, and renders to SVG.

Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart visualizes sales of cars in India from 2009 to 2019, with a smooth curve showing tax values over time and a filled orange region beneath the line. Built with D3 v5, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, while `d3.line` and `d3.area` generators with `curveBasis` create the smoothed path and fill. Data is loaded from a CSV file and rendered as SVG, with gridlines and labeled axes for year and tax amounts.

Loading thumbnail…

Step 3 Line Chart

This line chart visualizes sales figures from 2011 to 2021, with the x-axis mapping years as dates and the y-axis representing sales values. The chart uses D3 v5's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generator to render an SVG path, with data loaded via `d3.csv` from a GitHub gist. Gridlines are created through axis tick sizing, and a red stroke highlights the trend line.

Loading thumbnail…

Step 3 Line Chart

This line chart visualizes sales figures from 2011 to 2021, with the x-axis mapping years as dates and the y-axis representing sales values. The chart uses D3 v5's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generator to render an SVG path, with data loaded via `d3.csv` from a GitHub gist. Gridlines are created through axis tick sizing, and a red stroke highlights the trend line.

Loading thumbnail…

Fork of Reusable _scatter_Plot

This scatter plot visualizes the Iris dataset, showing the relationship between petal width and sepal length. The code uses d3.scaleOrdinal to color-code data points by species, with a custom legend and axis labels. Animated transitions cycle through different attribute combinations every two seconds using setInterval. Built with D3.js version 6.7.0, the visualization renders as an SVG with reusable scatterPlot components and dynamic window sizing.

Loading thumbnail…

Fork of Reusable _scatter_Plot

This scatter plot visualizes the Iris dataset, showing the relationship between petal width and sepal length. The code uses d3.scaleOrdinal to color-code data points by species, with a custom legend and axis labels. Animated transitions cycle through different attribute combinations every two seconds using setInterval. Built with D3.js version 6.7.0, the visualization renders as an SVG with reusable scatterPlot components and dynamic window sizing.

Loading thumbnail…

Fork of Line Chart

This line chart displays US auto sales from 2005 to 2022, plotting units sold over time. It uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, and d3.axisLeft to render the axes, while d3.line generates the red path. Data loads from a CSV via d3.csv, with dates parsed as Date objects. The visualization appends SVG elements for the title, axes, and line, using margins and tick marks with grid lines for readability.

Loading thumbnail…

ICE 7 Assignment

A donut chart visualizes the total units purchased for each item in a dataset loaded from a CSV file. Each item's slice is labeled with its unit count, and a legend lists the items with color swatches and their corresponding values. The visualization is built with D3 v5, using the `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs to compute arc segments and assign colors, with SVG rendering for the chart and legend.

Loading thumbnail…

Fork of Assignment ICE 7

This pie chart displays the number of units purchased for each item, with values labeled on each slice and a color-coded legend listing items and their corresponding counts. The visualization is built using D3 v5, loading CSV data from a GitHub gist and rendering with SVG. It uses `d3.pie`, `d3.arc`, and `scaleOrdinal` to generate the chart, while the legend is constructed manually with appended rectangles and text elements.

Loading thumbnail…

Assignment ICE 7

This example shows a pie chart of units purchased for each item, with the item names and their values listed in a legend. The chart uses D3 v5 to load CSV data from a GitHub gist and renders SVG paths with d3.pie, d3.arc, and scaleOrdinal. Value labels are placed on each slice using the arc generator's centroid method, and the legend is built manually with appended rectangles and text elements.

Loading thumbnail…

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

This bar chart displays the number of units purchased per person, using the top 10 records from a CSV dataset. The chart is built with React and D3, rendering SVG elements directly. It uses `d3.scaleBand` for the categorical y-axis (person names) and `d3.scaleLinear` for the numeric x-axis (units), with the bar widths mapped to the `Units` field and axis ticks generated from `xScale.ticks()`.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This visualization shows the top 10 countries by deaths from air pollution in 2020, using a pie chart with colored segments and a legend. Each slice displays its death count in thousands, while the legend lists the country names and corresponding values. The chart is built with D3 v5, using `d3.pie` to compute the angular data, `d3.arc` to generate the SVG paths, and `d3.scaleOrdinal` to assign colors from a fixed palette. Data is fetched as CSV from a GitHub gist, and the legend is manually positioned with SVG groups.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This D3.js (v6) scatter plot visualizes the classic Iris Dataset by plotting petal length against sepal length. Points are colored by species—setosa in chartreuse, versicolor in orange, and virginica in blue—with axes labeled and rendered by `axisLeft` and `axisBottom`. The code loads CSV data via `d3.csv`, maps values using `scaleLinear` and `extent`, and draws circles as SVG marks. The chart fills the browser window, with axis labels added as text elements.

Loading thumbnail…

Iris Dataset Scatter Plot

This D3.js scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal length on the y-axis. Each point represents an iris flower, colored by species (setosa in chartreuse, versicolor in orange, and virginica in blue). The code loads data from a CSV file via `d3.csv`, uses `scaleLinear` for axes, and renders circles as SVG elements. Axes are generated with `axisLeft` and `axisBottom`, while text labels for the axes are appended separately.

Loading thumbnail…

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

This visualization shows the number of units or items purchased by each of the top ten sales representatives from a CSV dataset loaded via `d3.csv`. It renders a horizontal bar chart using SVG where bar lengths encode the numeric "Units" values and the vertical axis lists the "Rep" names. Built with React and D3 v5, the app uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and `d3.max` to determine the scale domain, while React manages the state and re-renders the SVG marks.

Loading thumbnail…

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

This chart shows the number of units purchased by each of ten sales representatives as horizontal bars labeled with the representative’s name. The visualization uses React components to render an SVG scene, with D3’s `scaleBand` and `scaleLinear` mapping the categorical and quantitative data to pixel positions. Axis ticks and grid lines are generated manually from D3’s `xScale.ticks()` and `yScale.domain()`, while the data is loaded from a CSV file via `d3.csv`. The example demonstrates integrating React’s state management with D3’s scaling and layout utilities for declarative SVG rendering.

Loading thumbnail…

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

This example shows a horizontal bar chart of the top 10 countries by population in 2019, with country names on the y-axis and population values on the x-axis. The React component uses React hooks to load CSV data via `d3.csv`, then renders SVG marks as `<rect>` elements for bars and `<text>` for axis labels. It leverages `d3.scaleBand` and `d3.scaleLinear` to map data to coordinates, with gridlines and ticks generated manually from the scales. The chart is built entirely with React components and D3 utilities, without a separate visualization library.

Loading thumbnail…

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

A horizontal bar chart displays the top 10 countries by population in 2019, with country names on the y-axis and population values on the x-axis. The visualization uses React for component rendering and d3.scaleBand and d3.scaleLinear to map data to SVG rectangles. Data is loaded asynchronously from a CSV file using d3.csv, and tick marks are manually generated from the x-scale, while y-axis labels use the band scale's domain.

Loading thumbnail…

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

A horizontal bar chart shows the top 10 countries by 2019 population, ranked by number of units or items purchased. The visualization is rendered as an SVG using React with D3, leveraging `d3.csv` for data loading, `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and `d3.max` to determine the domain. Each bar’s length encodes the population value, with axis ticks and labels generated via D3’s scale methods. The code fetches data from a Gist URL and uses React’s `useState` and `useEffect` to manage the asynchronous data loading.

Loading thumbnail…

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

This visualization displays the top 10 most populous countries in 2019 as horizontal bars, with the length of each bar encoding population size. Built using React and D3 v5, the code constructs an SVG bar chart by mapping country names to the y-axis and population values to the x-axis. It loads tabular CSV data from a remote URL, uses `d3.scaleBand` and `d3.scaleLinear` for axis scales, and renders tick marks and labels explicitly without higher-level charting helpers.

Loading thumbnail…

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

This example demonstrates loading and parsing a CSV file with D3.js, displaying the file size, row count, and column count in a styled HTML page. It fetches data from a GitHub Gist URL using `d3.csv`, formats it with `d3.csvFormat` to calculate size in kilobytes, and updates a `<pre>` element with the results. The page also includes a decorative inline SVG image and uses D3 v7 within a React framework. The visualization emphasizes the simplicity of asynchronous data handling in D3.

Loading thumbnail…

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

This example demonstrates loading and parsing CSV data using D3.js, displaying the dataset's size in kilobytes, row count, and column count within a styled HTML page. The visualization includes a rendered SVG house image alongside the text output. The code fetches a remote CSV file via `d3.csv`, then uses `d3.csvFormat` to calculate the data size and accesses `data.length` and `data.columns` for row and column counts. The result is presented in a `<pre>` element, with the SVG and message styled using embedded CSS.

Loading thumbnail…

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

This example demonstrates how to load and parse CSV data using D3.js v7. It displays a summary of the dataset in a pre-formatted text element, showing the file size in kilobytes, row count, and column count. The code uses `d3.csv()` to asynchronously fetch a CSV file from a GitHub gist, then `d3.csvFormat()` and `data.columns` to compute the statistics. The page is styled with CSS and includes a decorative SVG house illustration.

Loading thumbnail…

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

This example demonstrates loading and parsing a CSV file using D3.js. The visualization displays a summary message that includes the data size in kilobytes, row count, and column count. The code uses `d3.csv()` to fetch and parse the remote CSV data from a GitHub gist URL, then calculates the data size using `d3.csvFormat()` and accesses the data's length and `columns` property. The page also embeds an SVG house image and applies CSS styling with violet and skyblue backgrounds for visual emphasis.

Loading thumbnail…

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

This example demonstrates how to load and parse external CSV data using D3.js version 7, displaying summary statistics about the dataset in a styled HTML page. The code fetches a CSV file from a GitHub gist using `d3.csv`, then computes and displays the file size in kilobytes, row count, and column count in a violet-styled `<pre>` element. The page also includes a static SVG house illustration and uses basic CSS for heading and text styling. The visualization focuses on data loading workflow rather than graphical chart rendering.

Loading thumbnail…

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

This example demonstrates how to load and parse CSV data using D3.js version 7 within a React framework, rendering results as SVG. It fetches a remote CSV file via `d3.csv`, then displays the file size in kilobytes, row count, and column count in an HTML `<pre>` element. The page also includes a static SVG illustration. The visualization focuses on the data-loading workflow rather than graphical encoding, with minimal styling applied through inline CSS.

Loading thumbnail…

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

A smiley face drawn with D3.js animates its eyebrows in a repeating up-and-down motion, created by transitioning the group element that contains both eyebrow rectangles. The face is built entirely with SVG shapes, including circles for the eyes and an arc for the mouth, using D3 selections and the `d3.arc` function. The animation runs via chained `transition().duration(2000)` calls, which move the eyebrows up and then back to their original position.

Loading thumbnail…

Fork of Fork of Data_Visualization_YellowFace_PY

A static SVG smiley face uses yellow and black circles for the head, eyes, and outline, with a mouth drawn as a path generated by d3's `arc` function. The code selects the SVG element with `d3.select` and appends a group, then uses `arc()` with specific inner and outer radii and start and end angles to create a partial arc for the mouth. All shapes are hardcoded values, and no data is loaded or manipulated.