Skip to main content
Log in
P

pvvaishnavi93@gmail.com

@PVVaishnavi·85 public vizzes

Loading thumbnail…

Fork of

This example presents a multi-page gallery of static data visualizations generated from a sample sales dataset. The bubble chart page displays a pre-rendered PNG image showing the relationship between sales and profit, with color encoding regions and bubble size representing customer count. The homepage links to additional static charts, including bar, area, and line charts, each presented as embedded images with explanatory text. The site uses plain HTML and CSS for layout and navigation, with no interactive JavaScript libraries such as D3.js present in the visible code.

Apr 16, 2026
Loading thumbnail…

Network

This example shows a small friendship network of six people, with labeled nodes connected by gray links to indicate relationships. Using d3.forceSimulation, the code applies a link force for connection distance, a many-body charge force for repulsion, and a center force to anchor the graph. Nodes are rendered as skyblue circles in SVG, with drag interactions enabled via d3.drag to reposition them during the simulation.

Apr 8, 2026
Loading thumbnail…

Fork of React & D3 Starter

This example visualizes a small friendship network with six labeled nodes and six links, showing relationships among Alice, Bob, Carol, David, Emma, and Frank. The force-directed layout uses d3.forceSimulation with link, charge, and center forces to position the nodes, while SVG circles and lines render the graph. Users can drag nodes, which pins them temporarily via d3.drag. Node labels are added as SVG text elements, and the simulation tick handler updates the positions of links, circles, and labels on every frame.

Apr 8, 2026
Loading thumbnail…

Fork of Tree

This example presents a hierarchical tree of programming languages organized by development category, using color-coded nodes to distinguish depth levels. The visualization renders a static tree layout with vertical links connecting parent and child nodes, displaying category names like Web Development and Data Science alongside specific languages. Built with D3 v7, the code uses `d3.hierarchy` to structure the data and `d3.tree` for layout, while `d3.linkVertical` generates the connecting paths. SVG circles and text labels are positioned via transform attributes, with colors assigned based on node depth.

Apr 8, 2026
Loading thumbnail…

Tree

This programming languages tree visualization displays a hierarchical dataset of languages organized into categories like Web Development, Mobile Development, and Data Science. The code constructs an SVG graphic using d3.hierarchy and d3.tree to compute the layout, with links drawn by d3.linkVertical and nodes rendered as circles colored by depth. Each node is labeled with its language name and the tree is fixed at 900 by 500 pixels on a white background.

Apr 8, 2026
Loading thumbnail…

Fork of React & D3 Starter

This visualization presents a static tree diagram of programming languages organized by category, with root, category, and language nodes depicted as red, blue, and green circles respectively. The hierarchical data is laid out using the `d3.tree` layout algorithm, with edges drawn via `d3.linkVertical` paths. The SVG rendering is generated through D3 v7’s selection and appending methods, and labels are positioned with text anchors and dy offsets. The chart uses a fixed 900x500 canvas with a white background and gray links.

Apr 8, 2026
Loading thumbnail…

Fork of Map

A world map rendered as an SVG displays all countries in light blue with white borders, centered using a Natural Earth projection. The visualization loads GeoJSON country boundaries from the world-atlas TopoJSON file via `d3.json`, converts the data with `topojson.feature`, and draws each country as a `path` element using `d3.geoPath` with the `d3.geoNaturalEarth1` projection. The map is static, with styling applied through a CSS class, and handles data-loading errors in the console.

Apr 8, 2026
Loading thumbnail…

Map

This example displays a static world map rendered as light blue countries with white borders on a white background. The visualization loads geographic data from the world-atlas TopoJSON dataset and converts it into GeoJSON features using the topojson-client library. D3’s geoSpatial projection, `d3.geoNaturalEarth1`, and the `d3.geoPath` generator draw each country as an SVG path element. All map rendering occurs within an SVG container, with styling applied via a CSS class.

Apr 8, 2026
Loading thumbnail…

Map

This example displays a static world map rendered as light blue countries with white borders on a white background. The visualization loads geographic data from the world-atlas TopoJSON dataset and converts it into GeoJSON features using the topojson-client library. D3’s geoSpatial projection, `d3.geoNaturalEarth1`, and the `d3.geoPath` generator draw each country as an SVG path element. All map rendering occurs within an SVG container, with styling applied via a CSS class.

Apr 8, 2026
Loading thumbnail…

Map

This example shows a world map where each country is rendered as a light blue polygon with thin white borders against a white background. The visualization uses the D3.js library's `d3.geoNaturalEarth1` projection and `d3.geoPath` to project GeoJSON data. Country boundaries are loaded from the world-atlas package, and the data is processed using the topojson-client library into features that are drawn as SVG paths onto the canvas.

Apr 8, 2026
Loading thumbnail…

Fork of React & D3 Starter

This example shows a world population map where individual countries are shaded with a blue sequential color scale, and hovering over a country reveals its name and population in millions via a tooltip. It renders a Natural Earth projection using `d3.geoPath` and `d3.geoNaturalEarth1`, with geographic data loaded from TopoJSON via `topojson.feature` and country names from a TSV file. The code uses `d3.scaleSequential` with `d3.interpolateBlues` to map population values to fill colors, and SVG paths for country boundaries.

Apr 8, 2026
Loading thumbnail…

Area Chart

This area chart displays monthly sales figures from a CSV file, with a light blue shaded region beneath a blue line to emphasize the trend over time. The visualization uses D3.js v7, leveraging `d3.area` and `d3.line` generators to construct the paths, while `d3.scalePoint` and `d3.scaleLinear` handle the categorical month axis and numerical sales axis. The plot is rendered as SVG within an HTML page, with labeled axes and a title.

Mar 27, 2026
Loading thumbnail…

Fork of React & D3 Starter

This chart displays monthly sales data from a CSV file as a light-blue area chart with a blue line overlay, using an SVG rendered in D3 v7 within a static HTML page. The x-axis uses a point scale for months, while the y-axis employs a linear scale for sales values. The code constructs the chart with `d3.area` and `d3.line` generators, and configures axes using `d3.axisBottom` and `d3.axisLeft`. It reads the data asynchronously with `d3.csv`, then applies margins and transforms to position the visualization.

Mar 27, 2026
Loading thumbnail…

Line Chart

This line chart displays sales figures across the months of January through August, with data points marked by red circles and connected by a green line. The visualization uses D3 v7 APIs including `d3.csv` to load data from a CSV file, `d3.scalePoint` for the categorical month axis, `d3.scaleLinear` for the sales axis, and `d3.line` to generate the path. The chart also includes axis labels and a title within an SVG canvas, using `d3.axisBottom` and `d3.axisLeft` for tick marks.

Mar 27, 2026
Loading thumbnail…

Fork of React & D3 Starter

This example shows a line chart of monthly sales figures using an SVG rendered with D3 v7. The visualization plots sales data from a CSV file, adding red circular markers for each data point and a green line to connect them. The code uses D3’s `scalePoint` and `scaleLinear` for axes, `line` for the path, `axisBottom` and `axisLeft` for ticks, and `csv` to load the data.

Mar 27, 2026
Loading thumbnail…

Pie Chart

This pie chart displays monthly expense categories—Rent, Food, Travel, Shopping, and Bills—with proportional slices and a labeled legend. Built with D3 v7, it loads data from a CSV file, computes arc paths using `d3.pie()` and `d3.arc()`, and positions category labels via `labelArc.centroid(d)`. A categorical color scale (`d3.scaleOrdinal`) assigns colors, while the SVG rendering includes a title and a legend showing each category’s value. The chart is generated entirely with SVG elements and a custom legend.

Mar 27, 2026
Loading thumbnail…

Fork of React & D3 Starter

This pie chart visualizes monthly expenses across five categories: Rent, Food, Travel, Shopping, and Bills. The visualization uses D3 v7 to create an SVG-based donut chart with category labels positioned along the arcs and a legend displaying each category's name and corresponding value. It employs `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with the `schemeCategory10` color palette to compute arc paths, position labels, and assign colors based on data loaded from a CSV file.

Mar 27, 2026
Loading thumbnail…

Scatter Plot

This example shows a reusable scatter plot of monthly sales versus profit, with each circle representing a month’s data from a CSV file. The visualization uses D3 v7 to load the data via `d3.csv`, then builds a linear scale for both axes with `d3.scaleLinear`. Axes are rendered using `d3.axisBottom` and `d3.axisLeft`, while circles are appended to an SVG container with fixed radii and a steelblue fill. The chart includes labeled axes and a title, all styled through CSS classes.

Mar 27, 2026
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between monthly sales and profit, with each circle representing a month. The reusable `scatterPlot` function generates linear scales using `d3.scaleLinear` and axes via `d3.axisBottom` and `d3.axisLeft`. Data is loaded from a local CSV file and parsed with `d3.csv`. The SVG rendering includes labeled axes and a titled chart, with circles styled in steelblue using the `enter` selection pattern.

Mar 27, 2026
Loading thumbnail…

Fork of React & D3 Starter

This example builds a reusable scatter plot comparing monthly Sales and Profit metrics from a CSV dataset. The chart displays eight data points as steelblue circles, with an x-axis for Sales and a y-axis for Profit, using a linear scale for both dimensions. The code leverages D3 v7’s `d3.csv` for data loading, `d3.scaleLinear` for scaling, and `d3.axisBottom`/`d3.axisLeft` for axes. A custom `scatterPlot` function encapsulates the chart logic, allowing flexible reuse with different data mappings and labels, rendered as an SVG.

Mar 27, 2026
Loading thumbnail…

Pie Chart

A pie chart displays monthly expenses across five categories—Rent, Food, Travel, Shopping, and Bills—with proportional slices and a matching legend. The visualization uses D3 v7’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute arc paths and colors, reading the `pieData.csv` file. Slice labels are placed using each arc’s centroid, while the legend lists categories with values. The SVG output is generated entirely with D3’s declarative API.

Mar 27, 2026
Loading thumbnail…

Pie Chart

This pie chart visualizes monthly expense categories from a CSV file, displaying each category's proportion with a colored slice and an outer label. Each slice is rendered with the `d3.arc` path generator, while labels are placed using `d3.arc` centroid calculations. A legend lists categories and values, using `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. The chart is built with D3 v7, rendering to SVG, with the `d3.pie` layout function computing slice angles from the data.

Mar 27, 2026
Loading thumbnail…

Pie Chart

This pie chart visualizes monthly expenses across five categories: Rent, Food, Travel, Shopping, and Bills. It uses the D3.js v7 library to compute arc paths with `d3.pie()` and `d3.arc()`, and renders each slice as an SVG path with labels positioned using `labelArc.centroid()`. A legend, built from the loaded CSV file, shows each category with its corresponding value and color from `d3.scaleOrdinal(d3.schemeCategory10)`.

Mar 27, 2026
Loading thumbnail…

Fork of Fork of React & D3 Starter

This pie chart visualizes monthly expense categories from a CSV file, displaying each category’s proportional share with a legend and value labels. Built with React and D3 v7, it uses `d3.pie` to compute arc segments and `d3.arc` to generate SVG paths, rendered with a categorical color scheme from `d3.scaleOrdinal`. The chart draws arcs and text labels onto an SVG canvas, with a legend constructed iteratively from the data.

Mar 27, 2026
Loading thumbnail…

Fork of React & D3 Starter

This starter demonstrates a minimal integration of React 19 and D3 7. The example renders a single text message, “Hello D3 & React,” centered on the page. It uses React’s `useRef` and `useEffect` hooks to access a DOM element, then applies D3’s `select` method to set the text content. The application is mounted via React’s `createRoot` on a root `<div>` in the HTML file.

Mar 27, 2026
Loading thumbnail…

Scatter Plot

This chart displays a monthly breakdown of expenses as a pie chart, with each slice representing a category and its corresponding value from the loaded CSV file. The visualization uses D3.js (v7) to load the data via `d3.csv`, compute angular positions with `d3.pie`, and render colored slices and labels using `d3.arc`. A legend on the right lists each category and its numeric amount, while the chart is drawn as SVG elements within a 900x500 viewport. The title clarifies the chart’s focus on monthly expenses.

Mar 27, 2026
Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between sales and profit for eight months, with each steel-blue circle representing a month's data. The visualization uses a reusable scatter plot function built with D3 v7, which constructs linear scales for both axes and renders the SVG circles with coordinates mapped from the dataset. Axis labels, tick marks, and a title are generated using D3's `axisBottom` and `axisLeft` methods, while the data is loaded from a CSV file and parsed into numeric values. The chart emphasizes the positive correlation between the two variables.

Mar 27, 2026
Loading thumbnail…

Fork of Fork of Scatter Plot

This scatter plot visualizes the relationship between monthly Sales and Profit using data from a CSV file. The chart is built with a reusable `scatterPlot` function that defines linear scales via `d3.scaleLinear`, axes using `d3.axisBottom` and `d3.axisLeft`, and circles positioned with `cx` and `cy` attributes. It reads the data with `d3.csv`, converts numeric fields, and renders 800×500 SVG output with labeled axes and a title. The points are filled in steelblue, with a radius of 6 pixels, showing a positive correlation between the two variables.

Mar 27, 2026
Loading thumbnail…

Fork of Scatter Plot

This fork of a scatter plot visualizes monthly sales versus profit from a small CSV dataset, encoding each month as a steelblue circle. Using D3 v7 within a React framework, the code loads the data and renders the chart as an SVG, leveraging `d3.scaleLinear` and `d3.extent` to map values, and `d3.axisBottom` and `d3.axisLeft` to generate axes. The example demonstrates a reusable chart structure with configurable margins and an explicit SVG container.

Mar 27, 2026
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between monthly sales and profit for eight months of data, with steelblue circles mapping profit against sales on linear scales. The chart uses D3 v7 to load the CSV file, convert string values to numbers, and render axes and circles as SVG elements. Each data point is positioned using linear scales created with `d3.scaleLinear`, while `d3.axisBottom` and `d3.axisLeft` generate the tick marks, with the plot drawn inside a set margin using an SVG group transform.

Mar 27, 2026
Loading thumbnail…

Scatter Plot

A reusable scatter plot displays the relationship between monthly sales and profit, with each point representing a month from a CSV data file. The plot uses D3 v7 within an SVG rendered in React, employing `d3.csv` to load data and `d3.scaleLinear` to map values to axes. A custom `scatterPlot` function handles axis generation via `d3.axisBottom` and `d3.axisLeft`, rendering circles with steelblue fill to show the positive correlation between the two variables.

Mar 27, 2026
Loading thumbnail…

Scatter Plot

This scatter plot shows the relationship between monthly sales and profit, with each steelblue circle representing one month from a small CSV dataset. A reusable scatterPlot function defines the scales and axes using d3.scaleLinear, d3.extent, and d3.axisBottom/Left, rendering the visualization in SVG with D3 v7. The chart includes labeled axes for Sales and Profit, along with a title, and applies the .nice() method to round the scale domains.

Mar 27, 2026
Loading thumbnail…

Fork of React & D3 Starter

This example shows a reusable scatter plot of monthly sales versus profit from a small CSV dataset. The chart renders as SVG circles on linear x- and y-axes, with labeled axes and a title. The code defines a `scatterPlot` function that takes data and scales as props, using `d3.csv` to load the data and `d3.axisBottom` and `d3.axisLeft` to draw the axes. Color is fixed to steelblue, and the plot is built within a React JSX file.

Mar 27, 2026
Loading thumbnail…

ICE-6 Combined Chart (Bar + Line)

This combined chart displays annual solar energy production as steel-blue bars and wind energy as a red line with points, using the `renewable_energy_production.csv` dataset. Built with React and D3 v7, the SVG visualization subsamples the data every tenth year for clearer bar visibility. It uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` for the wind trend, complete with rotated tick labels, gridlines, axis labels, and a custom legend.

Mar 8, 2026
Loading thumbnail…

ICE-6 Combined Chart (Bar + Line)

This combined bar and line chart visualizes renewable energy production from 2000 to 2182, showing solar energy as steelblue bars and wind energy as a red line with points on a shared axis. The code filters the dataset to every tenth year for clearer bar visibility, uses `d3.scaleBand` and `d3.scaleLinear` for the x and y axes, and renders gridlines, rotated tick labels, and a legend within an SVG. The visualization is built with D3 v7 in a React framework, with data loaded from a CSV file.

Mar 8, 2026
Loading thumbnail…

ICE-6 Combined Chart (Bar + Line)

This combined chart displays annual solar energy production as steel-blue bars and wind energy as a red line with points, using the `renewable_energy_production.csv` dataset. Built with React and D3 v7, the SVG visualization subsamples the data every tenth year for clearer bar visibility. It uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` for the wind trend, complete with rotated tick labels, gridlines, axis labels, and a custom legend.

Mar 8, 2026
Loading thumbnail…

ICE-6 Combined Chart (Bar + Line)

This combined bar and line chart visualizes renewable energy production from 2000 to 2182, showing solar energy as steelblue bars and wind energy as a red line with points on a shared axis. The code filters the dataset to every tenth year for clearer bar visibility, uses `d3.scaleBand` and `d3.scaleLinear` for the x and y axes, and renders gridlines, rotated tick labels, and a legend within an SVG. The visualization is built with D3 v7 in a React framework, with data loaded from a CSV file.

Mar 8, 2026
Loading thumbnail…

Fork of React & D3 Starter

This example combines a bar chart and line chart to compare solar and wind energy production from 2000 to 2182, sampling every tenth year for clarity. It uses React for the DOM structure and D3 v7 for SVG rendering, with `d3.scaleBand` positioning the bars, `d3.scaleLinear` mapping the y-axis, and `d3.line` drawing the wind energy trend overlaid with circular points. The data comes from a CSV file, and the chart includes gridlines, axis labels, and a legend to distinguish the two series.

Mar 8, 2026
Loading thumbnail…

ICE-6 Multi-Series Line Chart

This multi-series line chart visualizes renewable energy production over time, plotting yearly values for solar, wind, and hydro energy sources from a CSV dataset. The chart uses React with D3 v7 to render SVG elements, employing `d3.scaleLinear` for axes, `d3.line` for the path generator, and `d3.axisBottom`/`d3.axisLeft` for ticks. Colored lines distinguish each energy type, with a legend and axis labels clarifying the data.

Mar 8, 2026
Loading thumbnail…

ICE-6 Multi-Series Line Chart

This visualization shows the relative changes in solar, wind, and hydro energy production from 2000 to 2182, with each series represented by a colored line and legend. The React-based code loads a CSV file with d3.csv, then uses d3 scales, axes, and the d3.line generator to render the multi-series chart as an SVG. Gridlines and point markers are added for readability, while D3’s scaleLinear and extent methods determine the axis domains.

Mar 8, 2026
Loading thumbnail…

ICE-6 Multi-Series Line Chart

A multi-series line chart visualizes renewable energy production trends for solar, wind, and hydro sources across the years 2000 to 2182. The chart uses an SVG rendered by React, with D3.js v7 handling data loading, linear scales, axes, gridlines, and line generation via `d3.line`. Three colored lines represent each energy type, accompanied by small circles, a legend, and axis labels. Data is pulled from a CSV file containing annual production values.

Mar 8, 2026
Loading thumbnail…

Fork of React & D3 Starter

This example shows a multi-series line chart of renewable energy production (solar, wind, and hydro) over time, from 2000 to 2182, using data from a CSV file. It renders three colored lines, each with small data-point circles, plus axes, gridlines, labels, and a legend. The code builds an SVG using React and D3 v7, employing `d3.csv`, `d3.scaleLinear`, `d3.line`, `d3.axisBottom`, `d3.axisLeft`, and `d3.max` to create the visualization.

Mar 8, 2026
Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates how a React component can integrate D3 to render dynamic content, showing a simple text message that updates via D3’s selection API. The code uses `useRef` to attach a DOM node, then `select` from D3 to set its text content within a `useEffect` hook. It relies on React’s `createRoot` for mounting and D3’s `select` method for direct DOM manipulation. The example serves as a minimal starter template for combining React’s stateful rendering with D3’s data-driven utilities.

Mar 8, 2026
Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates a minimal integration of React and D3, displaying the text "Hello D3 & React" in a large, centered message. The code uses React's `useRef` and `useEffect` hooks to manage a DOM reference, then calls D3's `select` method to update the text content of that element. It loads React 19 and D3 v7 via import maps and renders the application through `createRoot`. The visualization shows how to combine React's component-based rendering with D3's DOM manipulation utilities.

Mar 8, 2026
Loading thumbnail…

ICE-6 Marks and Channels

A bar chart displays the average calorie count for eight fast-food restaurants, using data from a CSV file. The chart encodes each restaurant on the x-axis and its mean calorie value on the y-axis through bar heights. Built with React and D3.js v7, the visualization utilizes `d3.select`, `d3.csv`, `d3.rollups`, `d3.scaleBand`, and `d3.scaleLinear` to process the data and render the SVG.

Mar 7, 2026
Loading thumbnail…

Fork of React

This bar chart displays the average calorie count for menu items across ten fast-food restaurants, using data from the fast_food_nutrition.csv file. The visualization computes averages with `d3.rollups` and `d3.mean`, then renders them as steelblue bars using D3’s `scaleBand` and `scaleLinear` functions. The chart includes rotated x-axis labels for readability, plus titled axes and a main title. Built with React and D3 v7, the SVG output is generated imperatively by selecting the root element and appending chart elements directly.

Mar 7, 2026
Loading thumbnail…

ICE-6 Marks and Channels

This bar chart shows the average calorie count for each fast-food restaurant in the dataset, with each bar representing a restaurant and its height encoding the average calorie value. The visualization is built using React with D3.js, where the raw CSV data is aggregated via `d3.rollups` to compute means per restaurant. The chart renders as SVG with axes created through `d3.axisBottom` and `d3.axisLeft`, and bars drawn as `rect` elements with a steelblue fill. The x-axis labels are rotated 30 degrees for readability, and the title clarifies the chart's purpose.

Mar 7, 2026
Loading thumbnail…

Fork of ICE-6 Marks and Channels

This bar chart displays the average calorie count for menu items at several fast-food restaurants, using data from a CSV file. The visualization encodes the average calories on the y-axis and restaurant names on the x-axis using rectangular bars. Built with React and D3.js (v7), the code uses `d3.csv` to fetch data, `d3.rollups` and `d3.mean` for aggregation, and `d3.scaleBand` and `d3.scaleLinear` for axes, rendering the final chart as SVG.

Mar 7, 2026
Loading thumbnail…

ICE-6 Marks and Channels

A scatter plot displays the relationship between calories and protein content across a fast food nutrition dataset, with each orange circle representing a menu item. The visualization uses D3 v7 in a React application, loading data from a CSV file with `d3.csv` and rendering the chart as SVG. Scales for both axes are constructed with `d3.scaleLinear`, and points are drawn via `svg.selectAll("circle")`. Axes, a title, and axis labels are added using `d3.axisBottom` and `d3.axisLeft`.

Mar 7, 2026
Loading thumbnail…

Fork of Fork of ICE-6 Marks and Channels

This scatter plot visualizes the relationship between calories and protein content across fast food menu items from a CSV dataset. Each orange circle represents a menu item, positioned by its calorie and protein values. The chart includes labeled axes and a title, rendered as an SVG. The visualization uses D3 v7 in a React framework, employing `d3.csv` for data loading, `d3.scaleLinear` for coordinates, `d3.axisBottom` and `d3.axisLeft` for axes, and D3 selections to append and style the circles.

Mar 7, 2026
Loading thumbnail…

ICE-6 Marks and Channels

This visualization shows a bar chart comparing the average calorie content of menu items across eight fast-food restaurants, using data from a CSV file with nutritional information. The chart uses steelblue bars to represent each restaurant’s average, with the x-axis listing restaurant names and the y-axis showing calorie values. Built with React and D3 v7, the code employs `d3.scaleBand` for the categorical axis, `d3.scaleLinear` for the numeric axis, and `d3.rollups` to compute the mean calories per restaurant. SVG rendering handles all graphical elements, and axis labels and a title are added through D3’s SVG text functions.

Mar 7, 2026
Loading thumbnail…

Fork of React & D3 Starter

A bar chart displays the average calories of fast-food menu items for eight restaurant chains, using data from a local CSV file. The visualization aggregates the dataset with `d3.rollups` and `d3.mean` to compute per-restaurant averages. Built with React and D3 v7, the SVG chart uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` with `.nice()` for the y-axis, rendering steel-blue bars. Both axes are labeled, and restaurant names are rotated on the x-axis for readability.

Mar 7, 2026
Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates a React-based starter that integrates D3 for text manipulation. It shows how to use D3's `select` API to locate a DOM element and update its text content with "Hello D3 & React". The visualization is minimal, focusing on the foundational pattern of combining React's declarative component structure with D3's imperative DOM-selection capabilities. The rendered output is a simple message triggered within a React `useEffect` hook, highlighting the interoperability between the two libraries for building interactive data visualizations.

Mar 7, 2026
Loading thumbnail…

Fork of Fork of Fork of ICE-6 Marks and Channels

This bar chart shows the average calorie count for each restaurant in a synthetic fast-food nutrition dataset. The visualization aggregates the provided CSV data, computing the mean calories per restaurant, and displays these averages as horizontal bars. The chart is built with D3.js v7, using its core API to calculate averages from the loaded data, create an SVG, and render the bars and axis labels.

Mar 4, 2026
Loading thumbnail…

Fork of Fork of ICE-6 Marks and Channels

This scatter plot shows the relationship between calories and protein content for 146 fast food items, with each point representing a menu item from restaurants like McDonald’s, Taco Bell, and Subway. The visualization uses d3.scaleLinear for both axes and d3.axisBottom and d3.axisLeft to render the scales, while d3.csv loads the data from a CSV file. Circles are drawn with SVG attributes. The chart title and axis labels are added using SVG text elements.

Mar 4, 2026
Loading thumbnail…

Fork of ICE-6 Marks and Channels

This scatter plot shows the relationship between calories and protein content across fast food items from various restaurants. Each circle represents a single menu item, plotted with its calorie count on the x-axis and protein grams on the y-axis. The visualization uses d3.scaleLinear to map data values to pixel positions, with circles appended to an SVG canvas at 4px radius. Calorie and protein values are parsed from the CSV data using d3.csv, and d3.axisBottom and d3.axisLeft render the axes with labeled text annotations.

Mar 4, 2026
Loading thumbnail…

ICE-6 Marks and Channels

This scatter plot shows the relationship between calories and protein content in fast food items, with each circle representing an individual menu item. The visualization uses d3.csv to load the dataset, d3.scaleLinear for both axes, and SVG circles with steelblue fill to encode the two nutritional variables. Restaurant names and item details from the dataset are not shown, but the chart includes labeled axes and a title. The code applies opacity to reveal overlapping points across the 147 items in the dataset.

Mar 4, 2026
Loading thumbnail…

Fork of Fork of Fork of React & D3 Starter

This bar chart displays the average calories for each fast-food restaurant, using a dataset of individual menu items with their nutritional information. The visualization is rendered as an SVG using the D3.js v7 library. The code loads the CSV data, groups it by restaurant, and computes the mean calorie value for each. It then applies `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis, drawing bars via appended `rect` elements. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and the x-axis labels are rotated for readability.

Mar 4, 2026
Loading thumbnail…

Fork of Fork of React & D3 Starter

This example shows average calories per restaurant from a fast food nutrition dataset, with each restaurant represented by a vertical bar. The bar chart is rendered as an SVG using D3 v7, with data processed through `d3.csv` and aggregated via `d3.rollups` and `d3.mean`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while scales (`d3.scaleBand`, `d3.scaleLinear`) position the bars and map calorie values.

Mar 4, 2026
Loading thumbnail…

Fork of ICE-5: The Shapes of Data

This example, titled "ICE-5: The Shapes of Data," summarizes a CSV dataset by displaying its file size, row count, and column count. It fetches a remote CSV file using `fetch` and parses it with `d3.csvParse`, which returns a table object. The visualization renders a simple SVG bar chart where each bar’s width corresponds to its row index, using D3’s `select` and `join` APIs. The bars are drawn as rectangles, with row labels added as text elements, offering a basic overview of the dataset's structure.

Feb 27, 2026
Loading thumbnail…

ICE-5: The Shapes of Data

This example loads a CSV dataset on study focus logs via `fetch` and `d3.csvParse`, then displays summary statistics including file size, row count, and column count. It renders a small SVG visualization using D3 v7, where the first ten rows are represented as horizontal bars whose widths increase with row index, alongside row labels. The page is styled with basic HTML and CSS, and the data URL is displayed for reference.

Feb 27, 2026
Loading thumbnail…

Fork of React & D3 Starter

This example presents a small dashboard that loads a CSV dataset, displays summary statistics (approximate file size, row count, and column count), and renders a simple bar-chart-like SVG picture. The page uses D3’s `csvParse` to read the data from a GitHub Gist, then updates the HTML stat cards and draws rectangles with `d3.select`’s `.join` API. The SVG bars are based purely on row index, not on data values, making the visualization a generic shape demo. The code is plain JavaScript within an HTML file, using D3 v7.

Feb 27, 2026
Loading thumbnail…

ICE5 – Study Focus Log (D3 + CSV)

This example summarizes a remote CSV dataset (a study-focus log) and displays basic file metadata alongside a simple generative SVG bar chart. It shows the dataset’s file size, row count, and column count in three stat cards, then uses D3.js (v7) to draw ten horizontal bars whose widths depend on their row index, with row labels to the right. The code fetches the CSV text, parses it with `d3.csvParse`, and renders the SVG using D3’s selection API (`d3.select`, `join`, and attribute setters).

Feb 24, 2026
Loading thumbnail…

ICE5 – Study Focus Log (D3 + CSV)

This example visualizes the structure of a CSV dataset containing study focus logs. It loads the data from a GitHub Gist and presents a summary card showing the file size, row count, and column count. Below the summary, a simple SVG bar chart represents the first ten rows of data, with horizontal bars and row labels. Built with React and D3 v7, the code uses `d3.csvParse` to parse the dataset and the D3 selection API with `.join` and `.attr` to construct and style the SVG elements directly in the browser.

Feb 24, 2026
Loading thumbnail…

Fork of Fork of ICE5 – Study Focus Log (D3 + CSV)

This example loads a CSV dataset from a GitHub gist using D3’s `d3.csvParse` and displays a simple SVG bar chart summarizing the first ten rows. The page also shows file size, row count, and column count via DOM manipulation. The visualization uses D3 v7 selections and `join` to create rectangles and text labels, while the data source and CSV parsing are explicitly handled with `fetch` and `d3.csvParse`. The rendering is SVG-based.

Feb 24, 2026
Loading thumbnail…

Fork of ICE5 – Study Focus Log (D3 + CSV)

This fork of ICE5 presents a study focus log from a CSV dataset, loading it with D3 v7 and displaying file size, row, and column counts. A simple SVG visualization renders horizontal bars for the first ten rows, with row labels, using D3's `csvParse`, `select`, and `join` APIs. The chart is drawn via SVG rectangles and text elements, styled with CSS, and the data is fetched from a GitHub gist. The example highlights basic D3 data loading and summary display.

Feb 24, 2026
Loading thumbnail…

ICE5 – Study Focus Log (D3 + CSV)

This example visualizes the structure of a CSV dataset containing study focus logs. It loads the data from a GitHub Gist and presents a summary card showing the file size, row count, and column count. Below the summary, a simple SVG bar chart represents the first ten rows of data, with horizontal bars and row labels. Built with React and D3 v7, the code uses `d3.csvParse` to parse the dataset and the D3 selection API with `.join` and `.attr` to construct and style the SVG elements directly in the browser.

Feb 24, 2026
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of React & D3 Starter

This example loads a CSV dataset of study focus logs via `fetch` and parses it with `d3.csvParse`. It displays summary statistics including approximate file size, row count, and column count, then renders a simple SVG visualization with rectangular bars whose widths increment by row index and corresponding row labels. The page also shows the dataset URL and uses D3 v7 selections with `join` to bind data and create SVG elements.

Feb 24, 2026
Loading thumbnail…

Fork of Fork of Fork of Fork of React & D3 Starter

This example demonstrates data loading and basic summary statistics using D3.js within an HTML page. It fetches a remote CSV file, displays the file size, row count, and column count, and generates a simple SVG bar chart representing the first ten rows. The visualization uses D3's `csvParse` method to parse the dataset and `select`/`selectAll`/`join` APIs to create and style the bars and labels. Minimal styling and layout are achieved with plain CSS.

Feb 24, 2026
Loading thumbnail…

Fork of Fork of Fork of React & D3 Starter

This example fetches a CSV dataset about study focus logs and displays summary statistics for file size, row count, and column count. It renders a simple SVG visualization with horizontal bars representing the first ten rows of data. The code uses D3 v7's `csvParse` and `selectAll`/`join` methods, along with the Fetch API, to load and display the dataset. The visualization appears inside a pink card with a dashed-border SVG container.

Feb 24, 2026
Loading thumbnail…

Fork of Fork of React & D3 Starter

This example loads a CSV dataset from a GitHub gist and summarizes its file size, row count, and column count on a dashboard card. It then renders a simple SVG visualization of ten horizontal bars with row labels, using D3 v7’s `d3.csvParse` and selection joins via `join("rect")` and `join("text")`. The bars are based on row index rather than data values, acting as a generic placeholder. The code runs in a plain HTML page with inline CSS and JavaScript, using `fetch` to retrieve the data.

Feb 24, 2026
Loading thumbnail…

Fork of React & D3 Starter

This example loads a CSV dataset from a GitHub gist and presents a simple summary of its structure, including file size, row count, and column count, within a styled card layout. It then renders a minimal SVG visualization of bars representing the first ten rows of the data, using D3’s `csvParse` and basic selection/join methods (`selectAll`, `join`, `attr`). The page is built with plain HTML and JavaScript, relying on the D3 v7 library for data parsing and SVG manipulation, while the layout and styling are handled with inline CSS.

Feb 24, 2026
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of React & D3 Starter

This example displays a study focus dataset summary, showing the file size, row count, and column count from a remote CSV file. It uses React’s `useState` and `useEffect` hooks to fetch the data and `d3.csvParse` to parse the CSV text. The visualization renders a static SVG containing a circle and rectangle with light fills and black strokes, alongside the computed metrics. The code logs the file size, rows, and columns to the browser console.

Feb 24, 2026
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of React & D3 Starter

This example summarizes a study-focus dataset by fetching a CSV from a GitHub gist and displaying the file size, row count, and column count as plain text using React state and `d3.csvParse`. Below the summary, a static SVG renders a lightblue circle and a lightgreen rectangle, both with black outlines, to demonstrate basic SVG markup within a React component. The visualization uses `fetch` to load the data and `useEffect` to parse it, with styling handled by external CSS that centers the content in a bordered card.

Feb 24, 2026
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of React & D3 Starter

This example displays a summary of a study focus dataset, showing the file size in kilobytes, row count, and column count from a remote CSV file. The React app uses `d3.csvParse` to parse the fetched data and `useState` and `useEffect` hooks to manage the asynchronous loading process. It renders the metrics as text alongside a static SVG containing a lightblue circle and a lightgreen rectangle, demonstrating basic SVG shape rendering within a styled card layout.

Feb 24, 2026
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of React & D3 Starter

This example summarizes a study focus dataset by displaying its file size, row count, and column count in a styled React interface. The app fetches a remote CSV file from a GitHub gist and uses D3’s `csvParse` method to parse the text, then presents the metrics alongside a simple SVG containing a circle and rectangle. The visualization relies on React’s state management (`useState`) and `fetch` API, with D3 v7 loaded via script, and renders text and shapes using standard SVG markup.

Feb 24, 2026
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of React & D3 Starter

This example summarizes a study-focus CSV dataset by displaying its file size, row count, and column count as text, accompanied by a simple decorative SVG containing a circle and a rectangle. It fetches a remote CSV using the Fetch API, parses it with `d3.csvParse`, and stores the computed metrics in React state via the `useEffect` hook. The interface is built with React components and renders both the summary and static SVG shapes as HTML and SVG elements.

Feb 24, 2026
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of React & D3 Starter

This example summarizes a study focus dataset by displaying its file size, row count, and column count. The React app uses `fetch` to retrieve a CSV file and `d3.csvParse` to parse it, then renders the summary stats in styled HTML elements alongside simple SVG shapes—a circle and a rectangle—for visual interest. The code mixes a modern React component with an older vanilla HTML/D3 script in `index.html`, both relying on D3 v7 for data processing.

Feb 24, 2026
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of React & D3 Starter

This example summarizes a study-focus CSV dataset by displaying its file size, row count, and column count as styled text. It uses React’s `useEffect` and `useState` hooks to fetch the remote CSV with `fetch`, parse it via `d3.csvParse`, and update the UI. A static SVG circle and rectangle provide decorative visuals. The code also includes a non-React fallback using `d3.text` and `document.getElementById` in `index.html`, though the primary app is built with React and renders in SVG.

Feb 24, 2026
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of React & D3 Starter

This visualization displays key summary statistics for the `study_focus_log.csv` dataset, showing the file size, row count, and column count in a simple card layout. The code loads the remote CSV file using `d3.text` and parses it with `d3.csvParse` to extract the dataset dimensions, then updates the HTML elements with the calculated values. The example demonstrates a basic data-loading and summarization workflow without any graphical chart, relying on D3 v7 for fetching and parsing the data while presenting the results as styled text.

Feb 23, 2026
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of React & D3 Starter

This example displays a summary of a study-focus dataset, presenting the file size, row count, and column count. It retrieves a CSV file from a remote GitHub gist and parses it using `d3.text` and `d3.csvParse`. The React framework, with `index.jsx` utilizing `useRef` and `useEffect`, manages the page layout, while the embedded HTML script uses the `d3.v7` library to fetch and process the data.

Feb 23, 2026
Loading thumbnail…

Fork of Fork of Fork of Fork of React & D3 Starter

This example displays a dataset summary for a study focus log, showing the file size, row count, and column count in a styled HTML container. It loads a CSV file from a GitHub gist using D3 v7’s `d3.text` and `d3.csvParse` functions, then updates the DOM with the computed statistics. The React-based shell, using `ReactDOM.createRoot` and `useEffect`, integrates a D3 selection to render a simple message, though the primary data display relies on vanilla JavaScript embedded within the HTML file.

Feb 23, 2026
Loading thumbnail…

Fork of Fork of Fork of React & D3 Starter

This example displays a simple dataset summary for an ICE-5 study focus log, showing the file size, row count, and column count. It loads a CSV file from a GitHub gist using d3.text and parses it with d3.csvParse, then updates HTML paragraph elements with the computed metrics. The React component uses the useRef and useEffect hooks alongside d3.select to render a static message. The visualization provides a quick overview of the data structure rather than a graphical chart, serving as a basic data-loading demonstration.

Feb 23, 2026
Loading thumbnail…

Fork of Fork of React & D3 Starter

This example demonstrates how to load and summarize a CSV dataset using D3.js within a React application. It displays file size, row count, and column names by fetching the raw CSV text and parsing it with `d3.csvParse`. The page also renders basic SVG shapes—a circle, rectangle, line, and text—to illustrate static SVG output. The React component uses the `useRef` and `useEffect` hooks alongside `d3.select` to update the DOM.

Feb 23, 2026
Loading thumbnail…

Fork of React & D3 Starter

This example displays a simple summary of a dataset loaded from a CSV file, showing the file size in kilobytes, the number of rows, and the number of columns. It uses `d3.text` to fetch the remote CSV and `d3.csvParse` to parse it, while the results are written directly into HTML paragraphs. The page calculates the file size from the raw text length and accesses the parsed data's `length` and `columns` properties. It combines static HTML/CSS styling with the D3.js library for data ingestion and basic statistics.

Feb 23, 2026