A

AnanyaSamala

@AnanyaSamala·34 public vizzes

Loading thumbnail…

Fork of Simulated COVID maps in the US and Canada

This interactive map uses D3.js v5 to simulate COVID-19 case counts across the United States and Canada. It plots scaled circles on a stereographic projection, with population data for counties and census divisions from 2016/2019 sources. Users can toggle between proportional and classed circle scaling, and switch subdivision granularity between states/provinces and counties/census divisions. The visualization draws GeoJSON boundaries and centroids via d3.geoPath, with circle radii determined by either d3.scaleSqrt or d3.scaleThreshold.

Loading thumbnail…

ICE8 - Network Graph

This network graph visualizes relationships between eight people, with nodes representing individuals and links showing connections between them. The graph uses physics-based force-directed layout through `d3.forceSimulation`, combining forces from `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position nodes. Interactive dragging is enabled via `d3.drag`, allowing users to manually reposition nodes. The SVG rendering includes arrow markers on links via the `defs` element, and node hover effects are implemented with CSS classes. Data comes from a JSON file containing node names and link relationships.

Loading thumbnail…

ICE-8 Family Tree

This interactive family tree visualization displays generational relationships using a collapsible hierarchy. The D3 v3 tree layout positions colored nodes by family type, with light green for grandparents, grey for parents’ siblings, blue for siblings/cousins, and pink for the next generation. Clicking nodes collapses or expands branches with animated transitions, while SVG arrows and light steelblue links trace connections. Tooltips provide additional relationship details when hovering. The code uses `d3.layout.tree`, `transition().duration()`, and `foreignObject` for wrapped text labels, loading data from a local JSON file.

Loading thumbnail…

Fork of ICE-8 Family Tree

This interactive family tree uses D3.js version 3 to render hierarchical data from a JSON file as a collapsible layout. SVG rectangles represent family members, colored by generation, with HTML foreignObject labels showing names and relations. Clicking a node triggers a transition that expands or collapses its children, while tooltips and arrow markers highlight connections. The layout dynamically adjusts its width and height based on tree depth and breadth, using D3’s tree layout and transition methods for smooth animations.

Loading thumbnail…

Fork of Fork of ICE-8 Family Tree

A family tree visualization renders hierarchical relationships as an interactive node-link diagram, with each family member displayed in a color-coded box with text for name, node type, and relation. Built with D3 v3, the layout uses `d3.layout.tree` to position nodes, and SVG rectangles and `foreignObject` elements render the node content, while links are drawn as paths with arrow markers. Clicking a node toggles its children’s visibility, and transitions animate nodes to new positions over 600 milliseconds. Data comes from a JSON structure containing nested family members, with tooltips providing additional details on hover.

Loading thumbnail…

ICE8 - USA Map

This example shows a map of the United States with state boundaries, rendered as SVG paths colored pink, a light green sphere backdrop, and grey interior borders. It loads TopoJSON data from the us-atlas package and projects it using d3.geoAlbers with d3.geoPath. The React component uses d3.json to fetch data and topojson.feature and topojson.mesh to extract land and interior boundaries. A graticule is generated via d3.geoGraticule but is not explicitly rendered in the output.

Loading thumbnail…

Fork of Fork of ICE-8 Family Tree

A family tree visualization renders hierarchical relationships as an interactive node-link diagram, with each family member displayed in a color-coded box with text for name, node type, and relation. Built with D3 v3, the layout uses `d3.layout.tree` to position nodes, and SVG rectangles and `foreignObject` elements render the node content, while links are drawn as paths with arrow markers. Clicking a node toggles its children’s visibility, and transitions animate nodes to new positions over 600 milliseconds. Data comes from a JSON structure containing nested family members, with tooltips providing additional details on hover.

Loading thumbnail…

ICE8 - World Map

This example renders a world map using D3.js. It displays countries as pink shapes with black outlines, set against a light green sphere, using a natural Earth projection. The map is built with `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate SVG path data, while the `topojson` library’s `feature` function converts GeoJSON country boundaries from the world-atlas dataset for rendering.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, cycling through four attribute pairings every two seconds to reveal different relationships between sepal and petal measurements. Built with D3 v6, it uses d3.scaleLinear for axes, d3.scaleOrdinal for species color coding, and d3.axisLeft/axisBottom for ticks. SVG circles are rendered with CSS transitions, while a legend identifies the three iris species. The implementation follows the reusable chart pattern, with the scatterPlot function accepting configurable accessors for x, y, and radius values.

Loading thumbnail…

Fork of Fork of ICE-BONUS_SCATTERPLOT_IRIS

This interactive 3D scatterplot visualizes the Iris dataset, mapping sepal length, petal width, and petal length along three axes with points colored by species. The visualization renders as an SVG scene using D3 v4 with the d3-3d plugin, which projects 3D data onto a 2D plane, and includes a rotatable grid and y-axis scale. Users can drag to rotate the plot, with the rotation handled via D3's drag behavior and the d3-3d rotation methods, while points are drawn as circles updated through D3 transitions. The underlying data is loaded from a CSV file containing 150 iris flower measurements.

Loading thumbnail…

Fork of Fork of Fork of ICE-BONUS_SCATTERPLOT_IRIS

This example presents the classic Iris dataset as an interactive 3D scatterplot, where each flower is colored by species. The visualization uses D3.js v4 with the d3-3d plugin to project points onto a 2D SVG canvas, allowing users to drag and rotate the plot. The scene also includes a grid floor and labeled axes, and the code loads data from the included `iris.csv` file.

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example visualizes the market value of a company as a 3D bar chart, with each manufacturer’s series spanning the years 2011 through 2021. The chart renders in a browser using D3.js v5 alongside the d3-3d and d3-x3d libraries, which bridge D3’s data handling with X3DOM for interactive 3D scenes. Data is loaded asynchronously from a remote CSV file via `d3.csv`, parsed with a custom row function, and then passed to the `barChartMultiSeries` component. The visualization is a fork of an earlier example, adapted for a React-based environment.

Loading thumbnail…

Fork of Fork of ICE-BONUS_SCATTERPLOT_IRIS

This interactive 3D scatterplot visualizes the Iris dataset, mapping sepal length, petal width, and petal length along three axes with points colored by species. The visualization renders as an SVG scene using D3 v4 with the d3-3d plugin, which projects 3D data onto a 2D plane, and includes a rotatable grid and y-axis scale. Users can drag to rotate the plot, with the rotation handled via D3's drag behavior and the d3-3d rotation methods, while points are drawn as circles updated through D3 transitions. The underlying data is loaded from a CSV file containing 150 iris flower measurements.

Loading thumbnail…

Market Value of Line chart

This visualization shows the market value per year as a smooth line chart, with the y-axis formatted in compact scientific notation to display large monetary values. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `line`, and `curveBasis` to generate the curved line, while `axisBottom` and `axisLeft` render the axes with gridlines. Data is loaded from a CSV file via `d3.csv`, with year values parsed using `d3.timeParse`. An area chart generator is present in the code but remains commented out.

Loading thumbnail…

Fork of Fork of ICE-7 Area Chart

This visualization displays the market value of mobile devices over time, using a smoothed area chart to emphasize the overall trend. The chart plots years on the x-axis and market value on the y-axis, with the area beneath the curve filled in gray. The visualization is built using D3 v5 within a React framework, utilizing `scaleTime`, `scaleLinear`, `line`, and `area` APIs with `curveBasis` for smoothing. The SVG rendering uses `axisBottom` and `axisLeft` for the axes, and the data is loaded from a CSV file containing yearly market value figures.

Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart visualizes the market value of car sales in India from 2009 to 2019, with the line and filled area showing the trend over time. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` with a `curveBasis` smoothing function. Data is loaded from a CSV file and parsed with `csv` and `timeParse`, while the SVG rendering includes gridlines and axis labels. The chart is generated with linear and time scales, and the area fill uses an orange color to highlight the values.

Loading thumbnail…

Fork of Fork of ICE-7 Area Chart

This area chart displays market value over time across quarterly cost data, with a black curved line and labeled axes for quarter and market value. The visualization uses D3 v5 within a React framework, employing d3.scaleTime, d3.area, and d3.line with curveBasis to create a smooth path. The SVG renders data parsed from a CSV source, with d3-axis ticks showing gridlines and bold axis labels.

Loading thumbnail…

Fork of ICE 7question 3 Line Chart

This line chart visualizes automobile sales in India from 1999 to 2012, plotting quarterly data for a competitor against time. The SVG rendering uses d3.scaleTime and d3.scaleLinear to map quarter and sales values, with d3.axisBottom and d3.axisLeft creating labeled axes with gridlines. Data loads from a CSV via d3.csv, and the line path is generated using d3.line. The chart highlights sales trends with a styled blue stroke and includes a purple title.

Loading thumbnail…

Fork of Fork of ICE-7 Area Chart

This example shows a flexible line and area chart of student work over time, using D3 v5 within a React framework. It renders an SVG with smoothed, basis-curved paths to visualize the trend. The code scales time and linear axes using `scaleTime` and `scaleLinear`, and constructs the visual elements with `area` and `line` generators. Data is fetched from a CSV file hosted on GitHub, with date parsing handled by `d3.timeParse`.

Loading thumbnail…

Fork of Line_chart_facebook_users

This chart shows the study time of individual students against their assigned study works. The line plot uses a time-based x-axis and a linear y-axis, with labels for each axis. The visualization is built with D3 v5, using its `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft` and `line` generators, and renders as an SVG. Data is loaded from a GitHub gist via `d3.csv`.

Loading thumbnail…

Fork of Line Chart

This visualization displays a line chart of store sales versus profit, with profit on the x-axis (treated as time) and sales on the y-axis. The line path is drawn in red using d3.line, while d3.scaleTime and d3.scaleLinear handle the axes, which are rendered with axisBottom and axisLeft. The SVG is 960 by 500 pixels, and the data is loaded as CSV from a GitHub gist, with the chart titled "Storesales profit."

Loading thumbnail…

ICE7-Reusable storesales

This interactive scatterplot animates sales and profit data from a storesales CSV dataset, cycling through four axis configurations via `setInterval`. The visualization uses D3 v6 APIs including `scatterPlot`, `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` for data loading, with SVG rendering. Data points are colored by category—Furniture, Office Supplies, and Technology—using hardcoded color markers, while a legend and rotating axis labels update dynamically. The reusable scatterplot module accepts configurable accessors for x/y values, margins, and radius, demonstrating a modular approach to animated data exploration.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot cycles through four Iris flower measurements on the x-axis while keeping sepal length on the y-axis, with each species colored distinctly (orange, blue, black). Using d3.csv to load the store sales dataset, the visualization employs d3.scaleLinear for axes and d3.axisBottom/axisLeft for ticks. A setInterval timer updates the x-axis value every few seconds, re-rendering the chart. The code also manually draws legend circles and text labels, with a custom scatterPlot module handling the reusable chart structure.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart visualizes the top 10 countries by deaths in 2020 attributed to air pollution, with each slice sized by the Time value and labeled in thousands. A legend on the right maps slice colors to countries and their corresponding death counts. The visualization uses d3.pie and d3.arc to generate the donut-shaped segments and section labels via arc.centroid, while d3.scaleOrdinal assigns categorical colors. Data is loaded asynchronously from a CSV file using d3.csv, and the SVG canvas is manipulated directly with d3 selections, with text formatting applied via d3.format.

Loading thumbnail…

Fork of Pie Chart ICE-7

This pie chart visualizes monthly expenditures, with each slice labeled by a spending category and its numeric value. The chart is rendered as an SVG using D3 v5, with the `d3.pie()` and `d3.arc()` functions generating the segments and their centroids. Data is loaded asynchronously from a CSV file via `d3.csv()`, and a legend lists each category with its corresponding dollar amount. Slice colors are assigned using `d3.scaleOrdinal` with a predefined array of color names.

Loading thumbnail…

Fork of Pie Chart ICE-7

This example visualizes monthly expenditures from a CSV file as a pie chart. The chart displays categories as colored slices, with each slice labeled by its associated data value, and includes a legend that maps the colors to their numeric values. The visualization is built using D3 version 5, specifically leveraging `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for the pie geometry, arc paths, and color mapping. Data is fetched asynchronously via `d3.csv` from a GitHub gist URL, and the SVG canvas is rendered with a fixed width and height.

Loading thumbnail…

Student_education_Piechart

This pie chart visualizes student education levels and their associated math scores, using colored slices to represent each category. The chart is built with D3 v5 and rendered as an SVG, with the `pie()` and `arc()` generators creating the segments and the `scaleOrdinal` mapping colors to data. A legend on the right displays each education level alongside its corresponding math score. Data is loaded from a CSV file via a GitHub gist, and the code includes a video tutorial link in the README.

Loading thumbnail…

Iris Dataset Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length and width to the x- and y-axes while coloring each point by species (setosa, versicolor, or virginica) using orange, green, and purple. The SVG rendering is built with D3 v6, using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct scales and axes. Data is loaded asynchronously via `d3.csv`, with numeric fields parsed on input, and the chart includes custom axis labels and a title.

Loading thumbnail…

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

A bar chart displays average salary against country for the first 20 rows of a CSV dataset, using horizontal rectangles to encode the quantitative salary values. The visualization is built with React and D3 v5, rendering SVG marks. The code uses `scaleBand` for the categorical country axis, `scaleLinear` for the numeric salary axis, and maps the loaded CSV data into `rect` elements.

Loading thumbnail…

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

This example shows a horizontal bar chart of the top ten countries with the highest mental health issues, using the Remote Work attribute for the categorical axis and Age as the quantitative variable. Built with React and D3 v5, the visualization renders to SVG and loads its CSV data from a remote gist. The code uses `scaleBand` and `scaleLinear` to map data to coordinates, while custom tick marks and axis labels are generated from these scales to present the chart.

Loading thumbnail…

Fork of Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse a CSV file using D3.js version 7, displaying the dataset’s size, row count, and column count on a webpage. It uses `d3.csv()` to fetch a remote mental health dataset, calculates the file size in kilobytes with `d3.csvFormat()`, and renders the summary alongside a decorative SVG image. The page is built with HTML and CSS, featuring a styled table and a centered layout with a light blue background.

Loading thumbnail…

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

This example displays metadata about a CSV dataset loaded from a remote URL, showing the file size in kilobytes, row count, and column count in a large text element. The code uses D3.js version 7’s `d3.csv` method to fetch and parse the data, then `d3.csvFormat` to calculate its length. A static SVG image of a city skyline is rendered alongside the text, with CSS styling applied to the heading and output preformatted block.

Loading thumbnail…

An Excited face

A smiley face is rendered as a static SVG graphic, with a pink circular head, white eyes with blue-outlined black pupils, a red nose, green-outlined mouth, and multi-colored lines for eyebrows and hair. The face conveys an excited expression through its raised brow lines and open mouth shape. Built with React and D3 v7, the visualization uses D3's `arc` generator to create the mouth path and SVG primitives like `circle`, `ellipse`, and `line` for all other features. All elements are positioned relative to the center using SVG transforms.

Loading thumbnail…

Fork of Smiley Face Part IV

Built with React and D3 v5, this SVG visualization demonstrates a modular smiley face constructed from primitive shapes. The `BackgroundCircle` component renders a yellow circle with a black stroke, while eye circles and a mouth path are positioned using relative coordinates. D3's `arc` generator creates the crescent mouth with specified inner and outer radii and angular extents. The React component `<App />` mounts to the DOM via `ReactDOM.render`, showcasing how React manages declarative SVG elements alongside D3's geometry utilities.