N

Nikitha123171

@Nikitha123171·63 public vizzes

Loading thumbnail…

Social network tree ICE 8 Sai Nikitha

This visualization shows a social network of friends centered around Sai Nikitha, with nodes representing people (and the country India) connected by friendship links. It uses the D3.js v6 library, specifically `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position the nodes. Draggable pink circles with text labels are rendered as SVG elements, and links appear as yellow lines with arrow markers. The data comes from an external JSON file containing node and link definitions, with mouseover interactions to highlight connected nodes via the `nodeHover` class.

Loading thumbnail…

Family tree ICE 8 Sai Nikitha

This example shows a hierarchical tree diagram of geographic locations, with the world branching into USA, India, and South Korea, and further into individual states and cities. It uses D3.js v5’s `d3.tree` and `d3.hierarchy` to compute node positions, then renders the structure as an SVG. Node circles and connecting paths are colored according to the `type` and `level` properties in the dataset, with labels placed beside each circle.

Loading thumbnail…

USA Country Map ICE 8 Sai Nikitha

This visualization displays a choropleth map of the 50 US states using the geoAlbersUsaTerritories projection, with land areas filled in gray and state boundaries drawn as black strokes. The map is rendered as an SVG using React, with geographic data sourced from the us-atlas TopoJSON file (states-10m.json) and processed through d3.geoPath and TopoJSON’s feature() and mesh() functions. The code also includes a CSS hover effect that turns states blue when the mouse pointer is placed over them.

Loading thumbnail…

World Map ICE 8 Sai Nikitha

This example displays a world map using an equirectangular projection, with all countries rendered as grey SVG paths with black borders. It uses the TopoJSON `feature` API to extract country geometries from the world-atlas dataset, and D3 v5’s `geoPath` and `geoEquirectangular` to generate the paths. A white sphere outline represents the Earth’s boundary. Hovering over any country turns it blue via a CSS `:hover` rule, providing an interactive visual response without additional JavaScript.

Loading thumbnail…

Fork of Area Chart of Uk Population

This area chart visualizes the population of the UK from 2008 to 2023, using a smooth curve to represent the upward trend with a slight dip in 2020. The SVG rendering uses d3.scaleTime and d3.scaleLinear to map the data, with d3.area and d3.line generators, both employing d3.curveBasis for smoothing. The chart includes labeled axes, a grid, and a title, with population values formatted in thousands via d3.format. The data is loaded asynchronously from a CSV file and multiplied by 1000 before rendering.

Loading thumbnail…

Fork of Area Death's

This example shows the crime index across different countries over time, with the data plotted as a smooth, orange area chart. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `area` with `curveBasis` to create the filled curve. It is rendered as an SVG inside an HTML page, and the data is loaded from a CSV hosted on GitHub, with axis labels and a title styled via CSS.

Loading thumbnail…

Fork of Area Chart of Uk Population

This fork of an area chart displays the population of the United Kingdom as a curve, but the data loaded from `data.csv` actually contains a list of countries and their crime indices, which are multiplied by 1000. The chart plots these values over time, using a smoothed basis curve to create both a line and a filled area beneath it. The visualization is built with D3 v5, using `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render axes, with the SVG output styled via an external CSS file.

Loading thumbnail…

Fork of Area Chart of Uk Population

This example displays the Crime Index of various countries as a smooth area chart, overlaid with a black line for emphasis. Although the heading references UK population, the data comes from an external CSV file. The code uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for axes, and d3.area with d3.curveBasis to generate the filled SVG path. Axis ticks are styled with a custom orange color via CSS.

Loading thumbnail…

Fork of Fork of Area Death's

This visualization shows the crime index across different countries, with the x-axis displaying countries as time-scaled values and the y-axis representing the crime index. The chart uses a filled orange area path rendered with d3.area and a basis curve, while axes are created using d3.axisBottom and d3.axisLeft. Data is loaded as CSV from a GitHub gist, with country values parsed as dates and crime index as numbers. The SVG rendering includes a red title and purple axis labels, with d3.scaleTime and d3.scaleLinear mapping the data ranges.

Loading thumbnail…

Fork of D3.js Line Chart

This chart visualizes the Crime Index across 22 countries, using a line to connect each country’s index value along a categorical x-axis. Built with D3.js v7, it loads data from a CSV file using `d3.csv` and renders an SVG line chart with band-scaled x positions and linear y scaling. The code uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct axes, while drawing the line via `d3.line` and styling it with steelblue stroke attributes from CSS. Axis labels are added as SVG text elements.

Loading thumbnail…

Fork of Fork of D3.js Line Chart

A D3.js line chart visualizes customer counts per year from a CSV file, with an orange-to-steelblue line drawn using `d3.line`, `d3.scaleBand` for the x-axis, and `d3.scaleLinear` for the y-axis. Title and axis labels are added via SVG `<text>`, while tick marks come from `d3.axisBottom` and `d3.axisLeft`. The chart, styled with a steelblue stroke and 40px axis text, demonstrates a basic line chart with categorical year positioning.

Loading thumbnail…

Fork of D3.js Line Chart

This bar chart displays the Crime Index for various countries, ordered alphabetically along the x-axis with the index value on the y-axis. The visualization uses an SVG rendering approach within the D3.js framework, employing `d3.scaleBand` for the categorical axis and `d3.scaleLinear` for the numerical axis. The code creates a single bar per country, colored steelblue, with axis labels generated via `d3.axisBottom` and `d3.axisLeft`. The data originates from a CSV file loaded using `d3.csv`.

Loading thumbnail…

Fork of Area Death's

This visualization displays the Crime Index across different countries using an area chart, with countries on the x-axis and crime index values on the y-axis. The code uses D3 v5 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.area` with `curveBasis` to render the smooth filled path in SVG. Data is loaded from a CSV via `d3.csv` and converted from strings to numbers and dates. The chart includes labeled axes, grid lines, and a red title, with orange fill styling applied through CSS.

Loading thumbnail…

Fork of ICE-7 Line Chart

This line chart displays crime indices across different countries, with each country plotted along the x-axis based on a date-converted value and crime index on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to render an SVG path with gridlines, axis labels, and a title. Data is loaded as CSV from a GitHub gist, parsed, and converted so country names become date objects, while crime indices are parsed as numbers. The chart is drawn with red strokes and styled via an external stylesheet.

Loading thumbnail…

Fork of Line_Stroke_Death

This line chart displays the Crime Index for various countries using an orange, curved line. The visualization is built with D3 v5, using `scaleLinear`, `scaleTime`, and `line` with `curveBasis` to generate the path. Axes are rendered with `axisBottom` and `axisLeft`, and data is loaded via `csv` from a GitHub gist linked in the code. The chart includes labeled axes for Country and Crime_Index, with a title, and uses an SVG rendering approach within a fixed 960x500 viewport.

Loading thumbnail…

Fork of D3.js Line Chart

This visualization displays customer counts per year from a small CSV dataset using a line chart. The D3.js v7 code loads the data with `d3.csv`, then applies a `scaleBand` for the x-axis and `scaleLinear` for the y-axis. The line is drawn with the `d3.line` path generator, using an SVG rendering approach within a designated chart container. The chart includes labeled axes for "Year" and "customers", with styling applied through a separate CSS file.

Loading thumbnail…

Fork of D3.js Line Chart

This visualization displays customer counts per year from a small CSV dataset using a line chart. The D3.js v7 code loads the data with `d3.csv`, then applies a `scaleBand` for the x-axis and `scaleLinear` for the y-axis. The line is drawn with the `d3.line` path generator, using an SVG rendering approach within a designated chart container. The chart includes labeled axes for "Year" and "customers", with styling applied through a separate CSS file.

Loading thumbnail…

ICE 7 Pie chart

This example visualizes the Crime Index for the top ten countries using a pie chart, with each slice sized by the country’s Crime Index percentage and colored via a categorical scale. The chart renders as SVG, with a legend listing each country, its color swatch, and its corresponding percentage value. Built with React and D3 v5, the code loads CSV data from a GitHub gist, sorts it in descending order, and slices the top ten entries. It employs d3.pie, d3.arc, d3.scaleOrdinal, and d3.schemeCategory10 for layout and coloring, with mouseover logging to the console.

Loading thumbnail…

Fork of Pie Chart

This example displays the basic cost of Netflix for the top ten countries by cost-of-living index, using a pie chart with a legend that lists each country and its corresponding cost in dollars. The chart is rendered with SVG via React, using D3 v5 methods such as `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` to generate the segments and colors. Data is loaded from a CSV file hosted on GitHub Gist, then sorted and filtered before rendering. Hovering over a segment logs the cost value to the console.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

A pie chart displays the top 10 countries by deaths in 2020 from air pollution, with each slice colored and labeled with the death count in thousands. The chart uses d3.pie and d3.arc to generate segments, and d3.scaleOrdinal assigns colors from a predefined array. Legend entries pair country names with values. Data is loaded as CSV from a GitHub gist, and d3.format is used to abbreviate numbers. The SVG renders text labels via arc.centroid, with static sizing rather than animation.

Loading thumbnail…

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

This visualization is a pie chart showing countries and their cost of living, specifically displaying the annual income for each profession. The chart uses a custom color palette and includes a legend that pairs each colored segment with the profession name and its formatted income value. The code fetches CSV data from a GitHub Gist and renders the chart as an SVG using the D3.js library, specifically leveraging `d3.csv`, `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format`. The chart is drawn within a 960x500 pixel SVG canvas.

Loading thumbnail…

Fork of Pie Chart

This pie chart visualizes the basic subscription cost of Netflix across ten countries, with each slice’s size and color mapped to the numeric cost value and a legend listing country names and their corresponding prices in dollars. The chart renders as an SVG using D3 v5’s `pie`, `arc`, and `scaleOrdinal` functions, with data loaded from a CSV via `d3.csv` and sorted descending before rendering. Interactive mouseover events log the basic cost to the console, while custom text elements style the legend and title.

Loading thumbnail…

Fork of Fork of Pie Chart

This pie chart visualizes the basic cost of Netflix subscriptions across ten countries, using a dataset loaded from a CSV file. The chart renders as an SVG with color-coded segments and a legend listing each country alongside its corresponding price. Built with React and D3 v5, it uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the slices and colors, while mouseover events log data to the console. The legend displays country names and values formatted with a custom number format.

Loading thumbnail…

Fork of Pie Chart

This pie chart visualizes the basic subscription cost of Netflix across ten countries, with each slice’s size and color mapped to the numeric cost value and a legend listing country names and their corresponding prices in dollars. The chart renders as an SVG using D3 v5’s `pie`, `arc`, and `scaleOrdinal` functions, with data loaded from a CSV via `d3.csv` and sorted descending before rendering. Interactive mouseover events log the basic cost to the console, while custom text elements style the legend and title.

Loading thumbnail…

Fork of Pie Chart

This pie chart visualizes the basic subscription cost of Netflix across ten countries, with each slice’s size and color mapped to the numeric cost value and a legend listing country names and their corresponding prices in dollars. The chart renders as an SVG using D3 v5’s `pie`, `arc`, and `scaleOrdinal` functions, with data loaded from a CSV via `d3.csv` and sorted descending before rendering. Interactive mouseover events log the basic cost to the console, while custom text elements style the legend and title.

Loading thumbnail…

Fork of Fork of Pie Chart

This pie chart visualizes the basic cost of Netflix subscriptions across ten countries, using a dataset loaded from a CSV file. The chart renders as an SVG with color-coded segments and a legend listing each country alongside its corresponding price. Built with React and D3 v5, it uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the slices and colors, while mouseover events log data to the console. The legend displays country names and values formatted with a custom number format.

Loading thumbnail…

Fork of Pie Chart

This pie chart visualizes the basic subscription cost of Netflix across ten countries, with each slice’s size and color mapped to the numeric cost value and a legend listing country names and their corresponding prices in dollars. The chart renders as an SVG using D3 v5’s `pie`, `arc`, and `scaleOrdinal` functions, with data loaded from a CSV via `d3.csv` and sorted descending before rendering. Interactive mouseover events log the basic cost to the console, while custom text elements style the legend and title.

Loading thumbnail…

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

This example presents a pie chart depicting the top 10 countries with the highest deaths in 2020 attributed to air pollution. The visualization uses D3 v5’s `pie` and `arc` generators to create the chart segments, while `scaleOrdinal` assigns colors to each slice. Data is fetched asynchronously from a CSV using the `csv` function, and a legend is rendered with rectangles and text to label each segment. The SVG output is generated entirely with D3’s selection and data-join methods, with tick formatting handled by `format`.

Loading thumbnail…

Fork of Pie Chart

This visualization presents a pie chart of the basic monthly costs of Netflix subscriptions across ten countries, ranked from highest to lowest. The chart uses a simple SVG-based rendering with D3.js to generate the pie slices and a corresponding legend. D3’s `pie`, `arc`, and `scaleOrdinal` functions are used for the chart layout and color scheme. The data is loaded from a CSV file via `d3.csv`, and each slice displays the cost in dollars, with country labels and values shown in the legend.

Loading thumbnail…

Fork of Pie Chart

This pie chart visualizes the basic subscription cost of Netflix across ten countries, with each slice’s size and color mapped to the numeric cost value and a legend listing country names and their corresponding prices in dollars. The chart renders as an SVG using D3 v5’s `pie`, `arc`, and `scaleOrdinal` functions, with data loaded from a CSV via `d3.csv` and sorted descending before rendering. Interactive mouseover events log the basic cost to the console, while custom text elements style the legend and title.

Loading thumbnail…

Sai Nikitha ICE 7-1 Reusable Scatter Plot

This reusable scatter plot visualizes the Iris Dataset, encoding species (setosa, versicolor, virginica) with distinct colors and SVG symbol shapes. The chart dynamically cycles its x-axis through four quantitative attributes every ten seconds with animated transitions. Built with D3 v6, it uses `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and symbol generators, while a reusable `scatterPlot` factory pattern enables parameterized configuration of dimensions, margins, and data accessors.

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes while coloring each point by species (setosa, versicolor, or virginica). It uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to position and label the points, with SVG circles drawn via `selectAll` and `join`. The data loads from a CSV using `d3.csv`, and the viewport fills the browser window. The code also applies an unusual `rx` and `ry` attribute to each circle, though the fixed radius of 5 overrides their visual effect.

Loading thumbnail…

ICE 7 Reusable Scatter Plot.

This example demonstrates a reusable scatter plot component built with D3.js and React, visualizing the Iris dataset. The plot cycles through different feature combinations on the x-axis (petal width, sepal width, petal length, sepal length) every few seconds, with animated transitions updating the axes and circles. Points are colored by species (setosa, versicolor, virginica) using a custom color mapping, and a legend displays the species labels alongside their corresponding colors. The visualization uses D3 scales, axes, and SVG rendering, with the reusable `scatterPlot` function managing the plot structure and update logic.

Loading thumbnail…

Sai Nikitha ICE 7 Reusable Scatter Plot.

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal dimensions with each species color-coded and shape-coded. Built as a reusable chart using D3 v6, it implements a custom `scatterPlot` factory function with configurable accessors and scales. The visualization cycles through different feature pairs on the x-axis every few seconds using `setInterval`, animating transitions between four variable combinations. SVG circles are appended with distinct colors per species, while the reusable chart structure leverages `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` to render axes and categorical encoding.

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example visualizes the classic Iris Dataset, mapping petal width and sepal length to a scatter plot’s x and y axes. Each species is represented by a distinct symbol, chosen via an ordinal scale applied to the categorical data. The chart is built with D3’s `scaleLinear`, `axisLeft`, `axisBottom`, and `symbol` APIs. The reusable `scatterPlot` custom function encapsulates the chart’s configuration, including dimensions, margins, and symbol size, and renders the result as an SVG in a vanilla HTML page.

Loading thumbnail…

Fork of ICE-7 Reusable Scatter Plot

This scatter plot displays the Iris dataset, mapping petal width along the x-axis and sepal length along the y-axis. Each flower species is represented by a distinct SVG symbol, rendered using D3’s `scaleOrdinal`, `symbol`, and `symbolGenerator`. The chart reads CSV data asynchronously via `d3.csv` and builds axes with `axisLeft` and `axisBottom`. It follows a reusable chart pattern, exposing configuration methods like `.width()`, `.height()`, and `.margin()` for customization. The visualization uses D3 v6 and is styled with the Share Tech font in SVG.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This visualization presents a scatter plot of the Palmer Penguins dataset, mapping flipper length against body mass while color-coding points by species (Adelie, Gentoo, and Chinstrap). The SVG rendering uses D3 v5’s `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to parse data, create scales, and draw axes. Each data point is a circle with a radius of 5 pixels, and the code also includes labels for both axes and a central title.

Loading thumbnail…

Fork of ICE 7-1 Reusable Scatter Plot

This reusable scatter plot visualizes the Iris dataset, mapping petal width against sepal length with points colored and shaped by species—setosa, versicolor, and virginica. Built with D3 v6, it uses scaleLinear, scaleOrdinal, axisLeft, axisBottom, and symbol generators to render SVG marks. The axes dynamically cycle through different measurement columns every ten seconds via setInterval, updating the chart through a reusable closure-based chart function that returns getter and setter accessors.

Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset, cycling through different feature pairings on the x-axis every few seconds. Points are color-coded by species (setosa, versicolor, and virginica), with a legend and axis labels updating dynamically. Built with D3 v6 and React, the visualization uses `d3.csv` to load data, `scaleLinear` and `axisBottom`/`axisLeft` for scales and axes, and `setInterval` to animate transitions between sepal and petal measurements. SVG circles render the data, while CSS styling applies a custom font.

Loading thumbnail…

Fork of Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris dataset, mapping petal width and sepal length on the x and y axes, with each species represented by a distinct D3 symbol shape. The built-in axes provide scale context, and the plot adapts to the window size. It uses D3's `scaleLinear` for positioning, `scaleOrdinal` to assign symbols from the `symbols` set, and `symbol()` to generate the paths for each data point. The code loads the dataset via `csv` and applies the reusable scatter plot module through a chained `.call()` method.

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example visualizes the classic Iris Dataset, mapping petal width and sepal length to a scatter plot’s x and y axes. Each species is represented by a distinct symbol, chosen via an ordinal scale applied to the categorical data. The chart is built with D3’s `scaleLinear`, `axisLeft`, `axisBottom`, and `symbol` APIs. The reusable `scatterPlot` custom function encapsulates the chart’s configuration, including dimensions, margins, and symbol size, and renders the result as an SVG in a vanilla HTML page.

Loading thumbnail…

Fork of Scatter Plot with Color

A scatter plot displays the Iris Dataset, mapping sepal length on the x-axis and petal length on the y-axis. Points are colored by species using a categorical color scale with a legend. The visualization uses d3.csvParse for data loading, d3.scaleLinear and d3.scaleOrdinal for scaling, and d3.axisBottom and d3.axisLeft for axes.

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example visualizes the classic Iris Dataset, mapping petal width and sepal length to a scatter plot’s x and y axes. Each species is represented by a distinct symbol, chosen via an ordinal scale applied to the categorical data. The chart is built with D3’s `scaleLinear`, `axisLeft`, `axisBottom`, and `symbol` APIs. The reusable `scatterPlot` custom function encapsulates the chart’s configuration, including dimensions, margins, and symbol size, and renders the result as an SVG in a vanilla HTML page.

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris Dataset, mapping petal width to sepal length for individual flowers. It uses the d3.scaleLinear and d3.scaleOrdinal APIs to position points and assign distinct symbols to each species. The d3.symbol and d3.join methods render the SVG marks, with axes generated by d3.axisLeft and d3.axisBottom. The visualization demonstrates a reusable D3 module that accepts configuration for data, dimensions, margins, and symbol size.

Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset, cycling through different feature pairings on the x-axis every few seconds. Points are color-coded by species (setosa, versicolor, and virginica), with a legend and axis labels updating dynamically. Built with D3 v6 and React, the visualization uses `d3.csv` to load data, `scaleLinear` and `axisBottom`/`axisLeft` for scales and axes, and `setInterval` to animate transitions between sepal and petal measurements. SVG circles render the data, while CSS styling applies a custom font.

Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset, cycling through different feature pairings on the x-axis every few seconds. Points are color-coded by species (setosa, versicolor, and virginica), with a legend and axis labels updating dynamically. Built with D3 v6 and React, the visualization uses `d3.csv` to load data, `scaleLinear` and `axisBottom`/`axisLeft` for scales and axes, and `setInterval` to animate transitions between sepal and petal measurements. SVG circles render the data, while CSS styling applies a custom font.

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This fork of a reusable D3 scatter plot visualizes the Iris dataset, mapping petal width and sepal length along the x- and y-axes. It uses `d3.scaleOrdinal` and `d3.symbol` to assign distinct geometric symbols to each iris species, rendering them as SVG paths. The plot also includes `d3.axisLeft` and `d3.axisBottom` for labeled axes. The code is built as a modular `scatterPlot()` function with configurable accessors, demonstrating a reusable chart pattern in D3 v6.

Loading thumbnail…

Fork of Penguin Data

This visualization displays a scatter plot of penguin measurements, mapping flipper length on the x-axis against body mass on the y-axis. Each point is colored by species (Adelie, Gentoo, and Chinstrap) using a color switch function. The code loads data from a CSV file via `d3.csv`, then uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render the axes and circles. The SVG is appended to the body, with labels for the axes and title, using D3 v5 within a React framework.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes penguin measurements, showing body mass against flipper length for three species, distinguished by color. Each circle encodes additional dimensions through its radius and the culmen length and depth values. The visualization uses D3 v5’s `csv` loader, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data from a GitHub-hosted CSV to SVG circles. Custom tick fonts, axis labels, and a title styling enhance readability, while the plot resizes to the full window.

Loading thumbnail…

Sai Nikitha ICE 6

This visualization displays a horizontal bar chart comparing the cost of living index for fifteen countries, sourced from a CSV file loaded via d3.csv. The chart uses React with useState and useEffect to fetch and render the data as SVG rectangles, with scales created using d3.scaleBand and d3.scaleLinear. Axes are manually constructed by mapping tick values to text and line elements, without using d3.axisBottom or d3.axisLeft. The bars’ widths are proportional to each country’s index value, and the chart includes explicit margins and a black gridline for each x-axis tick.

Loading thumbnail…

ICE-6: My Dataset with React & D3

This example visualizes top-rated movies and their metascores using a React and D3.js setup. The page renders a dataset loaded from a CSV file hosted on GitHub Gist, displaying movie titles and their corresponding critic scores. The code imports D3’s `select` function from the `d3` module and uses it to manipulate the DOM, while a local ES6 module (`message.js`) demonstrates modular imports. D3 version 5.11.0 is loaded via UNPKG, and the visualization is embedded in a React-rendered `<div>` with styled HTML elements.

Loading thumbnail…

Fork of Hello VizHub

This example shows a horizontal bar chart of the top 15 movies by Meta score, displaying each film’s title along the y-axis and its score along the x-axis. The visualization uses React for component state and rendering, with D3 v5’s `scaleBand`, `scaleLinear`, `csv`, and `max` functions to load and scale data from a GitHub-hosted CSV. SVG rects are drawn inside a transformed group, with custom tick labels and gridlines generated manually rather than via D3 axes. The data loads asynchronously and defaults to a "Loading..." message until ready.

Loading thumbnail…

Untitled

This example shows a horizontal bar chart of the top 15 movies from an IMDB dataset, displaying their Meta scores. The React app loads CSV data with d3.csv, then uses d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. It renders SVG rectangles for each bar, with axes built manually using d3.ticks and tick labels drawn as SVG text elements.

Loading thumbnail…

ICE5

This page summarizes a student dataset by displaying its metadata as plain text, including file size in kilobytes, row count, and column count. The visualization uses D3.js (v7) to fetch the CSV data from a remote GitHub URL, calculates the metadata, and renders it into an HTML `<pre>` element. A modular D3 component, defined in `module.js`, appends a text element to an SVG canvas, although its interaction is minimal. The page's styling includes a custom background image and white headings for visual presentation.

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js! by kiran jyothi bodduluri - 11604571

This visualization demonstrates fundamental D3.js DOM manipulation by constructing a cartoon smiley face from primitive SVG shapes, including a circular head, eyes, pupils, nose, eyebrows, rectangular teeth, a mouth arc, and semi-transparent blush circles. The code uses a mix of `d3.select` and chained `.attr()` methods to create and position elements on an SVG canvas, with an `arc()` generator defining the nose and mouth paths. A static flower-like arc forms the nose, while the mouth is drawn as a curved path with a distinct inner radius. The `d3.v5` library manages the SVG rendering, and hardcoded pixel coordinates (e.g., 390, 150 for the eyes) position the facial features rather than data-driven layout.

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js! by kiran jyothi bodduluri - 11604571

This example demonstrates how to construct an expressive cartoon face using D3.js v5 and SVG, showing a yellow circle head with eyes, pupils, eyebrows, ears, a nose, a mouth with teeth, a beard, blush, and glasses. The code uses D3 selections and methods like `append`, `attr`, and the `arc` generator to create each facial feature. Positioned shapes such as circles, rectangles, and paths are added directly to the SVG canvas, with many features having hardcoded coordinates and styles defined in JavaScript.

Loading thumbnail…

Fork of D3 Face

A yellow face with black outlines, two eyes, and a frown is rendered in SVG and animated. The eyebrows move up and down through repeated transitions, while the mouth is drawn using an arc path. The code uses D3 v7’s `select`, `arc`, and chained `transition().duration()` methods, with React as the framework. All shapes are positioned via SVG attributes and transforms, centered in a 960×500 viewport.

Loading thumbnail…

Fork of Cat smiley

This example renders a stylized cat smiley face as an SVG with React and D3. The code uses D3's `arc` generator to construct the mouth, eyes, and ears, while the face and other features are drawn with basic SVG shapes like circles, ellipses, lines, and paths. The illustration combines a pink circular face, purple ears, red eyes with black pupils, and a black mouth, all positioned around a central coordinate system. React manages the component structure, and D3's arc API calculates the path data for the curved elements.

Loading thumbnail…

Fork of D3-1: Making a face

This example uses D3.js v7 to draw a cartoon face entirely with SVG shapes. It shows a yellow circle head with two black eyes, rectangular eyebrows, and a mouth created using the d3.arc path generator. The code selects the SVG element from the HTML, then appends and positions each shape using attributes like cx, cy, and r, with the arc function defining the mouth's inner and outer radii and angles.

Loading thumbnail…

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

A smiley face is constructed entirely with D3.js v5 SVG primitives, combining circles, rectangles, paths, and lines to form facial features like eyes, glasses, a nose, and a beard. The code demonstrates fundamental DOM manipulation by appending elements to the SVG canvas with chained `.attr()` calls, and uses `d3.arc` for the mouth and nose shapes, while positioning features with absolute and transformed coordinates. The face's eyebrows are static rectangles, and the rendered result is a fixed, non-animated SVG illustration built from hard-coded values.

Loading thumbnail…

Fork of funn face

This gallery example displays a stylized, gradient-filled face constructed from SVG shapes. The face is built by composing React components: a circular background, elliptical eyes, an arc-based mouth, and a set of teeth drawn with lines. The visualization leverages d3.v7’s `arc` generator to define the mouth’s path and uses a linear gradient defined in the SVG `defs` section. All geometry is parameterized through props, allowing for adjustable positioning and sizing of facial features.

Loading thumbnail…

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

A yellow smiley face with black features animates its eyebrows in a looping motion. The face is built from SVG elements, including circles for the eyes and an arc-generated path for the mouth. D3.js v5 handles DOM manipulation and transitions, using `select` to append elements and `transition().duration()` to move the eyebrows up and down. The example demonstrates fundamental D3 selections, attribute setting, and animation on a fixed 960x500 SVG canvas.

Loading thumbnail…

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

A green smiley face, rendered as SVG shapes, sits centered in the frame and animates its rectangular eyebrows up and down in a looping motion. The code uses D3.js v5 to select the SVG element, append circles for the eyes and face, and draw a mouth with the `arc` generator from the `d3` module. A two-stage `transition` chain, each lasting two seconds, moves the eyebrow group vertically.