chandanagandla

@chandanagandla·52 public vizzes

ICE8

This visualization displays a static map of Kazakhstan using a Mercator projection, fitted to an SVG canvas sized 960 by 500 pixels. The code loads geographic data from the world-atlas TopoJSON dataset, extracts Kazakhstan’s geometry via `topojson.feature`, and renders it as a single filled path using `d3.geoPath` with `d3.geoMercator`. The map is drawn in isolation, without additional context such as borders or labels.

Apr 13, 2023

Loading thumbnail…

Network_graph

This example visualizes a small social network as a force-directed graph, showing nine named individuals and their weighted connections. Nodes render as violet circles with red outlines and black name labels, while links appear as pink lines whose thickness reflects the connection weight. The graph uses the older `d3.layout.force` API with `gravity`, `distance`, and `charge` parameters, reading node and link data from a local `graph.json` file. Users can drag nodes interactively, and the layout updates continuously via the force tick event, with SVG elements styled directly in the page’s CSS.

Apr 13, 2023

Loading thumbnail…

Tree ICE-8

An interactive family tree visualization renders a multi-generational dataset as an animated node-link diagram. The chart displays relationships from a root ancestor downward, using cyan nodes with pink outlines and gray links. Users can click nodes to collapse or expand branches. The implementation utilizes the D3.js layout and SVG diagonal APIs to compute positions and draw curved edges, with CSS transitions animating node movements and link redraws over 750 milliseconds.

Apr 13, 2023

Loading thumbnail…

Fork of ICE8-1.2

This example displays a choropleth map of the United States, where each state is filled with a categorical color from `d3.scaleOrdinal` and `schemeCategory10`. It renders state boundaries using TopoJSON data from the us-atlas repository, projected with `geoAlbersUsa`, and draws paths via `d3.geoPath`. State names are positioned at each polygon’s centroid, calculated by `pathGenerator.centroid`, and appear as SVG text elements. The visualization uses D3 v5 and React, with tooltips added via appended `title` elements.

Apr 13, 2023

Loading thumbnail…

World Map

This visualization displays a world map with country boundaries, rendered as an SVG using React. The map combines a natural Earth projection with graticules and country interiors, styled with a muted color palette. The code uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` for geographic projection and rendering, while `topojson.feature` and `topojson.mesh` process the World Atlas TopoJSON data. The sphere background, graticule lines, and land masses are drawn as SVG paths, with country borders highlighted as interior mesh lines.

Apr 12, 2023

Loading thumbnail…

Fork of Europe Map ICE8

This example renders a map of Europe using SVG paths generated from GeoJSON data. The visualization applies a Mercator projection centered on the continent, with each feature outlined in grey and filled with white. The code uses React for the page structure, D3 v5’s `d3.geoMercator` and `d3.geoPath` to convert geographic coordinates into drawable paths, and TopoJSON to load the geometries from a GitHub-hosted file.

Apr 12, 2023

Loading thumbnail…

Fork of World Map

This example presents a world map rendered with D3’s natural Earth projection, displaying countries as purple landmasses with red interior borders and blue graticule lines on a white sphere. The data comes from the world-atlas TopoJSON file, which is parsed using topojson’s feature and mesh functions. The visualization uses React to manage the component state and rendering, with d3.geoPath and d3.geoNaturalEarth1 generating the SVG paths for the map and its overlay elements.

Apr 12, 2023

Loading thumbnail…

World Map

This example displays a world map using the Natural Earth projection, rendered as an SVG in React. It loads geospatial data from the world-atlas TopoJSON file, converting it with `feature` and `mesh` from topojson. The `geoNaturalEarth1` projection and `geoPath` from d3-geo draw the landmasses, graticule lines, sphere outline, and country borders. Land is filled purple, graticules are blue, and interior boundaries are red strokes.

Apr 12, 2023

Loading thumbnail…

HeartDisease

This example visualizes the relationship between SleepTime and BMI using a scatter plot, where each point represents an individual, colored red or green based on HeartDisease status. The x-axis maps BMI and the y-axis maps SleepTime, with point sizes varying according to PhysicalHealth and MentalHealth values. It loads CSV data via d3.csv, scales the axes with d3.scaleLinear, renders circles in SVG, and uses d3.axisBottom and d3.axisLeft for the axes. The chart’s margins and dimensions adapt to the browser window.

Apr 9, 2023

Loading thumbnail…

Fork of Untitled

This bar chart displays the relationship between BMI and age group from a heart disease dataset. Each bar represents the BMI value for a specific age category, plotted along the x-axis. The chart uses D3.js v4 with SVG rendering, specifically leveraging `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis. The data is loaded from a CSV file using `d3.csv`, and bars are drawn as SVG rectangles with the class "bar". Axes are added using `d3.axisBottom` and `d3.axisLeft`.

Apr 9, 2023

Loading thumbnail…

Fork of Pie Chart

This visualization compares BMI values against general health categories using a pie chart, with the top ten highest BMI records from a heart disease dataset. The chart renders as an SVG using D3's `pie` and `arc` generators, with each slice colored via `scaleOrdinal` and `schemeCategory10`. A legend lists health categories with corresponding values, and hovering over a slice logs its BMI to the console. Data is loaded as CSV via `d3.csv`, while the React-free interface relies on plain D3 selections and the `bundle.js` build.

Apr 9, 2023

Loading thumbnail…

Pie Chart

This pie chart visualizes the distribution of gender categories from the Heart2020Cleaned dataset, with each slice proportionally representing the count of occurrences per category. The visualization uses D3 v7’s `d3.rollup`, `d3.pie`, and `d3.arc` to compute and render the slices, while a categorical color scale (`d3.scaleOrdinal` with `d3.schemeCategory10`) distinguishes each group. A legend with colored rectangles and text labels displays each category name alongside its count, rendered as SVG within a Bootstrap-styled HTML page.

Apr 9, 2023

Loading thumbnail…

Physical Health vs BMI Scatter Plot

This scatter plot visualizes the relationship between physical health and body mass index (BMI) using a dataset from Heart2020Cleaned.csv. Each blue circle with a black stroke represents an individual data point, with BMI mapped to the x-axis and PhysicalHealth to the y-axis. The visualization uses d3.v7’s `scaleLinear`, `axisBottom`, and `axisLeft` to render the axes, while circles are appended to an SVG via `selectAll` and `enter`. The code, written in plain JavaScript, also makes use of D3’s `csv` function for asynchronous data loading.

Apr 9, 2023

Loading thumbnail…

Fork of Fork of Bubble chart

This bubble chart visualizes the correlation between average torque, horsepower, and highway MPG for vehicle makes. Circle positions encode horsepower and torque on the x and y axes, while circle size represents highway MPG, and color distinguishes vehicle makes. The visualization uses D3.js v7 to load CSV data and render SVG elements with interactive tooltips. A legend explains bubble size and color categories, and hover effects increase opacity to highlight individual data points.

Apr 9, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This D3.js pie chart visualizes the top 10 countries by 2020 air pollution deaths, sourced from a GitHub-hosted CSV. The code uses the `d3.pie` layout and `d3.arc` generator to draw the chart's sectors, with colors assigned via `d3.scaleOrdinal`. A legend displays each country and its corresponding death count, formatted with `d3.format`. The chart is rendered as SVG, and the data is loaded asynchronously using the `d3.csv` method.

Apr 8, 2023

Loading thumbnail…

Fork of ICE-7 Line Chart

This example shows a line chart of stroke incidence against BMI from 2000 to 2013, with time on the x-axis and stroke values on the y-axis. The chart is rendered as an SVG using D3 v5, with scales created via `d3.scaleTime` and `d3.scaleLinear`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, while the line path is drawn with `d3.line`. The data is loaded from a CSV file hosted on GitHub.

Apr 8, 2023

Loading thumbnail…

Fork of Area Death's

This area chart visualizes death by stroke, plotting average life expectancy against years. The visualization uses d3.area() with a curveBasis for smooth interpolation, d3.scaleTime() and d3.scaleLinear() for axes, and d3.axisBottom() and d3.axisLeft() with gridlines. Data is loaded via d3.csv() from a GitHub gist, rendered as an SVG, and styled with orange fill and a red title. The chart includes axis labels for years and life expectancy.

Apr 8, 2023

Loading thumbnail…

Fork of Fork of Fork of Selecting a Year on a Line Chart

A line chart visualizing heart disease rates across age categories, with each line colored by a category and selectable by hovering over the chart. The vertical year line updates as the mouse moves, and the chart uses D3 v5 with d3.line, d3.scaleTime, d3.scaleOrdinal, d3.nest, and SVG rendering. Data is loaded from a CSV file, and the chart includes axes, a legend from colorLegend.js, and a title.

Apr 8, 2023

Loading thumbnail…

Fork of Fork of Selecting a Year on a Line Chart

This interactive line chart shows United Nations population estimates and projections for world regions from 1950 to 2100. Users can move the mouse across the chart to select a year, triggering a vertical line to update and re-render the visualization. Built with D3 v5, the code uses `d3.nest` to group data by region, `d3.line` with `curveBasis` for smoothed paths, and scales like `scaleTime` and `scaleLinear`. The data is loaded from two CSV files via `d3.csv` and processed with custom melting logic.

Apr 8, 2023

Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart displays global population trends over time for different regions, with lines colored by region and a vertical black line marking the currently selected year. Users can move the mouse across the chart to change the selected year, which updates the line position and triggers a re-render. The visualization uses d3 v5, including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis` to draw the axes and paths, with `nest` and `schemeCategory10` for grouping and coloring regions. Data is loaded from UN population estimates CSV files, processed by melting year columns into rows, and rendered using SVG with a custom line chart component that handles the mouse interaction via `on('mousemove')`.

Apr 8, 2023

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. Each city is represented by a colored line, with a legend showing city names and a title above the chart. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city colors, while d3.line with curveBasis generates smooth paths. Nesting via d3.nest groups data by city, and the code includes custom axis labels and a reusable color legend component, all rendered as SVG.

Apr 8, 2023

Loading thumbnail…

Fork of Stylized Line Chart

This visualization displays heart disease data across age categories as a smooth, stylized line chart. The curve is drawn using d3.line with curveNatural, connecting data points from the Data Canvas Sense Your City dataset. The React-based implementation uses d3.scaleTime and d3.scaleLinear for axes, with a Poppins font and blue stroke styling. Tooltip circles are commented out, leaving only the line visible in the SVG rendering.

Apr 8, 2023

Loading thumbnail…

Fork of Fork of Bar graph-task1

This visualization presents a bar chart of heart disease data, with bars depicting physical health scores for various categories. The chart uses a red grid and axis ticks, and the data is loaded from a CSV file using d3.csv. Built with React, the App component renders an SVG using d3.scaleBand and d3.scaleLinear to map data to positions. Additionally, the code includes a 3D scatter plot created with Plotly, plotting heart disease against smoking and diabetic status, though this chart is not displayed in the main view.

Apr 8, 2023

Loading thumbnail…

Fork of Bar graph-task1

This bar chart displays North American sales for the top twelve video games, with each game's name on the vertical axis and its sales figures on the horizontal axis. The visualization is built using React and D3 v5, employing `d3.csv` to load the dataset and `d3.scaleBand` and `d3.scaleLinear` to map the data to SVG rectangles. The chart is rendered with red gridlines and labeled axes. While the primary view is a horizontal bar graph, the code also contains a separate Plotly-based 3D scatter plot that compares North American and Japanese sales over time, indicating the source data includes multiple regional sales metrics.

Apr 8, 2023

Loading thumbnail…

Fork of Fork of Bonus ICE - 3D Bar chart

This 3D vertical bar chart displays the sales quantities of seven different vegetables across six supermarket chains, with each store represented by a series of colored bars extending along the z-axis. The chart uses the Highcharts library with its highcharts-3d module and JavaScript, configured with a column chart type, enabled 3D options (alpha, beta, viewDistance, depth), and stacked, grouped columns. The x-axis lists vegetable categories, the y-axis is labeled "Vegetables," and the z-axis is labeled "Supermarkets," with data embedded directly in the series arrays for each retailer.

Apr 2, 2023

Loading thumbnail…

Fork of Fork of 3D Scatter Plot

This 3D scatter plot visualizes two sets of monthly sales data, with one trace plotting April, May, and June values and a second trace plotting July, August, and September values. The chart uses Plotly's `scatter3d` trace type, rendered through the `Plotly.newPlot` function within the Plotly 2.9.0 JavaScript library. Data is loaded from a GitHub-hosted CSV file using D3's `d3.csv` method, and the layout removes all margins for a full-bleed display.

Apr 2, 2023

Loading thumbnail…

Fork of Area Chart ICE-7

This area chart visualizes the number of visitors over a series of years, with the title "Death Casess By Strok." It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with `curveBasis` to render a filled SVG path. The y-axis is formatted with a custom tick function, and the data is loaded as CSV from a GitHub gist, with the year parsed as a date.

Mar 30, 2023

Loading thumbnail…

Fork of Fork of Line_strok

This line chart displays the average life expectancy over time, with the x-axis representing years and the y-axis showing the average life value. The data originates from a CSV file hosted on GitHub. Built with D3 v5, the visualization uses `scaleLinear`, `axisLeft`, `axisBottom`, and a `line` generator with a `curveBasis` smoothing function to render the blue stroked path on an SVG canvas. Grid lines are created via tick sizes, while axis labels and a title are added as text elements.

Mar 30, 2023

Loading thumbnail…

Fork of ICE-7_Pie

This visualization displays the basic cost of Amazon across countries, presenting the top 10 countries by inflation rate as a pie chart with an accompanying legend. The chart uses D3 v5 APIs including `pie`, `arc`, and `scaleOrdinal` with `schemeCategory10` to generate colored slices, while `csv` loads the data from a GitHub gist. The legend lists each country with its inflation rate in dollars, rendered as SVG elements. Interactive mouseover events log the inflation rate values to the console, and the chart is built within a React framework using D3’s selection and data join methods.

Mar 30, 2023

Loading thumbnail…

Fork of ICE #7 - Pie Chart

This visualization displays the inflation rates of the ten G20 countries with the highest values as of February 2023, using a pie chart with a color-coded legend. The chart is rendered as an SVG using D3 v5, with slices generated via `d3.arc` and colored using `scaleOrdinal` with the `schemeCategory10` palette. The legend lists each country and its corresponding rate, formatted as a percentage. Data is loaded asynchronously from a CSV file hosted on a GitHub Gist, sorted in descending order, and then visualized.

Mar 30, 2023

Loading thumbnail…

Fork of Reusable_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset, showing the relationship between two flower measurements selected from a rotating set of four attributes. The plot cycles through different x-axis variables (petal width, sepal width, petal length, sepal length) every few seconds, updating the axis labels and circle positions with a smooth animation. Species are color-coded—pink for setosa, blue for versicolor, yellow for virginica—with a legend displayed alongside. Built using React with D3 v6, the visualization leverages `scaleLinear`, `axisLeft`, and `axisBottom` for axes, and D3's `csv` loader for data ingestion, rendered as SVG circles with interval-driven transitions.

Mar 30, 2023

Loading thumbnail…

Fork of Fork of Reusable_D3_Scatter_Plot.

This interactive visualization displays the Iris dataset, animating through different measurement combinations on the x-axis while keeping sepal length on the y-axis. The scatter plot is built using React and d3.scaleLinear, with colored circles representing three Iris species. A legend identifies red, blue, and yellow markers for each type. The animation cycles through petal width, sepal width, and petal length using setInterval, updating the x-axis label and repositioning points. The code uses d3.csv for data loading and d3.axisBottom for axis rendering.

Mar 30, 2023

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This interactive scatter plot displays the Iris dataset, encoding petal and sepal measurements for three flower species. The D3.js (v6.7.0) visualization cycles through four column combinations on the x-axis while the y-axis remains fixed, animating the points with each interval. A legend identifies species by color (green for setosa, orange for versicolor, blue for virginica). The implementation uses reusable scatter plot logic from `scatterPlot.js` with `scaleLinear`, `axisLeft`, and `axisBottom`, while `index.js` handles data parsing, marker styling, and dynamic axis updates.

Mar 30, 2023

Loading thumbnail…

Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes Olympic Games data, mapping Thirdposition on the x-axis and Total on the y-axis, with each circle’s fill color indicating the country (India, Pakistan, or Australia highlighted, others black). Using D3 v6, the code loads CSV data, applies linear scales via `scaleLinear`, and renders SVG circles with `selectAll().join()`. The axes are generated with `axisLeft` and `axisBottom`, while custom labels rotate text for clarity.

Mar 23, 2023

Loading thumbnail…

Fork of Fork of ICE-6 Scatter Plot

This visualization displays a scatter plot of Commonwealth Games data, with each circle representing a country positioned by its first and second place finishing counts. The circles are colored by country—red for the USA, yellow for China, green for Japan, and black for others—with a sky-blue background. The code loads a German Credit CSV dataset, though the visualization appears to plot sports performance metrics, using D3 v6’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs. It renders as an SVG with circle elements, axis labels, and custom tick font styling.

Mar 23, 2023

Loading thumbnail…

Fork of Fork of Fork of ICE-6 bar graph

A bar chart displays the total COVID-19 deaths for twelve countries, forming a ranked comparison of mortality. The visualization loads CSV data from a GitHub gist and renders horizontal bars using React and D3 v5. Code uses `d3.csv`, `scaleBand`, and `scaleLinear` to map country names and death counts to SVG rectangles. Axis ticks and gridlines are drawn manually with `line` and `text` elements, while the chart title appears in the HTML heading.

Mar 23, 2023

Loading thumbnail…

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

This bar chart shows the basic cost of Netflix in up to fifteen countries, using horizontal bars ranked along a categorical y-axis and a linear x-axis for cost. The visualization combines React's component model with D3 v5 utilities, using `scaleBand` and `scaleLinear` for axes, `csv` to load data from a gist, and rendering bars as SVG `<rect>` elements within a React component. The chart draws axis ticks and labels manually, with D3's `max` for domain scaling.

Mar 23, 2023

Loading thumbnail…

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

This example visualizes the basic subscription cost of Netflix across fifteen countries using a horizontal bar chart. Built with React and D3 v5, it renders SVG marks through React components while D3 handles the scales and data loading via d3.csv. The chart uses d3.scaleBand for the categorical country axis and d3.scaleLinear for the continuous cost axis, with axes drawn manually using tick values and grid lines. The data originates from a CSV file containing per-country pricing information.

Mar 15, 2023

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This example shows the most streamed songs and their basic costs, with a horizontal bar chart rendered as SVG. It loads data from a CSV file using `d3.csv`, filters to the first 12 rows, and maps values with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The React component uses `useState` and `useEffect` to fetch and store data, while D3’s `axis` and formatting utilities are imported but not directly used; instead, ticks and grid lines are manually drawn. The chart is styled with red gridlines and no axis components.

Mar 15, 2023

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This bar chart displays the cost per month for basic streaming subscriptions across twelve countries, loaded from a CSV file and rendered as an SVG. The React-based application uses D3.js functions such as `csv` for data loading, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis, with gridlines and labels drawn using D3's `axisLeft` and `axisBottom` logic. The bars are drawn as SVG rectangles within a transformed group, and the visualization uses a red gridline to emphasize tick values.

Mar 15, 2023

Loading thumbnail…

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

This bar chart displays COVID-19 data for fifteen countries, ranking them by basic cost. The visualization uses React to manage state and render SVG elements, while D3 v5 provides scales, axes, and data loading via `d3.csv`. Marks are drawn as bars using `rect` elements, with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. The chart loads data from a CSV file hosted on GitHub.

Mar 15, 2023

Loading thumbnail…

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

This example shows the basic cost of Netflix subscriptions in 15 countries using a horizontal bar chart, with countries scaled by cost along the x-axis. The visualization is rendered as an SVG using React for component structure and D3 v5 for data loading and scales, specifically `d3.csv`, `d3.scaleBand`, and `d3.scaleLinear`. Gridlines and axis ticks are drawn manually from scale domains, while rectangles represent each country’s cost. Data comes from a remote CSV file, loaded asynchronously and sliced to the first 15 entries.

Mar 15, 2023

Loading thumbnail…

Fork of Fork of AVN - ICE5

This example shows a horizontal bar chart of IPL winners, with team names on the y-axis and prize money in million dollars on the x-axis. The chart uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisLeft and d3.axisBottom to render the axes. Data is loaded from a remote CSV using d3.csv, with prize values coerced to numbers. Bars are drawn as SVG rectangles filled with steelblue, and the chart includes a title and axis label.

Mar 15, 2023

Loading thumbnail…

Fork of Fork of Fork of AVN - ICE5

This bar chart displays IPL winners and their prize money in millions of dollars, with teams on the y-axis and prize amounts on the x-axis ranging from 0 to 15. Using D3 v5, it applies `scaleLinear` for the x-axis and `scaleBand` for categorical team labels, with `axisLeft` and `axisBottom` generating the axes. The SVG rendering includes a title, axis label, and steel-blue rectangles, with data loaded via `d3.csv` from a GitHub gist. Tick formatting uses `format('.3s')` to abbreviate large numbers.

Mar 15, 2023

Loading thumbnail…

Fork of Fork of Fork of AVN - ICE5

Mar 15, 2023

Loading thumbnail…

Fork of Fork of AVN - ICE5

Mar 15, 2023

Loading thumbnail…

ICE 5

This example displays a static SVG graphic alongside a text summary of a remote CSV dataset. The page uses D3 v5’s `d3.csv` method to fetch the data and calculates the file size in kilobytes, row count, and column count, which are then displayed in a `<pre>` element. A fixed-size SVG placeholder and an embedded PNG image are shown, with page styling handled by CSS.

Mar 9, 2023

Loading thumbnail…

Fork of ICE 5

This visualization presents a utility for examining a company sales dataset pulled from a Kaggle gist. The page loads the CSV data via `d3.csv` and displays basic file statistics, including its size in kilobytes, row count, and column count, within a designated `<pre>` element. The interface is styled with black and brown text on a gray background and features an embedded image of a Fiat 500. Upon loading, the JavaScript triggers a confetti animation on a Canvas element using the `js-confetti` library, creating a celebratory effect. The example demonstrates a straightforward D3 data-loading and metadata-reporting workflow.

Mar 9, 2023

Loading thumbnail…

Fork of ICE 5

This example displays Olympic Games data summary statistics, showing the file size, row count, and column count of a CSV dataset loaded from a remote URL. It uses D3 v7’s `d3.csv` to fetch and parse the data, then `d3.csvFormat` to calculate the byte size. The page presents the result in a text block and includes a static image of the Paris Olympics. A hyperlink to the raw data source is also provided, with the page styled using CSS for centered layout and hover effects on the image.

Mar 9, 2023

Loading thumbnail…

Fork of ICE5

This visualization presents metadata for a "Professionals Dataset" fetched from a CSV file. It displays the dataset's file size in kilobytes, the total number of rows, and the number of columns using a simple text-based output. The page is styled with a custom background image and uses the D3.js library, specifically the `d3.csv` and `d3.csvFormat` APIs, to load and analyze the raw CSV data. A hyperlink provides direct access to the source data file.

Mar 9, 2023

Loading thumbnail…

Fork of ICE5-Tejaswi_Tummala - Learning and Parsing the CSV data with D3.js

This example demonstrates how to load and parse CSV data using D3.js, displaying basic file statistics such as size, row count, and column count. The visualization reads data from an external GitHub Gist URL via `d3.csv`, then shows the computed metrics in a styled `<pre>` element. It also embeds a static SVG house image. The code uses D3 v7, plain HTML, and CSS, with the `d3.csv` and `d3.csvFormat` APIs to handle the data pipeline and generate the user-facing message.

Mar 9, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

This example overlays hundreds of semi-transparent, randomly colored squares on a static SVG path of a Buddha silhouette, creating a layered, abstract composition. The squares are generated via nested array maps with random positioning and RGB fill values, while the Buddha path is rendered using an SVG `<path>` element with a black fill. Built with React and rendered as SVG, the visualization combines generative randomness with a fixed iconic shape to produce a colorful, overlapping visual effect.

Mar 2, 2023