B

bhargavarathod

@bhargavarathod·87 public vizzes

Loading thumbnail…

papa - Social Network Graph

This interactive social network graph visualizes friendship connections between eight individuals, with nodes representing people and directed edges showing relationships. The visualization employs a D3.js force-directed layout using `d3.forceSimulation` with link, charge, collision, and center forces. Each circular node is rendered in SVG with its label displayed, and users can drag nodes to reposition them. Hovering highlights nodes with a green stroke via CSS classes. The data comes from a JSON file containing node identifiers and link relationship values, with results drawn as SVG elements updated on each simulation tick.

Loading thumbnail…

Bhargava - Social Network Graph

This example shows a social network graph of eight people linked by friendship, rendered in an SVG with large, light-blue circular nodes. The network data is loaded from `network.json`, and a force-directed layout computed with `d3.forceSimulation`, `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` positions the nodes. Links are drawn as thick red lines with arrowhead markers. Interactive dragging via `d3.drag` lets viewers reposition nodes, and hovering highlights the cursor over a node with a green border.

Loading thumbnail…

Fork of ICE8 - Social Network Graph

This network graph visualizes a personal social network, showing relationships between eight individuals as red, arrowed links connecting large, light-blue circular nodes. Node labels are displayed within each circle. The graph is constructed using a `d3.forceSimulation` engine with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to determine node positions, and nodes are rendered as SVG circles. The visualization is interactive, allowing users to drag nodes, with hover effects highlighting the selected circle.

Loading thumbnail…

papa- Family tree

This visualization displays a family tree using a hierarchical layout, with each person represented as a colored circle and connected by curved green paths. The color of each circle indicates the generation depth, from orange for the root ancestor to violet and slateblue for descendants. The code uses d3.stratify to structure the flat parent-child data, d3.tree to compute the layout, and SVG circle, path, and text elements to render the nodes, links, and names. The React framework hosts the D3 v5 visualization.

Loading thumbnail…

bhargava- Family tree

This family tree visualization uses a node-link diagram to display three generations of a family, with circles representing individuals and curved paths connecting parents to children. The tree layout is computed using the `d3.stratify()` and `d3.tree()` APIs from D3 v5, with circle colors determined by each node's depth in the hierarchy (red for roots, blue for middle generation, green for leaves). The data is hardcoded in the script, and the SVG rendering includes text labels for each person's name.

Loading thumbnail…

bhargava-World Map using Mercator Projection

This example displays a world map using the Mercator projection, with country boundaries rendered as white shapes against a blue ocean background. The visualization loads geographic data from a GitHub gist and uses D3 v5’s `geoMercator` and `geoPath` functions to project and draw the countries. TopoJSON’s `feature` method converts the source data into GeoJSON for rendering. The map is centered and scaled within an SVG element, with countries stroked in black for clear separation.

Loading thumbnail…

papa Africa map

This example displays a map of Africa rendered with an AzimuthalEqualArea projection, highlighting the continent’s countries in blue with white borders. The visualization loads geographic data from a GitHub gist and uses D3 v4’s `d3.geoPath` and `d3.geoMercator` to project and draw the SVG paths. Additionally, it incorporates the `d3-geo-projection` library, though the active projection is Mercator. The map is centered within an SVG container, with a title indicating the intended projection.

Loading thumbnail…

bhargava-Africa Country map

This example displays a choropleth map of African countries, with each country filled in green and outlined in white on a powder-blue background. The map uses the `d3.geoAzimuthalEqualArea` projection, scaled and translated to center the continent within an 800x400 SVG. Country boundaries are drawn via `d3.geoPath` from GeoJSON data loaded from a GitHub gist. The visualization is built with D3 v4, included via CDN, and styled using CSS for the country paths and title.

Loading thumbnail…

Fork of ICE-8: Family Tree

This example visualizes a family tree using a hierarchical layout, with nodes representing individuals and links showing parent-child relationships. Rectangular nodes with names animate into position, and connecting paths draw from parent to child. The visualization is rendered as SVG using D3 v6, employing `d3.stratify()` to structure the flat data and `d3.tree()` to compute positions. Transitions animate the paths and text, with staggered delays based on node depth.

Loading thumbnail…

bhargava family tree

This example renders a static HTML page that displays a large, centered message reading “Hello HTML!” using CSS for styling. The code defines a `message` class with a font size of 13 em and text alignment, applied to a single `div` element. It does not include any interactive visualization, data loading, or JavaScript logic beyond the basic HTML structure, nor does it reference React or any specific data-visualization libraries. The page is a minimal demonstration of CSS and HTML, not a family tree or chart.

Loading thumbnail…

papa world map using geoEquirectangular

This example displays a world map using the geoEquirectangular projection, with countries rendered as white shapes outlined in black against a light blue background. The visualization loads geographic data from a TopoJSON file hosted via CDN, then uses d3.geoPath and d3.geoEquirectangular to project and draw the map onto an SVG canvas. A sphere path is also added to outline the globe’s boundary. The code relies on D3 v5 and TopoJSON’s feature method to convert the data into GeoJSON for rendering.

Loading thumbnail…

Africa Country map

This example displays a map of African countries rendered as an SVG using D3.js. It loads geographic data from a remote GeoJSON file and draws each country as a path with the `d3.geoPath` and `d3.geoMercator` projection. The map includes a spherical outline and country boundaries, with a simple blue background and white fill for landmasses. The code relies on D3 v4, topojson’s `feature` method, and a fixed SVG canvas.

Loading thumbnail…

Fork of Country map using d3.js

This visualization displays a map of African countries with administrative subdivisions, rendered as a static SVG graphic. The map uses a green fill for state regions with black stroke outlines, set against a pink sphere background. The code loads GeoJSON data from a GitHub gist and processes it using topojson’s `feature` API, while d3.geoMercator projection and d3.geoPath generate the geographic paths. The rendering approach relies on SVG path elements appended dynamically via d3’s data join, with styling defined in CSS classes.

Loading thumbnail…

Fork of Fork of US states map : with colorScale. One color for each country

This example displays a choropleth-style map of African states, rendered as green SVG paths with white strokes on a dark background. It loads GeoJSON data from a GitHub gist, converts it into geographic features using `topojson.feature`, and projects the shapes with `d3.geoAlbersUsa` and `d3.geoPath`. Each state path includes a `<title>` element showing the region’s name from the data’s properties. The implementation relies on D3 v5 for selection, data loading, and path generation, while the map’s styling is defined in an external stylesheet.

Loading thumbnail…

Fork of ICE 8 Jerline country map

This map of African states uses a geographic projection to render land features and interior boundaries as SVG paths. Built with React and D3 v5, the visualization loads TopoJSON data from a GitHub gist and applies the geoAlbersUsaTerritories projection via d3.geoPath. Land areas are filled with a purple hue while internal borders appear as red strokes, and the map displays a loading state until the data is fetched. The code relies on topojson’s feature and mesh functions to extract geometries for rendering.

Loading thumbnail…

Fork of Swedish map

A choropleth-style map of Swedish counties displays land divisions with teal region fills and lighter stroke boundaries, while shared interior borders are highlighted in a contrasting mint color. The visualization uses a React component with D3 v5, specifically `d3.geoMercator` for projection and `d3.geoPath` to render geographic features from TopoJSON data. The map is fitted to a 960×500 SVG viewport using `projection.fitExtent`, and the data source is a remote JSON file containing Swedish administrative geographies.

Loading thumbnail…

Fork of Portland Map

This example displays neighborhood boundaries of Portland, Oregon, with each area rendered as a filled SVG path. The map uses a conic equal-area projection configured with a specific center and scale to focus on the city. Data comes from a TopoJSON file of PortlandNeighborhoods, converted to GeoJSON using the `feature` method from topojson. The React app loads the data asynchronously and renders the paths with the `geoPath` generator, applying a teal stroke and fill from the stylesheet.

Loading thumbnail…

Fork of Country map

This map of the United States renders all states and territories using an Albers projection, with landmasses filled in sky blue and interior borders drawn in teal. The visualization uses the geo-albers-usa-territories projection and d3.geoPath to convert TopoJSON features into SVG paths. Geographic data is loaded from the us-atlas package, while React’s useState and useEffect hooks manage the asynchronous data fetching and component rendering.

Loading thumbnail…

World Map using Mercator Projection

This example displays a world map using the Mercator projection, rendered as SVG paths with countries filled in white on a blue ocean background. It loads GeoJSON country boundaries from a gist and uses `d3.geoMercator` for projection, `d3.geoPath` to generate the paths, and `topojson.feature` to convert TopoJSON data. A sphere outline is drawn first, and country paths are appended dynamically from the fetched dataset.

Loading thumbnail…

Fork of Network Graph

This example shows a small network of six named nodes connected by weighted links, displayed as an SVG force-directed graph. The visualization uses D3 v4 with the legacy `d3.layout.force` API to simulate physical forces that position nodes and draw straight lines between them. Node labels and circles are rendered via SVG groups, with link stroke widths scaled by the square root of the link weight, and the data is loaded from a local `data.json` file.

Loading thumbnail…

Fork of ICE8 - Swedish Country Map

A choropleth-free geographic map of Swedish counties displays land area in yellow with blue interior boundaries and a light blue sphere background, rendered as SVG paths. The visualization uses React for component structure, d3.geoMercator with fitExtent for projection, and d3.geoPath to draw features and interiors from TopoJSON data loaded via d3.json. County borders are emphasized through a mesh computed with topojson.mesh, distinguishing shared boundaries from external edges.

Loading thumbnail…

Fork of ICE8 - Family Tree

This visualization displays a family tree as an interactive, collapsible hierarchy. Using the D3.js library (v3), it renders nodes as colored rectangles representing family members, connected by curved links, with tooltips and zoom/pan support. The tree layout is computed via `d3.layout.tree`, and the data is loaded from a JSON file containing nested family relationships. SVG elements and a zoom behavior enable animation and navigation, with node colors indicating generational types.

Loading thumbnail…

Fork of ICE8 - USA Map

This example displays a stylized map of the United States, showing state boundaries and graticules over a colored sphere. The visualization uses React with D3 v5 to fetch TopoJSON data from the us-atlas package, converting it to map features via the `d3.feature` and `topojson.mesh` APIs. It renders land masses in teal, interiors in blue, and graticule lines in gray using SVG paths generated by `d3.geoPath` and the `geoAlbers` projection.

Loading thumbnail…

Fork of ICE8 - World Map

This example shows a simple world map with countries rendered in light green on a blue spherical background. It uses the Natural Earth projection and loads country boundaries from the world-atlas TopoJSON dataset. The visualization is built with D3 v5, employing `d3.geoNaturalEarth1` for projection, `d3.geoPath` for generating SVG paths, and `topojson.feature` to extract GeoJSON features from the TopoJSON data. Each country is drawn as an SVG path with a black stroke and low opacity.

Loading thumbnail…

Fork of ICE8 - Family Tree

This interactive family tree visualization displays hierarchical relationships using an SVG-based node-link diagram. The tree is rendered with colored, rounded rectangles representing individuals, connected by labeled, arrowed links. Built with D3 v3’s layout and behavior APIs (`d3.layout.tree`, `d3.behavior.zoom`), the visualization supports zooming, panning, and node expansion via click interactions. Data is loaded from a local JSON file (`data.json`), and custom CSS controls node colors and tooltip styling.

Loading thumbnail…

Fork of ICE8 - USA Map

This choropleth-style map displays the United States with state boundaries and a shaded landmass, rendered as SVG paths within a React component. The visualization uses `d3.geoAlbers` and `d3.geoPath` to project and draw geographic features from TopoJSON data loaded via `d3.json` from the us-atlas repository. State borders are derived using `topojson.mesh`, while the land and sphere shapes are filled in contrasting colors. The map is displayed at 1000 by 600 pixels, with loading state handled through React hooks.

Loading thumbnail…

Fork of USA Map

This example displays a filled map of the United States with orange sphere background, green land areas, and black state borders. It uses React with D3 v5 to load US Atlas TopoJSON data and render SVG paths through `d3.geoPath` with an Albers projection. The code applies `d3.geoGraticule` for grid lines and `topojson.mesh` to draw interior boundaries between states.

Loading thumbnail…

Fork of ICE-8 Family Tree

This fork of ICE-8 creates a family tree visualization using D3.js v5 and SVG rendering. The dendrogram layout uses a hierarchical data structure of family members, with circle size encoding a numeric value attribute and colored links and circles reflecting per-node category levels. Computed via d3.tree(), the tree positions nodes in a horizontal layout, while curved cubic bezier paths connect parents to children through custom link generation. Node styling applies both static CSS classes and dynamic inline style attributes for strokes and fills.

Loading thumbnail…

Fork of ICE-8 (Family Tree)

This interactive family tree visualizes hierarchical relationships through a node-link diagram, where colored rectangles represent individuals and connecting lines show parent-child links. The visualization uses D3 v3 (d3.layout.tree) to compute a tidy tree layout, rendering nodes as SVG rectangles with hover tooltips and supporting click-to-expand/collapse interactions. Data is loaded from a JSON file containing a nested tree structure with different node types indicated by color coding. The implementation includes zoom and drag behavior through d3.behavior.zoom, with dynamic SVG dimensions calculated from tree depth and breadth to ensure all nodes fit within the viewport.

Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This example presents a collapsible tree diagram rendered as colored boxes, with each node displaying a label, version, and type. It uses D3.js v3 with the `d3.layout.tree` API and SVG elements to create an interactive hierarchy, where clicking a node expands or collapses its children. The tree is initialized from a JSON file that contains the node hierarchy, including link names and directions. The code includes features such as zooming and dragging through `d3.behavior.zoom`, and it dynamically adjusts the SVG dimensions based on the tree's depth and maximum width.

Loading thumbnail…

Fork of Fork of map with legend

This example displays a choropleth map of Indian states, colored with a rainbow sequential scale based on each state’s `AREA_` property. Built with React and D3 v6, it uses `json` to load TopoJSON data, `feature` to convert it to GeoJSON, and `geoMercator` with `fitSize` for projection. `geoPath` renders the SVG paths, while `scaleSequential` and `interpolateRainbow` map area values to fills. The code includes a legend reference, but no legend is actually rendered.

Loading thumbnail…

Fork of Family Tree

This interactive family tree visualization displays generational relationships using a hierarchical node-link diagram, with each generation color-coded by its "type" tag from the JSON data. The D3.js v3 layout algorithm positions nodes dynamically, and users can pan and zoom the SVG canvas. The visualization animates node transitions and includes drop shadows, arrow markers, and tooltips. The tree reads from a static `data-example.json` file, and the code uses D3's `d3.layout.tree`, selection, and behavior zoom APIs to manage the interactive rendering.

Loading thumbnail…

Fork of World Map

This visualization displays a world map with country boundaries and graticules, rendered as SVG paths. The map uses a natural Earth projection via `geoNaturalEarth1` and `geoPath` from D3 v5, with land areas filled in orange against a black sphere backdrop. It loads geographic data from World Atlas TopoJSON and processes it with `topojson.feature` and `topojson.mesh` to extract land polygons and interior borders between countries, which are stroked in light blue. The React components encapsulate the data-loading hook and mark-rendering logic.

Loading thumbnail…

Fork of world map

This visualization displays a world map using a natural Earth projection, with countries rendered in red against an orange sphere. The map is drawn as SVG paths using `d3.geoNaturalEarth1` and `d3.geoPath`, with geographic data loaded from a TopoJSON file hosted on GitHub. The code imports `feature` from `topojson` to convert the TopoJSON topology into GeoJSON features, then appends each country path to the SVG. Styling is defined in a separate CSS file, outlining countries with black strokes.

Loading thumbnail…

Fork of Country map

This choropleth map of India displays each state as a distinct colored polygon, with state names rendered at their centroid positions. Built with D3 v5, it uses `d3.geoPath` with a Mercator projection to generate the SVG paths from a TopoJSON file containing India’s administrative boundaries. A categorical color scale colors the states, while topojson’s `feature` extracts the geometry. Text labels are placed via the path generator’s centroid method, and state borders are styled through the CSS class `states`.

Loading thumbnail…

Fork of World Map with D3.js!

This example displays a world map rendered as blue SVG paths for the oceans and green-filled country polygons with black strokes, based on geographic data from the world-atlas TopoJSON dataset. The code imports `geoEquirectangular` and `geoPath` from d3 to project coordinates, and uses `feature` from topojson to convert TopoJSON topology into GeoJSON features. A single empty path is first appended for the sphere outline, then country paths are added dynamically once the JSON data loads asynchronously.

Loading thumbnail…

Fork of USA Country Map

This example displays a choropleth-style map of the United States with state boundaries rendered as white lines on a black background. It uses the `geoAlbersUsaTerritories` projection from the `geo-albers-usa-territories` library to include U.S. territories, with state polygons and interior borders derived from the US Atlas TopoJSON files. The React component fetches the data via `useData`, converts it with `feature` and `mesh` from TopoJSON, and draws the map using `d3.geoPath` in an SVG.

Loading thumbnail…

Fork of ICE 8: Country Map

This visualization presents a world map using the spherical Mercator projection. Landmasses are rendered in a deep red, with graticules shown in light gray and country interiors outlined in teal against a pale sphere. The example leverages d3.geoPath, geoMercator, and geoGraticule from D3 to generate geographic shapes, while React manages the SVG rendering. Topological data from World Atlas 110m is processed with topojson’s feature and mesh functions to distinguish land from country interiors. The projection and custom styling convey a clean, minimalist cartographic aesthetic.

Loading thumbnail…

Fork of react first level drilldown map using zoom

This example demonstrates a two-level drilldown choropleth map of India, showing state boundaries upon initial load and transitioning to district-level boundaries when a state is clicked. The visualization uses React for component state management, with D3 geoMercator projection and geoPath for rendering SVG shapes, and applies a zoom-to-bounding-box transition via d3.zoom and zoomIdentity. The map animates through a 500-millisecond transition, scaling and translating the viewport to focus on the selected region’s geometry, with data fetched from TopoJSON files for both state and district outlines.

Loading thumbnail…

Fork of Fork of Map of India with D3 - chloropleth map

This choropleth map of India uses a sequential color scale to encode each state with a distinct category color and labels each state with its name. The visualization relies on TopoJSON data for Indian state boundaries, which is projected and rendered using `d3.geoMercator` and `d3.geoPath`. The code filters out the first feature from the dataset before drawing the SVG paths, applies `d3.scaleOrdinal` with `schemeCategory10` for fills, and positions text labels at path centroids using `pathGenerator.centroid`.

Loading thumbnail…

Fork of Polished World Map

This example displays a world map with country boundaries, graticules, and a stylized color scheme using React and D3 v5. The map is rendered as SVG through the `geoNaturalEarth1` projection and `d3.geoPath`, with data sourced from World Atlas TopoJSON. The code uses `d3.geoGraticule` to draw grid lines and TopoJSON’s `feature` and `mesh` methods to extract land polygons and interior borders. The sphere is filled light gray, land is teal, and boundaries are highlighted in a contrasting color.

Loading thumbnail…

Fork of World Map

This visualization depicts a orthographic projection of the world map, rendered as a solid sphere with graticule lines and individual country landmasses. The `d3.geoOrthographic` projection and `d3.geoPath` generate the sphere and land shapes from TopoJSON data sourced from the world-atlas package. Country interiors are outlined using a topological mesh, while styled SVG paths in React manage the visual hierarchy, using fill and stroke colors to distinguish land, graticules, and the surrounding sphere.

Loading thumbnail…

state map

This example displays a map of US state boundaries using the geo-albers-usa-territories projection, which extends the standard Albers USA projection to include US territories. The map renders state land areas in teal with lighter interior mesh lines separating adjacent states, drawn as SVG paths via `d3.geoPath`. React components manage the visualization, with `useData` fetching TopoJSON from the US Atlas repository and converting it to GeoJSON using `topojson.feature` and `topojson.mesh`. The code also defines a graticule with `d3.geoGraticule` for reference lines.

Loading thumbnail…

Fork of ICE 8: World Map With TopoJson

This visualization displays a world map with countries filled in light green against a blue sphere background. It uses the Natural Earth projection to render geographic boundaries from a TopoJSON file. The example relies on D3 v5’s geoNaturalEarth1, geoPath, and json functions, along with TopoJSON’s feature method to extract country geometries. A single SVG path draws the sphere, while each country is appended as a separate path element, with subtle black strokes and low stroke opacity.

Loading thumbnail…

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

This example shows a world map rendered as a bright pink sphere with yellow country shapes outlined in green. It uses D3 v5 and TopoJSON to load geographic data from a GitHub-hosted JSON file. The map is drawn in SVG using `d3.geoPath` with the `geoNaturalEarth1` projection, and country boundaries are generated via `feature` from the topojson library. The sphere and countries are styled with CSS classes.

Loading thumbnail…

Fork of Fork of World Map

This example displays an orthographic world map with graticules, landmasses, and country interiors rendered as an SVG using React. The geographic data comes from the World Atlas TopoJSON dataset, which is processed with `topojson.feature` and `topojson.mesh`. The visualization uses `d3.geoOrthographic` for the projection, `d3.geoPath` for path generation, and `d3.geoGraticule` to create the grid lines. The sphere is filled light gray, land areas use a teal color, and country borders appear as black lines.

Loading thumbnail…

Fork of ICE-8 World Map

This example displays a world map rendered with D3’s natural Earth projection, using orange country shapes against a light green sphere background. It loads geographic data from a TopoJSON file hosted on GitHub, then converts it to GeoJSON with `topojson.feature` before drawing paths with `d3.geoPath` and `d3.geoNaturalEarth1`. The map is static, with dark strokes separating countries and no interactive behavior.

Loading thumbnail…

Fork of DV Fork for geo for world

This example displays a world map in a natural Earth projection, with countries rendered as yellow shapes with black outlines against a blue ocean sphere. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths from TopoJSON data. The code loads the TopoJSON file from a remote GitHub gist via `json`, converts it using `feature`, and appends country paths dynamically. The sphere background is drawn first, and all shapes use the SVG `path` element.

Loading thumbnail…

bhargava ICE7

This example presents the Iris Dataset through a reusable scatter plot built with D3 v6. It initially displays petal width against petal length, with points colored by species. Enabled by an animation loop, the plot automatically cycles through all four dataset dimensions every two seconds, rotating the variable mapped to the x-axis. The visualization uses D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs within a custom `scatterPlot` module, rendering marks as SVG circles.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot cycles through four different Iris flower measurements on the x-axis while keeping sepal length fixed on the y-axis, revealing changing species clusters. The visualization uses D3 v6 modules including `csv`, `scaleLinear`, `axisBottom`, and `axisLeft` to render SVG circles colored by species, with a custom legend and rotating axis labels. Data comes from a remote iris dataset, and the animation uses `setInterval` to swap the x-value mapping every few seconds.

Loading thumbnail…

ICE 7 Pie Chart- bhargava

This example visualizes the top 10 countries with the highest COVID-19 death cases as a pie chart, using data from a GitHub Gist. The chart displays each country’s death count as a colored slice with a label in thousands, alongside a legend showing the country names and corresponding values. Built with React and D3 v5, the code uses `d3.pie` and `d3.arc` to generate the chart, `d3.scaleOrdinal` for coloring, and `d3.format` for tick labels. The SVG rendering includes text overlays and an interactive legend, all styled with CSS.

Loading thumbnail…

Ice 7 area chart bhargava

This area chart visualizes annual vehicle sales in India from 2010 to 2020, using a smoothed curve to show the sales trend over time. The visualization is rendered as an SVG using D3 v5 in a React framework, employing `scaleTime` and `scaleLinear` for the axes, `d3.area` and `d3.line` with `curveBasis` for the filled area and line, and `d3.csv` to load the data from a remote GitHub gist. Red styling highlights the title, while the area fill appears in brown.

Loading thumbnail…

ICE 7 line chart bhargava

This visualization displays annual vehicle sales in India from 2010 to 2020 using a line chart. The chart plots years on the x-axis and sales figures on the y-axis, with both axes labeled and styled. The SVG rendering uses D3’s `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and `line` to generate the path. Data is loaded from a remote CSV file via `csv`, with sales parsed as numbers and years converted to `Date` objects.

Loading thumbnail…

bhargava ICE7-1

This example presents a dynamic scatter plot visualization of the Iris dataset, showcasing four quantitative variables through an animated cycling of axes. The visualization renders SVG circles colored by species using a D3 ordinal color scale, with the x-axis toggling between petal width, sepal width, petal length, and sepal length every two seconds via JavaScript's `setInterval`. The chart updates its axes and points through D3's `scaleLinear`, `axisLeft`, and `axisBottom` APIs within a React-based framework, reading data from a GitHub Gist CSV file.

Loading thumbnail…

Fork of ICE 7 Line Chart

This example visualizes the sales of cars in India from 2009 to 2019 using a line chart drawn with SVG. The chart displays a single time-series line, with the x-axis representing the year and the y-axis showing the total sales figures, both styled with a red theme. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` functions to generate the plot, reading data from a CSV file hosted on GitHub. Grid lines and axis labels are styled using CSS, and the line is highlighted with a 4-pixel-wide stroke.

Loading thumbnail…

Fork of India CO2 emissions

A line-area chart shows India's CO2 emissions per capita over time, with the area filled in maroon beneath a smooth curve. The chart uses D3 v5's `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the SVG path, while `axisBottom` and `axisLeft` render labeled axes with gridlines. Data is loaded via `csv` from a GitHub gist and parsed as date objects, with the y-axis labeled "CO2 emissions (per capita)" and the x-axis as "Year."

Loading thumbnail…

Fork of Fork of Fork of ICE-7: Area chart

This area chart visualizes the NASDAQ Composite index over time, with the x-axis representing time and the y-axis representing price. The chart uses a filled area path rendered as SVG, with axis labels and a title. It loads CSV data from a GitHub gist and employs D3 v5 utilities including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `area`, and `curveBasis`. The chart includes grid lines with custom tick formatting, converting large numbers to billions using a custom `format` function.

Loading thumbnail…

Fork of ICE 7 Area Chart

This fork of the ICE 7 example visualizes car sales in India from 2009 to 2019. It combines a black line chart with a filled orange area chart, drawn using D3 v5's `line`, `area`, and `curveBasis` generators. The visualization uses a time-scaled x-axis and a linear y-axis, with data loaded from a CSV file hosted on GitHub. The SVG output includes labeled axes and a title, with styling handled by an external CSS file.

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This example visualizes US cancer case data from 2009–2022 using a combined line and area chart rendered in SVG. The chart displays the population as the y-axis and year as the x-axis, with a smooth curve applied to both the line and the filled area beneath it. The visualization uses d3.scaleLinear, d3.line, d3.area, and d3.curveBasis to generate the paths, along with d3.axisBottom and d3.axisLeft for labeled axes. Data is loaded as CSV from a GitHub gist, and the code imports specific D3 modules for modular functionality.

Loading thumbnail…

Fork of ICE 7 Line Chart

This line chart shows the sales of cars in India from 2009 to 2019. The visualization uses a red line to plot the data over time, with the x-axis representing years and the y-axis representing sales figures. The code loads CSV data from a GitHub gist and uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to construct the chart. The SVG rendering includes styled axes with red tick labels and grid lines, and the line path is drawn with a 4-pixel stroke.

Loading thumbnail…

Fork of Fork of ICE-7: Area chart

This fork of an ICE-7 example uses d3.v5 to render an area chart of the NASDAQ Composite index, displaying price over time as a filled teal path against a grid of gray tick marks. It reads CSV data, parses dates and prices, and constructs the chart with d3.scaleTime, d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.area with curveBasis. The SVG output includes axis labels and a centered title, with styling handled in CSS.

Loading thumbnail…

Fork of ICE 7question 3 Line Chart

A line chart displays India’s population from 1980 to 2020, with the year on the x-axis and population on the y-axis. The visualization loads CSV data from a GitHub URL via `d3.csv`, uses `scaleTime` and `scaleLinear` for axes, and renders the line with `d3.line`. The SVG is styled with custom CSS, including axis labels, tick formatting, and a red line path. The chart includes gridlines and a title, generated within a React component structure.

Loading thumbnail…

Fork of India CO2 Emissions

A line chart tracks India’s population alongside CO2 emissions per capita over time, using a black stroke for the population trend and labeled axes. The visualization loads a CSV from a GitHub gist via `d3.csv`, parses years with `timeParse`, and renders an SVG through React components. Scales from `d3.scaleTime` and `d3.scaleLinear` position the line, while `d3.axisBottom` and `d3.axisLeft` add gridlines and tick labels. Marker lines, though defined, are not actively invoked in the displayed chart.

Loading thumbnail…

Fork of Fork of line chart section 3

A line chart displays car sales data from India across the years 2013–2021, with year on the x-axis and total sales on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to render an SVG path with red strokes. Data is loaded via `csv` from a GitHub Gist, with parsed years and numeric population values. Grid lines and axis labels are styled through CSS classes applied to the SVG elements.

Loading thumbnail…

Fork of Line Chart

This fork of a line chart shows US auto sales from 2005 to 2022, plotting yearly population values as a single red line with labeled axes and a title. The visualization uses D3 v5 utilities including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to generate an SVG path. It loads CSV data from a gist URL via `d3.csv`, converts the Year field to dates, and renders the chart with gridlines, axis labels, and a red stroke on the line path, styled through external CSS.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

A pie chart visualizes the top 10 countries by deaths from air pollution in 2020, with each slice labeled with the death count and accompanied by a color-coded legend. The chart is built with D3 v5, using `d3.pie` and `d3.arc` to generate the slices and their centroids for labels. Data is fetched as CSV from a GitHub gist, and the chart is rendered as SVG inside an HTML page. Colors are assigned via `d3.scaleOrdinal` with a custom array of section colors.

Loading thumbnail…

ice7

An animated scatter plot cycles through the four numeric variables of Fisher's Iris dataset, changing the x-axis attribute every few seconds while the y-axis remains sepal length. Data points are encoded as ellipses, with width and height proportional to sepal width and petal length, and colored by species. The d3.js library constructs the plot, axes, and legend, while SVG `circle` elements with `rx` and `ry` attributes render the markers.

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, mapping petal width against sepal length while coloring each dot by species (setosa, versicolor, and virginica). Built with D3 v3, it uses `d3.csv` to load data, `scaleLinear` for axes, and `setInterval` to cycle through different data columns every two seconds, updating the x-axis. The SVG rendering includes custom circle markers with varying dimensions and a rotating set of axis labels.

Loading thumbnail…

Fork of Fork of Fork of ICE7 Pie Chart

This pie chart visualizes the runs scored by ten top cricketers, showing the proportional contribution of each player's total. The visualization loads data from a JSON file using `d3.json`, then uses `d3.pie` and `d3.arc` to generate the chart segments, which are rendered as SVG paths. A `d3.scaleOrdinal` with `d3.schemeCategory10` sets the color palette, while a custom legend built with appended SVG `rect` and `text` elements lists each player's name and run total. The code uses D3 v5.

Loading thumbnail…

Fork of ICE 7 Area Chart

This chart displays combined line and area representations of car sales in India from 2009 to 2019, with the line tracing yearly sales values and the area beneath it filled in orange. Built with D3 v5 in an SVG framework, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` along with `area` generators set to a `curveBasis` interpolation. Data is loaded from a remote CSV via `d3.csv` and parsed with `d3.timeParse`, with gridlines rendered through axis tick sizes that extend across the plot area.

Loading thumbnail…

Fork of ICE 7 Area Chart

This chart displays combined line and area representations of car sales in India from 2009 to 2019, with the line tracing yearly sales values and the area beneath it filled in orange. Built with D3 v5 in an SVG framework, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` along with `area` generators set to a `curveBasis` interpolation. Data is loaded from a remote CSV via `d3.csv` and parsed with `d3.timeParse`, with gridlines rendered through axis tick sizes that extend across the plot area.

Loading thumbnail…

Fork of Fork of Pie Chart

This example shows the protein content of various cereals as a pie chart, with each slice labeled in the legend alongside its gram value. The chart reads CSV data from a GitHub gist using `d3.csv` (via `getData.js`), then renders SVG paths with `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color mapping. Legends are appended as grouped rectangles and text, with values formatted using `d3.format`. The visualization is built with D3 v5, rendered entirely in SVG, and includes a red heading for emphasis.

Loading thumbnail…

Fork of Pie Chart

This pie chart shows the Democratic state populations for the top 10 states by vote count, with a legend displaying each state’s name and population in millions. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`, rendering SVG paths with mouseover logging. Data is loaded from a CSV via `d3.csv` and sorted descending before slicing the first 10 entries. Tooltips are not implemented; instead, hovering logs values to the console.

Loading thumbnail…

ICE 7

This animated scatter plot cycles through four different pairings of the Iris dataset’s numeric columns, using a reusable charting API built with D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. The SVG visualization updates every two seconds, re-mapping the x-axis to a new attribute while keeping the y-axis fixed. The code defines a configurable `scatterPlot` function with setters for data, dimensions, and value accessors, then applies it repeatedly to a full-window canvas with a custom font.

Loading thumbnail…

3D chart

This 3D bar chart visualizes the top 10 countries most affected by COVID-19, with each country’s total case count represented as a vertical bar. The example uses D3 v5 alongside the d3-3d and d3-x3d libraries to generate the interactive scene, which is rendered through X3DOM in the browser. Data is loaded asynchronously from a CSV file, then parsed and passed to a `d3.x3d.chart.barChartMultiSeries()` component attached to a chart holder div. The page includes custom CSS styling for the heading and body layout.

Loading thumbnail…

IRIS 3D Scatter Chart

This example visualizes the Iris dataset as an interactive 3D scatter plot using Highcharts’ scatter3d chart type, with petal length, sepal length, and petal width mapped to the x, y, and z axes. Users can drag the plot to rotate the 3D view, implemented via custom mouse and touch event handlers that update the chart’s alpha and beta angles. The data is loaded from a remote CSV using D3’s `d3.csv` function and then passed into the Highcharts chart configuration, which also includes radial gradient point styling and a yellow page heading.

Loading thumbnail…

interactive

A 3D interactive column chart shows the total COVID-19 case counts for the most affected countries, with the United States leading at over 80 million cases. The chart uses Highcharts with 3D options enabled, setting alpha and beta angles for rotation and a depth for the columns. Data is provided inline as arrays of [index, value] pairs, mapped to category labels for each country. The jQuery `$` function initializes the chart within a container div, using the Highcharts `column` chart type with stacking and grouping disabled.

Loading thumbnail…

Fork of IRIS 3D Scatter Chart

This example displays the classic Iris dataset as an interactive 3D scatter plot, using petal length, sepal length, and petal width as the three axes. Users can rotate the chart by dragging the mouse or touching the screen, which adjusts the 3D viewing angles in real time. The visualization is built with the Highcharts scatter3d chart type and the Highcharts-3D module, while the data is loaded asynchronously using D3’s `d3.csv`. Each point is colored individually, and a yellow page title and dark gradient points enhance the visual clarity of the plotted measurements.

Loading thumbnail…

Fork of Fork of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across multiple accounts, breaking down monthly kilowatt-hours by account number. The chart uses d3.stack to transform the grouped data, with green and blue segments representing each account, plotted on band and linear scales with axis labels for month and usage. Built with d3-scale-chromatic for colors, the visualization renders in SVG and includes interactive hover effects that highlight bars and display tooltips showing the kWh value for each segment.

Loading thumbnail…

Fork of Bonus ICE

This 3D column chart displays the top ten richest people in the world for 2021, with each person’s net worth in billions of U.S. dollars and their country of origin. The visualization uses the Highcharts library with the Highcharts-3D module to render extruded, stacked columns arranged along the x-axis, with categories for each individual. Data is grouped into three separate series by country (United States, France, and India), with series values supplied as coordinate pairs. The chart enables a three-dimensional view through the `options3d` settings for alpha, beta, and depth.

Loading thumbnail…

Fork of 3D Scatter Plot with Iris Dataset

This example shows a 3D scatter plot of the Iris dataset, with two traces comparing sepal and petal measurements. The first trace uses sepal length, sepal width, and petal length as axes, while the second uses petal width in place of petal length, rendering both with circular markers and adjustable opacity. It loads CSV data via D3’s `d3.csv` and creates the interactive 3D visualization using Plotly’s `Plotly.newPlot` with a `scatter3d` trace type. The layout removes all margins, and the code relies on Plotly 2.9.0 and D3 3.5.17 from CDNs.

Loading thumbnail…

Fork of ICE-BONUS_SCATTERPLOT_IRIS

This interactive scatterplot displays the classic Iris dataset as a 3D point cloud, projected onto an SVG canvas using the d3-3d library for D3 v4. The visualization renders the dataset's sepal and petal measurements as colored spheres within a rotating 3D grid, with axis labels indicating the variables. Users can drag the view to rotate the plot in both the X and Y dimensions, dynamically recalculating the projection. The implementation uses d3._3d() for 3D-to-2D projection, d3.drag() for interaction, and includes a separate AFRAME-based component for a WebGL/VR alternative view.

Loading thumbnail…

ice 6

A horizontal bar chart displays the top 10 countries by COVID-19 case counts, with countries listed on the y-axis and case numbers on the x-axis. The visualization uses React to manage state and render SVG elements, while D3 v5 functions like `csv`, `scaleBand`, and `scaleLinear` handle data loading, scaling, and axis ticks. Data is fetched from a GitHub-hosted CSV file.

Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This horizontal bar chart displays the top 10 cosmetic products by revenue, using a linear scale for the value axis and a band scale for product categories. The visualization, built with D3 v5, demonstrates axis customization by removing domain lines and tick marks while applying a custom formatter that converts thousands to billions. Data is loaded from a CSV file hosted on GitHub, sourced from United Nations population estimates, and rendered as SVG rectangles with steelblue fill.

Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width for each sample while coloring points by species (setosa, versicolor, virginica). It uses D3 v6’s `csv` loader, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to render an SVG chart. Circle marks encode petal measurements, while sepal length and width are stored as unused `rx`/`ry` attributes. The axes are labeled with rotating text, and the visualization fills the browser window, with the data fetched from a GitHub-hosted CSV file.

Loading thumbnail…

ICE5 - Bhargava Rathod

This example presents a simple web page that combines a styled layout with D3.js and an SVG image. The page's main content is an HTML page with an image, but it also uses D3 to load a CSV file from a URL and display basic information about the dataset. The D3 `d3.csv` function fetches the data, and the page reports the file size, row count, and column count in a text container. The included SVG image, styled with CSS, is a red-and-white abstract geometric design with black outlines, shown as a visual element.

Loading thumbnail…

cat

A stylized cat face rendered with React and SVG using D3’s `arc` generator. Two black eyes, a yellow nose, purple whiskers, and a violet circular head are drawn as primitive shapes. The mouth is an arc path created with D3’s `arc` and positioned using polar coordinates. The SVG’s `circle`, `ellipse`, `line`, and `path` elements are composed in a centered `<g>` group, with stroke widths and radii tuned for a playful, flat illustration.