saiteja0725

ICE 5

This example visualizes an embedded static image of a landscape or map, rendered as an SVG pattern fill across a 600 by 420 canvas. The code uses a base64-encoded PNG data source, which is referenced through an SVG `<pattern>` and `<image>` element with `xlink:href`, and displayed via a `<rect>` filled with that pattern. The visualization relies solely on SVG within an HTML page, with no additional JavaScript libraries beyond the base HTML structure.

Jun 23, 2022

Fork of Fork of Fork of Force Network

This interactive force-directed network visualizes connections between actors, directors, and films. Using D3 v6, it employs `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes. Data from `data.json` is rendered as SVG circles and connecting lines, with markers indicating relationships. Nodes are draggable, and relationship text labels are shown but incomplete.

Fork of Fork of Force Network

This interactive force-directed network visualizes the connections between Tom Hanks, directors, and their films. Built with D3 v6’s `d3.forceSimulation`, it uses `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to simulate layout physics. The SVG rendering includes nodes color-coded by group and labeled lines for relationships; dragging nodes is enabled via `d3.drag`. The data is loaded from a local JSON file containing linked actors, directors, and movie titles.

Fork of Fork of Fork of Fork of Tree 7

This interactive D3.js v3 SVG tree diagram displays a genealogy hierarchy, starting from a root node and branching through named individuals like Ganne, sai, and bindu. Clicking on a node toggles the visibility of its children, animating the collapse and expansion with a 1100ms transition. The layout uses `d3.layout.tree()` to position nodes, while curved links are drawn with `d3.svg.diagonal()`. Node positions update via `transition()` calls on SVG groups, with circle and text elements representing each person.

Fork of Fork of Fork of Tree 7

This interactive tree diagram visualizes the hierarchical relationships in a small JSON dataset (qn_tree.json), starting from a root node and branching through named individuals like Ganne, sai, and bindu. Nodes expand and collapse on click, with smooth animated transitions of curved links and repositioned labels. The implementation uses D3 v3’s `d3.layout.tree`, `d3.svg.diagonal`, and standard SVG transitions to update positions over a duration of 1100 milliseconds, while circles and text change styling based on collapsed state.

Fork of Fork of Fork of Fork of india map

This visualization displays a choropleth map of India, rendering both state boundaries and district-level subdivisions. Districts are filled with categorical colors using a `d3.scaleOrdinal` with `schemeCategory10`, and hovering over a district turns it black. The map uses a `d3.geoMercator` projection and `d3.geoPath` to draw the geometry. It is built with React and D3, pulling TopoJSON data from GitHub sources for state and district boundaries. Pan and zoom interactions are enabled via `d3.zoom`.

Fork of Fork of Fork of india map

This visualization shows a choropleth map of India with district-level boundaries colored by state and overlaid with state outlines, enabling pan and zoom interaction. The map renders districts using `d3.geoPath` with a `geoMercator` projection, while state and district data come from external TopoJSON files. Hovering a district displays its name and state in a tooltip via appended `title` elements, and the view transforms with `d3.zoom`. District colors derive from `scaleOrdinal` with `schemeCategory10`.

Fork of Fork of india map

This visualization displays a map of India with its states and districts, colored by state using a categorical color scale. It shows district-level boundaries with hover effects that turn districts black, and state boundaries with orange strokes. The map supports zooming and panning via d3.zoom. Built with React, it uses d3.json to load TopoJSON data from GitHub sources, d3.geoMercator for projection, and d3.geoPath to render the SVG paths.

Fork of Fork of Fork of Fork of World Map

This interactive map displays world country boundaries using a draggable orthographic projection within an SVG. Users can click individual countries to toggle the view between the orthographic and Mercator projections. The visualization leverages d3.geoPath, d3.geoOrthographic, and d3.geoMercator from d3-geo-projection, with topojson for country features and world-atlas data. Drag interactions rotate the globe via projection.rotate, while zoom transformations adjust the SVG group. Country names are loaded from a TSV file and applied on click.

Fork of Fork of Fork of World Map

This example presents an interactive world map that toggles between Mercator, orthographic, and Albers USA projections. Users can drag to rotate the orthographic globe and click countries to switch projections, with the United States triggering a Mercator view. Built with d3-geo, topojson, and world-atlas data, it uses d3.geoPath for rendering countries and graticules, d3.drag for rotation, and d3.zoom for panning. The SVG output features styled country polygons with hover effects and smooth transition animations during projection changes.

Fork of ICE 7 Reusable D3 Scatter Plot

This interactive scatter plot displays the Iris dataset, mapping sepal length against petal width. Built with D3.js, it uses `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbols` to render SVG marks. The plot cycles its x-axis through four flower measurements every 15 seconds, creating an animated exploration of correlations. Data is loaded from a remote CSV, and the chart is constructed as a reusable function with configurable accessors for dimensions, data, and scales.

Fork of ICE 7 Pie Chart

This pie chart shows the top 10 car-producing countries in 2019, with each slice sized by total production value and a legend listing country names alongside their numerical values. The visualization is built with D3.js v5 and rendered as SVG, using `d3.pie()` and `d3.arc()` to generate the chart geometry, while `d3.scaleOrdinal` assigns a distinct color to each slice. Data is loaded from a CSV via `d3.csv` and processed in the `run` function. The chart is positioned with fixed translation coordinates, and legend circles and text are appended programmatically to the SVG.

Fork of ICE 7 Pie Chart

A pie chart displays the top 10 car-producing countries in 2019, with each slice representing a country’s total value and labeled in a legend with country names and their production totals formatted in thousands. The chart uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` APIs to generate SVG paths and color-coded slices, while legend elements are appended as circles and texts. Data is loaded asynchronously from a CSV file hosted on a GitHub gist via `d3.csv`, and the rendering is fully SVG-based.

Fork of ICE 7 Line Chart

This line chart displays car sales in India from 2009 to 2019, using a time-scaled x-axis for years and a linear y-axis for sales volume. The visualization relies on D3 v5’s `scaleTime`, `scaleLinear`, `line`, and `axisBottom`/`axisLeft` APIs to generate SVG paths and gridlines. Data is loaded as CSV from a GitHub gist, with year values parsed via `d3.timeParse`. Styling uses CSS for axis labels, tick colors, and a prominent red line stroke, with margins positioning the chart within a 960x500 SVG canvas.

Fork of Fork of ICE 7 Line Chart

This line chart displays car sales in India from 2009 to 2019, with years on the x-axis and sales volume on the y-axis. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `line` for path generation, and `csv` for data loading. Grid lines are styled via axis tick marks, and the chart includes rotated axis labels. Time parsing converts date strings into JavaScript `Date` objects for accurate temporal scaling.

Fork of ICE 7 Line Chart

This line chart shows car sales in India from 2009 to 2019, with time on the x-axis and the number of sales on the y-axis. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for the axes, and a `line` generator to create the sales trend. The data is loaded from a CSV file hosted on GitHub, and the chart includes styled grid lines, axis labels, and a red line path. The axes use `axisBottom` and `axisLeft`, with custom tick formatting for readability.

Fork of ICE 7 Area Chart

This area chart visualizes the sales of cars in India from 2009 to 2019, using a smoothed line and orange filled area to show the trend over time. The visualization is rendered as an SVG using D3 v5, with the `scaleTime` and `scaleLinear` functions handling the axes, while `area()` and `line()` with `curveBasis` generate the smoothed shapes. Data is loaded from a CSV file hosted on GitHub, parsed with `d3.csv` and `d3.timeParse` to convert date strings. The chart includes labeled axes and grid lines with formatted tick marks.

Fork of ICE 7 Area Chart

This fork of an ICE 7 area chart visualizes car sales in India from 2009–2019, with yearly sales values encoded as both a smooth line and an orange filled area beneath it. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` generators with a `curveBasis` interpolation, rendered as SVG. Data comes from a CSV file parsed with `d3.csv` and `timeParse`, while axes include grid lines and rotated labels. The visualization emphasizes the upward sales trend over the decade with a clear, annotated time-series layout.

Fork of Fork of Fork of Data Visualization- Scatter Plot with Iris DataSet

This interactive scatter plot visualizes the Iris dataset, showing the relationship between two selected measurements for each flower. Users can change the x- and y-axes via dropdown menus built with the D3 `select` function. The data is loaded from a CSV using `d3.csv` and rendered as colored SVG circles, with the color indicating the iris species. The chart updates dynamically when the menu selections change, demonstrating the D3 component architecture with React.

Fork of Fork of Data Visualization- Scatter Plot with Iris DataSet

This visualization displays the Iris dataset as an interactive scatter plot, allowing users to compare any two measurements—sepal length, sepal width, petal length, or petal width—via dropdown menus. Each plotted circle is colored by iris species, with a fixed radius and opacity for easy visual grouping. The chart is rendered as an SVG using React and D3 v6, leveraging `d3.csv` for data loading, `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` for ticks. Axis labels and a title are included, with axes updated dynamically as menu selections change.

Fork of Data Visualization- Scatter Plot with Iris DataSet

This interactive scatter plot visualizes the Iris dataset, displaying the relationship between two selected attributes such as sepal length and petal width. Users can change the X and Y axes through dropdown menus, with data points colored by species. The visualization is built with D3 v6 and React, using `d3.csv`, `scaleLinear`, and `axisBottom`/`axisLeft` to render SVG circles and axes. The code includes parsed data from a remote CSV URL and supports dynamic axis updates.

Data Visualization- Scatter Plot with Iris DataSet

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements. Dropdown menus dynamically switch which attribute appears on each axis, with points colored by species (setosa, versicolor, virginica). The visualization uses D3 v6 scales (scaleLinear, d3.extent), axes (axisBottom, axisLeft), and SVG circles, while the data loads from a CSV URL via d3.csv. Dropdown interactions are handled through D3's selection and event binding methods.

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

This horizontal bar chart displays the populations of the ten most populous countries, using the `d3.scaleBand` and `d3.scaleLinear` scales to map country names and population values to SVG rectangles. The React component loads data from a CSV file via `d3.csv`, then renders the chart with SVG marks, including axes generated with `d3.axisLeft` and `d3.axisBottom` logic, all within a `d3` and React environment using the `ReactDOM` library.

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

This visualization displays the ten most populous countries, using a horizontal bar chart where bar length encodes the 2019 population figures. The chart loads data from a CSV file hosted on GitHub, parsing the population column numerically. The visualization is built with React and D3 version 5, leveraging `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and SVG `rect` elements for the bars. Axis ticks are generated and rendered manually, with axis lines and labels positioned using SVG transforms. The chart includes a title, "highest population," and focuses on rendering marks and channels through code.

Fork of Fork of Stylized Scatter Plot with Color Legend

This stylized scatter plot visualizes the Iris dataset, mapping sepal length and petal length along the axes while coloring each point by species using a categorical color scale and an accompanying legend. The SVG chart is rendered with D3 v5 and React, though the code here relies on plain D3 for axes, scales, and the legend. It uses `d3.scaleLinear` for positioning, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and `d3.legendColor` for the legend. Axis styling is customized via CSS to hide the domain and adjust tick and label appearance.

Fork of Iris Dataset Scatter Plot

This visualization displays the Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis, with points colored by species (setosa, versicolor, and virginica). The code loads CSV data using D3’s `d3.csv`, scales the axes with `d3.scaleLinear`, and renders circles as SVG elements. Axes are generated via `d3.axisLeft` and `d3.axisBottom`, and the plot fills the browser window using `window.innerWidth` and `window.innerHeight`. The data is sourced from a GitHub gist containing iris measurements.

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

This example visualizes the top 20 countries by population using a horizontal bar chart, rendered as SVG marks (rectangles) whose lengths encode population values through a linear scale, while a band scale positions the categorical country labels. The chart is built with React for component structure and state management, using hooks like `useState` and `useEffect` to asynchronously load and parse CSV data via `d3.csv`. Axes are hand-drawn using D3 scales and tick generation, with tick marks and text elements laid out manually within an SVG group transformed by margins, avoiding D3’s axis components. The data originates from a GitHub-hosted iris dataset, though the code references a column for population from January 28, 2020.

Fork of ICE-6 Tutorial Bar Chart

This bar chart displays the revenue of the top 10 cosmetic products, sorted by product name on the y-axis and revenue in dollars on the x-axis. It uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG with custom tick formatting that abbreviates large numbers (e.g., converting billions to "B"). Data is loaded from a CSV via `d3.csv` and originates from a GitHub gist. The chart also removes default axis lines and includes custom labels for the title and x-axis.

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

This example demonstrates how to load and parse a CSV file from a GitHub gist using D3.js and then display a summary of the resulting dataset. The page renders a header, a message area, and an SVG image, with the text output reporting the file size in kilobytes, row count, and column count. The implementation uses the `d3.csv` function to fetch and parse the data, `d3.csvFormat` to measure the data size, and JavaScript's `textContent` to update the message container.

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

This example demonstrates how to load and parse CSV data using D3.js, displaying basic statistics about the dataset in a styled HTML page. The code uses the `d3.csv` method to fetch data from a remote gist URL, then calculates and presents the file size in kilobytes, row count, and column count. The page includes a header, an SVG image, and a message container styled with CSS, all rendered through a minimal React-free HTML structure. The visualization emphasizes the simplicity of reading tabular data with D3's promise-based API.

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

This example demonstrates loading and parsing a CSV file from a remote URL using D3.js version 7 within a React application. The page displays a heading, a message area populated via JavaScript, and an SVG image rendered from a separate data file. The code uses `d3.csv()` to fetch and parse the data, then calculates file size in kilobytes, row count, and column count to display in the message container. The SVG graphic appears to be a decorative diagram with colored shapes and paths, though its specific data mapping is not shown in the code.

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

This example demonstrates how to load and parse CSV data using D3.js, displaying a summary of the dataset's size and structure. The visualization shows a pre-formatted message container that reports the data's total kilobytes, row count, and column count after fetching from a remote GitHub gist URL. The page also displays an SVG image featuring geometric shapes and paths. The code uses the `d3.csv()` function to fetch and parse the external CSV file, then employs `d3.csvFormat()` to calculate the file size, with HTML and CSS styling for the presentation.