Kiran3295

USA Country Map

This example displays a choropleth-style map of the United States, showing state boundaries and land areas in light green with black interior borders. It uses React to render an SVG, with D3's `geoPath` and the `geoAlbersUsaTerritories` projection from the `geo-albers-usa-territories` library. TopoJSON data is loaded from a remote URL, and the `feature` and `mesh` APIs extract land and interior boundaries for drawing. The visualization focuses on geographic shape rather than additional quantitative data.

Apr 4, 2022

Famil Tree

This example visualizes a family tree as an animated node-link diagram. A fixed root node ("Veera") branches into multiple generations, with individual names displayed inside circles. The implementation uses D3 v6’s `d3.stratify()` and `d3.tree()` to compute hierarchical layouts, then renders SVG paths and circles. Transitions animate the paths, circles, and text over time, with each text label’s delay increasing by depth. Styling applies lightblue fills, brown strokes, and centered placement.

Apr 4, 2022

World Map

A world map rendered with D3.js and a Natural Earth projection displays country boundaries in light green over a blue sphere. The visualization uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate SVG paths from TopoJSON data. Country shapes are drawn by fetching a remote world.json file via `d3.json`, then processing it with TopoJSON's `feature` method. The example demonstrates fundamental DOM manipulation by appending paths to SVG elements.

Apr 3, 2022

USA Country Map

This example renders a choropleth-style USA map using SVG, showing state boundaries and filled land areas in orange. It uses D3’s `geoPath` and the `geo-albers-usa-territories` projection, with React managing the component structure. TopoJSON data is loaded via `d3.json`, and state outlines are drawn using `feature` and `mesh` from the `topojson` library. The map highlights territorial inclusion through the custom projection, while the `styles.css` defines the land fill and interior stroke.

Apr 3, 2022

World Map Of IC8

This example displays a world map using the Natural Earth projection, with each country rendered as a green SVG path and the globe’s sphere filled in blue. It loads geographic data from a remote JSON file via `d3.json` and processes it with TopoJSON’s `feature` method to extract country boundaries. The visualization relies on D3 v5’s `geoPath` and `geoNaturalEarth1` projection to convert GeoJSON coordinates into SVG paths, demonstrating basic data binding and DOM manipulation with `selectAll` and `enter`. The map is static, with no interactive elements.

Apr 3, 2022

Pie Chart

This pie chart visualizes death rates across the top 10 countries, with each slice labeled in thousands and a corresponding legend listing country names and values. The data is fetched from a CSV file hosted on GitHub and rendered as an SVG using D3 v5 APIs, including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color mapping. The chart applies a custom color palette per slice and uses `d3.format` to display abbreviated numbers.

Area Plot

This area plot visualizes car customer data over time, with the filled area representing the number of customers across a series of years. The SVG chart uses D3 v6’s `scaleTime` and `scaleLinear` for axes, `area` with `curveBasis` to generate the smooth filled path, and `axisLeft`/`axisBottom` with custom tick formatting. The data is loaded via `csv` and parsed with `timeParse`, while the title and axis labels are added as SVG text elements.

Line Chart

This line chart visualizes annual sales data, displaying the trend of sales values over time on a red path. The SVG chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to construct the axes and line generator. It parses dates with `d3.timeParse` and loads data from an external CSV file. Grid lines are styled through tick marks, with blue tick labels and a rotated Y-axis label for clarity.

Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris Dataset, encoding sepal and petal measurements along the x- and y-axes. Built as a reusable D3 chart following the "Towards Reusable Charts" pattern, it uses `d3.csv` to load data and `d3.scaleLinear`, `axisLeft`, and `axisBottom` to render axes. A `setInterval` automatically cycles through the dataset's four measurement columns every two seconds, updating the x-value to show different relationships. Circles are colored by iris species (green, yellow, red) and rendered as SVG elements, with labels for "Sepal Length" and "Petal Length" added separately.

Fork 7 Pie Chart

This visualization displays the percentage contribution of different roles in a project as a pie chart, with each slice colored distinctly and accompanied by a legend showing role names and their corresponding percentages. The chart is rendered as an SVG using D3 v5, with data fetched from a remote CSV via the `csv` function. The pie layout (`d3.pie`) computes slice angles, while `d3.arc` generates the path geometry for each segment, and `d3.scaleOrdinal` maps role names to a predefined color palette.

Mar 27, 2022

Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, mapping petal and sepal measurements to x- and y-axes while coloring points by species (setosa, versicolor, virginica) in orange, purple, and pink. The visualization uses D3 v6 with a reusable `scatterPlot` module employing `scaleLinear`, `axisLeft`, and `axisBottom` for axes. A `setInterval` cycles through four measurement columns every two seconds, dynamically updating the x-axis mapping. The SVG rendering animates circles as the axis scales adjust, with labels for "Sepal Length" and "Petal Length" displayed in a green tech-themed font.

Mar 27, 2022

Scatter Plot with Iris DataSet

A scatter plot displays the Iris dataset, encoding petal length and petal width as x and y positions while coloring each point by species (setosa, versicolor, virginica) in green, orange, or purple. The visualization uses D3 v6’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to load the data from a GitHub gist, map values to screen coordinates, and render axes within an SVG. Circles are drawn with a fixed radius of 5 pixels, and axis labels are manually positioned via SVG `text` elements.

Mar 7, 2022

Fork of Car reviews

A bar chart displays the top 20 car models by a numeric population-like metric (from the "1850" column), with each bar's length representing that value and its vertical position corresponding to a car name. The visualization uses React for component structure and state management, with d3.v5 providing the `csv` loader, `scaleBand`, `scaleLinear`, and `max` functions for data binding and scaling. SVG rectangles are rendered directly within the React component, and a green gridline system marks the x-axis ticks. The chart is titled "Car Reviews" and sources its data from a remote CSV file.

Mar 7, 2022

Fork of Data Visualization- Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, displaying petal length against petal width for three flower species, with each species colored differently. The visualization uses D3 v6’s `csv` loader, `scaleLinear`, and `axisLeft`/`axisBottom` functions to map data to SVG circles, with axis labels indicating the variables. Sepal measurements are also read into the data model, though not directly plotted. The chart is rendered in a full-window SVG with fixed margins and a large font for tick labels.

Car reviews

This visualization displays car review data as a horizontal bar chart, plotting values from the first 20 rows of a CSV dataset. The chart uses a React component with D3 scales, mapping Toyota car names to a band scale for the y-axis and population values to a linear x-axis. Bars are rendered as SVG rectangles, with green grid lines and tick labels generated via D3’s scale methods. The code fetches data from a GitHub gist using `d3.csv` and applies a row conversion to parse numeric fields.

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

This visualization displays the top 20 countries by population from a COVID-19 dataset, rendered as a horizontal bar chart using React and D3 v5. The bars encode population values along the x-axis via a linear scale, while country names appear on the y-axis using a band scale. The SVG marks and text are generated declaratively through React components, with D3's `scaleLinear`, `scaleBand`, `max`, and `csv` functions handling data loading and scaling.

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

This example shows a horizontal bar chart of best-selling car data from a CSV file, displaying the population values for different Toyota models. The chart uses React hooks (`useState`, `useEffect`) to load and manage the data, while D3 v5 functions (`csv`, `scaleBand`, `scaleLinear`, `max`) handle the data parsing and scaling. Bars are rendered as SVG `<rect>` elements, with grid lines and tick labels generated via `xScale.ticks()`.

Untitled

This example loads a CSV file from a GitHub gist and displays summary statistics about its contents in a centered, styled text block. Using the D3.js library, it fetches the data via `d3.csv`, formats it with `d3.csvFormat`, and calculates the approximate size in kilobytes, row count, and column count. The page renders a static SVG background with a blue rectangle, a red polygon, and a clipped gray area, while the text report appears in an HTML `<pre>` element styled with large light-blue text.

Feb 28, 2022

ICE55_11518301

This example parses remote CSV data and displays summary statistics about it on a webpage. The page shows the file size in kilobytes, the number of rows, and the number of columns, using `d3.csv` to fetch and parse the dataset from a GitHub gist, and `d3.csvFormat` to measure its length. The text output appears in a `<pre>` element, and the page also displays a static SVG image. The code uses D3 version 5.

Feb 28, 2022

ICE4_11518301

This example shows a simple SVG face constructed from three circles: a large grey head with a black stroke and two smaller eyes. The React component defines the visualization declaratively, using JSX to render the SVG elements. D3 v7 is loaded via a CDN along with React 17, though D3 is not actively used in the drawing logic. The layout is fixed through constants like `centerX`, `centerY`, and `eyeOffsetX`, demonstrating basic coordinate positioning and styling within an inline React render.

ICE4_11518301

A yellow and black smiley face is displayed at the center of an SVG canvas. The face is composed of a yellow background circle, two circular eyes, and a mouth drawn as an arc. The code uses React components to structure the face, while the mouth is generated using the D3 `arc` function, which defines its inner radius, outer radius, and angular range. The entire graphic is rendered into an SVG via a `FaceContainer` that applies a translation transform to center the face.

ICE4_11518301

A smiley face rendered as an SVG animation uses D3 v7 to draw a yellow circle, black eyes, and a grinning mouth. The code imports `select` and `arc` from D3 to build primitive shapes, then repeatedly transitions the transform attribute of the eyebrow rectangles, raising and lowering them in a loop with `transition.attr` methods. The animation runs continuously, with each eyebrow movement lasting 1800 milliseconds total.

Fork of 04 - let's make a face - dataviz 2018

A yellow smiley face with black eyes and eyebrows is drawn centered in an SVG canvas using D3 v7. The face consists of a filled circle for the head, two circles for eyes, and an arc path for a smile. The eyebrows are rectangular shapes that continuously animate up and down using chained `transition` calls with `duration` values. The code builds the visualization with D3 selections, the `arc` generator for the mouth, and explicit SVG attribute assignments for positions and dimensions.

Fork of Fork of HTML Starter

This example shows a simple SVG smiley face composed of three circles: a large yellow circle for the head and two smaller circles for the eyes, rendered in a React component using the `svg` element. The code uses React’s JSX syntax to declaratively define the circles, with attributes like `cx`, `cy`, and `r` for positioning and sizing, and `fill` and `stroke` for styling. It leverages D3 v7 (loaded via a script tag) but only for its bundled distribution, not for any specific visualization functions, while the React rendering is done through `ReactDOM.render`. The design hardcodes the dimensions and coordinates, serving as a minimal template for combining React with SVG.