N

nsatyaprakash22

@nsatyaprakash22·57 public vizzes

Loading thumbnail…

Fork of Graph

This interactive network graph visualizes a small social network of eight people, with node size representing the group and arrows indicating friendship connections. Built with D3 v6, the visualization uses the `d3.forceSimulation` API to apply force-directed layout, combining link, many-body, collision, and center forces. Users can drag nodes, which triggers the simulation's restart and target alpha adjustments. Node highlighting occurs on mouseover via the `classed` method, while SVG markers define arrowheads. The graph reads from a JSON file and renders entirely as an SVG, with a skyblue fill for all nodes.

Loading thumbnail…

Social Network Graph

This example visualizes a small social network of eight people and their friendship connections. Users can drag nodes around, with hover effects highlighting nodes in red. The graph uses D3 version 6’s `d3.forceSimulation` with force-link, force-many-body, force-collide, and force-center to position nodes and links, rendered as SVG circles and lines. Data comes from a local `data.json` file, and the code implements drag behavior and marker arrowheads for the directed edges.

Loading thumbnail…

Fork of Fork of Fork of ICE8 - Social Network Graph

This social network graph visualizes friendships among eight people using a force-directed layout with red circular nodes and labeled text. It uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes and edges. The D3 v6 code loads data from `data.json`, renders the graph as SVG with arrowhead markers on links, and supports drag interaction. Hovering highlights a node by turning its border green.

Loading thumbnail…

Fork of Fish Family Species

This interactive tree diagram visualizes the hierarchical classification of fish species, from cartilaginous fish like sharks and rays to bony fish including ray-finned and lobe-finned varieties. Using D3 version 3.5’s `d3.layout.tree` and `d3.svg.diagonal`, the visualization renders an SVG with animated transitions. Clicking nodes collapses or expands subtrees, with circles changing color from teal to lightsteelblue to indicate collapsed states. The data is hardcoded as a JSON array in the script, with node positions calculated based on depth and screen margins.

Loading thumbnail…

Fork of Fish Family Species

This interactive tree diagram visualizes the hierarchical classification of fish species, branching from a central "Fish" root into cartilaginous and bony categories, then further into specific families like sharks, rays, salmon, and trout. Built with React and D3.js, it uses `d3.layout.tree` and `d3.svg.diagonal` to render SVG nodes and orange links with animated transitions. Users can click on any node to collapse or expand its children, with nodes smoothly repositioning via `transition` over 750 milliseconds. The data is a static nested JavaScript object embedded in the code.

Loading thumbnail…

India Map Country

This example displays a map of India with its state boundaries, rendered as an SVG using D3.js. Each state is drawn as a sky-blue path with black strokes and labeled with its name. The visualization uses `d3.geoMercator()` projection with `projection.fitExtent()` to fit the map to the viewport, and state boundaries are converted from TopoJSON data using `topojson.feature`. Hovering over a state highlights it in orange via CSS, while state names are placed at path centroids with `d3.geoPath()`.

Loading thumbnail…

India Map Country

This example displays a choropleth map of Indian states, rendered as orange-highlighted SVG paths on hover. It uses d3.json to load a TopoJSON file of India’s administrative boundaries, converts it to GeoJSON via topojson.feature, and projects it with d3.geoMercator and fitExtent. The d3.geoPath generator draws each state, while state names are placed using path.centroid. The map fills the viewport with skyblue polygons and black strokes, and a bold title labels the visualization.

Loading thumbnail…

Fork of Fork of ICE8 USA Map

This example displays a choropleth map of India, highlighting the country's regional boundaries with a simple gray-and-black color scheme. It uses a custom `d3.geoAlbersIndia` projection to render the map from TopoJSON data loaded via the `india-atlas` package, while also drawing a separate India outline using `d3.geoMercator` and `world-atlas` data. The code leverages `d3.json`, `d3.geoPath`, `topojson.feature`, and `d3.scaleOrdinal` to process and visualize the geographic shapes, with CSS hover states that turn regions red.

Loading thumbnail…

Fork of Fork of map exemple

This example displays a choropleth world map where each country is colored according to its population estimate, ranging from red to dark maroon. The visualization uses d3.geoMercator for projection, d3.geoPath for rendering SVG paths, and topojson.feature to convert TopoJSON data from the World Atlas 50m dataset. Population values are loaded from a TSV file and mapped to colors via d3.scaleLinear. Hovering highlights countries in purple, and d3.zoom enables pan and zoom interactions.

Loading thumbnail…

world map with the world Topojson data

This example displays a world map rendered as white countries with black borders on a green background. It uses D3 v5 and TopoJSON to load world-atlas data from a CDN, then projects the geographic features with a Natural Earth projection via `geoNaturalEarth1()` and draws them using `geoPath()`. The `feature()` function from TopoJSON converts the TopoJSON topology into GeoJSON for binding to SVG paths.

Loading thumbnail…

world map with the world Topojson data

This example displays a world map using D3 version 5 and the TopoJSON library. It renders each country as a white SVG path with black outlines on a green background. The map uses the `d3.geoNaturalEarth1` projection and the `d3.geoPath` API to draw geographic features. Country boundaries come from the world-atlas countries-110m.json dataset, processed with TopoJSON's `feature` function.

Loading thumbnail…

Fork of world map with the world Topojson data.

This example displays a world map rendered as SVG paths, with each country filled in white and outlined in black against a green background. The visualization uses the Natural Earth projection via `geoNaturalEarth1` and constructs the map geometry with `geoPath` and the TopoJSON `feature` method. Country boundaries come from the world-atlas dataset’s countries-110m.json file, loaded asynchronously using D3’s `json` function before appending the path elements to the SVG canvas.

Loading thumbnail…

world map with the world Topojson data.

This visualization displays a world map using D3 version 5, rendering country boundaries as white-filled paths with black strokes on a green background. The map uses the natural Earth projection via `geoNaturalEarth1` and projects geographic coordinates with `d3.geoPath`. Country geometries come from the world-atlas TopoJSON dataset, loaded through the `topojson` library’s `feature` method. The SVG output is fixed at 990 by 485 pixels, and the code asynchronously fetches the JSON data before appending each country path to the chart.

Loading thumbnail…

Fork of world assignment

This visualization displays a world map using a natural Earth projection, with each country rendered as a beige SVG path outlined in black against a sky-blue background. It fetches geographic data from the world-atlas package’s countries-110m.json endpoint, then projects the features using `d3.geoPath` with `d3.geoNaturalEarth1`. The code utilizes TopoJSON’s `feature` function to extract country boundaries and appends them as SVG path elements, styled via the `.country` CSS class. The rendering is driven by React and relies on D3 v5 for all geographic transformations and SVG generation.

Loading thumbnail…

Fork of Gustoća stanovništva Republike Hrvatske

A choropleth map of Croatian counties displays population density using a red sequential color scale, with a legend categorizing density ranges and hover tooltips showing county name, population, and density. The visualization loads TopoJSON data from `Croatia.json` and renders it as SVG paths using `d3.geoPath` with a `geoMercator` projection. The code styles each county by its density class via `d3.scaleLinear` and `schemeReds[9]`, while `d3.scaleOrdinal` powers the legend; the map lacks zoom interactivity despite commented-out `d3.zoom` code.

Loading thumbnail…

Fork of 2015 Internet Users World Map

This interactive map visualizes 2015 internet usage per 100 people across world countries, using a green color scale to encode data from a Kaggle dataset. Hovering over a country reveals its exact percentage via a tooltip, while users can zoom and pan using d3.zoom. The map is drawn with d3.geoPath and geoNaturalEarth1, with country boundaries from a TopoJSON world atlas, and includes a color legend built with d3.scaleOrdinal.

Loading thumbnail…

Fork of ICE-7 Area Chart

This area chart visualizes Netflix subscriber growth from 2003 to 2021, sourced from a CSV file fetched via `d3.csv`. The chart uses `d3.scaleTime` and `d3.scaleLinear` to map years and subscriber counts, with `d3.area` and `d3.line` generators rendering smooth curves via `d3.curveBasis`. SVG output includes labeled axes, grid lines via tick marks, and an orange filled area beneath the black line. The React-based code imports D3 functions directly and applies CSS styling for fonts and colors.

Loading thumbnail…

ICE-7 Area Chart

This area chart visualizes Netflix subscriber counts from 2003 to 2021. The code uses D3 v5 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.area` with a `curveBasis` interpolation, rendering the chart as SVG. It loads CSV data from a GitHub gist, formats numeric values, and applies axis ticks with custom labels. The chart combines a black line path and an orange area path beneath it, with red axis labels and gridlines.

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This area chart visualizes the number of US university students from 2000 to 2008, using a blue filled region beneath a black curved line. The code employs d3.line and d3.area generators with curveBasis smoothing, alongside d3.scaleLinear for both axes and d3.axisBottom/axisLeft for ticks. Data is loaded via d3.csv from a GitHub Gist, and the SVG is rendered with axis labels and gridlines.

Loading thumbnail…

Fork of ICE - 7 Area Chart Maanas Katta

This fork of ICE—7 Area Chart visualizes the opening bid price of EURUSD across 2021, using an area chart to emphasize the price trend over time. The SVG-based graphic, rendered with D3 v5, smooths the line and area using curveBasis. The code applies d3.scaleTime and d3.scaleLinear for axes, with d3.axisBottom and d3.axisLeft for ticks, and formats labels via d3.format and d3.timeFormat. Data is pulled from a CSV hosted on GitHub, with date and price values parsed before drawing the area and line paths.

Loading thumbnail…

Fork of D3 Starter

This interactive visualization displays Netflix subscriber growth over time using an area chart with a smooth basis curve. The chart, built with D3.js v7, loads CSV data from a GitHub gist and renders year on the x-axis and subscriber counts on the y-axis. The code demonstrates creating scales with `scaleTime` and `scaleLinear`, generating axes with `axisBottom` and `axisLeft`, and drawing the line and area paths using `line`, `area`, and `curveBasis`. Grid lines, bold axis labels, and a yellow filled area highlight the trend.

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This area chart visualizes the number of US university students from 2000 to 2008, using a blue filled region beneath a black curved line. The code employs d3.line and d3.area generators with curveBasis smoothing, alongside d3.scaleLinear for both axes and d3.axisBottom/axisLeft for ticks. Data is loaded via d3.csv from a GitHub Gist, and the SVG is rendered with axis labels and gridlines.

Loading thumbnail…

ICE 7 Line Chart

This line chart visualizes Netflix subscriber counts from 2003 to 2021, with years on the x-axis and subscriber numbers on the y-axis. The SVG chart uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to render the path and axes. Data is loaded via `csv` from a GitHub gist, with year values parsed as dates and subscriber counts converted to numbers. The chart includes labeled axes, a title, and a blue stroke for the line path.

Loading thumbnail…

Fork of ICE-7 Line Chart

This fork of the ICE-7 line chart visualizes the cost of sales from 2000 to 2013, plotting yearly values as a single red line. It uses d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.line to generate the path, with d3.axisBottom and d3.axisLeft rendering labeled axes. The chart loads CSV data from a GitHub gist, parses the year and cost fields, and renders an SVG within a centered container. Axes include gridlines via tickSize, and the code uses D3 v5.

Loading thumbnail…

Fork of Fork of Line Chart

This example visualizes Netflix subscriber areas by quarter using a single red line chart rendered as an SVG. The code uses d3.csv to load data from a GitHub gist and maps quarterly values to a time-based x-axis and a linear y-axis. d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line generate the axes and path, with gridlines styled via tickSize. The visualization includes labeled axes and a title, with the line path styled through CSS.

Loading thumbnail…

ICE7_PIE CHART

This pie chart visualizes the top 10 states in India with the highest accident-related deaths, sized by the number of fatalities. The D3 v5 code loads data from a CSV URL, uses `d3.pie` and `d3.arc` to generate the chart’s segments, and applies `d3.scaleOrdinal` for color mapping. Each slice is labeled with its death count, and a custom legend lists the state names alongside their corresponding values. The visualization is rendered as an SVG element with a 960x500 canvas.

Loading thumbnail…

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

This visualization presents a pie chart ranking the top 10 Indian states by accident-related deaths. Each slice’s size encodes the death count, with section labels and a legend displaying both the state name and its corresponding value. The code loads CSV data from a GitHub Gist using `d3.csv`, then employs `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the chart’s arcs and color mapping. The SVG canvas is populated with `path` elements for slices, `text` elements for labels, and a separate legend group, all driven by D3 v5.

Loading thumbnail…

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

This visualization displays the top 10 countries by air pollution-related deaths in 2020, using a donut-style pie chart where each segment’s arc length corresponds to annual income data from a CSV file. The code fetches data from a GitHub Gist, parses it with `d3.csv`, and renders the chart using `d3.pie` and `d3.arc` within an SVG canvas. Each slice is colored via `d3.scaleOrdinal` with a predefined palette, and a legend to the right pairs color swatches with profession names and formatted income values (in thousands). The rendering is driven by D3 v5, with custom styling applied through CSS classes for text and legend elements.

Loading thumbnail…

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

This visualization displays the top 10 countries by air pollution-related deaths in 2020, using a donut-style pie chart where each segment’s arc length corresponds to annual income data from a CSV file. The code fetches data from a GitHub Gist, parses it with `d3.csv`, and renders the chart using `d3.pie` and `d3.arc` within an SVG canvas. Each slice is colored via `d3.scaleOrdinal` with a predefined palette, and a legend to the right pairs color swatches with profession names and formatted income values (in thousands). The rendering is driven by D3 v5, with custom styling applied through CSS classes for text and legend elements.

Loading thumbnail…

ICE - 7 Pie Chart Maanas Katta

This pie chart visualizes the top 10 countries by deaths from air pollution in 2020, with each slice proportionally representing the death count and labeled in thousands. The visualization uses D3 v5’s `pie` and `arc` generators to compute and render the segments, with `scaleOrdinal` mapping country names to distinct colors. A legend on the right pairs each color swatch with the country name and its corresponding value. Data is loaded asynchronously from a CSV hosted on GitHub using D3’s `csv` function, and the chart is rendered as SVG within an HTML page.

Loading thumbnail…

Fork of Piechart ICE7

This visualization presents a pie chart showing the number of vehicles seized across different American states, with each slice labeled with its count in thousands and accompanied by a color-coded legend. The chart uses D3 v5 to load CSV data from a GitHub repository and render the pie with `d3.pie` and `d3.arc`, mapping state values to a categorical color scale. Text labels are positioned using arc centroids, and the legend lists each state with its corresponding value, making the distribution of seizures immediately comparable.

Loading thumbnail…

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

This visualization displays the top 10 countries by air pollution-related deaths in 2020, using a donut-style pie chart where each segment’s arc length corresponds to annual income data from a CSV file. The code fetches data from a GitHub Gist, parses it with `d3.csv`, and renders the chart using `d3.pie` and `d3.arc` within an SVG canvas. Each slice is colored via `d3.scaleOrdinal` with a predefined palette, and a legend to the right pairs color swatches with profession names and formatted income values (in thousands). The rendering is driven by D3 v5, with custom styling applied through CSS classes for text and legend elements.

Loading thumbnail…

Fork of Fork of Pie Chart

This pie chart visualizes the protein content in grams for different cereals, using a dataset loaded from a GitHub-hosted CSV file via d3.csv. The chart encodes categorical values with d3.pie and d3.arc paths, while a d3.scaleOrdinal color scheme distinguishes each cereal across nine distinct hues. A legend rendered alongside the chart pairs each cereal’s name with its numerical protein value, formatted using d3.format. The visualization is built entirely with SVG elements in D3 v5, with the chart centered in an HTML page and styled via an external stylesheet.

Loading thumbnail…

Reusable IRIS scatter plot with different symbols

This scatter plot visualizes the Iris dataset, mapping petal width to sepal length, with each species represented by a distinct symbol and color from D3’s ordinal scales. The reusable `scatterPlot` component, configured via method chaining, handles axis generation, symbol rendering, and a legend. It uses D3’s `scaleLinear`, `scaleOrdinal`, `symbol`, and `axis` APIs, with data loaded from a CSV URL. The SVG output is sized to the window, and the legend displays species names with corresponding symbols.

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example visualizes the Iris dataset as a scatter plot, encoding petal width and sepal length on the x- and y-axes. Different species are distinguished using D3 symbols (circles, crosses, and diamonds) with red, green, and blue fills. The code builds the chart with a reusable `scatterPlot` function that leverages d3.scaleLinear, d3.scaleOrdinal, d3.symbol, and d3.axisLeft/axisBottom. A legend shows each species with its corresponding symbol and color. The SVG rendering and margins are configured in the main script.

Loading thumbnail…

Fork of Fork of Scatter Plot with Color

This scatter plot visualizes the Iris dataset, displaying sepal length on the x-axis and petal length on the y-axis. Each point is colored according to the species of iris flower, with a color legend labeling the three categories. The visualization uses D3.js version 7.6.1, leveraging the library's selection join operation, linear and ordinal scales, and the ColorBrewer categorical color scheme. Custom modules handle axis generation and the color legend, while data is loaded from a CSV file.

Loading thumbnail…

Fork of Fork of Scatter Plot with Color

This scatter plot visualizes the Iris dataset, displaying sepal length on the x-axis and petal length on the y-axis. Each point is colored according to the species of iris flower, with a color legend labeling the three categories. The visualization uses D3.js version 7.6.1, leveraging the library's selection join operation, linear and ordinal scales, and the ColorBrewer categorical color scheme. Custom modules handle axis generation and the color legend, while data is loaded from a CSV file.

Loading thumbnail…

Fork of ICE-7 Reusable Scatter Plot

This example presents the classic Iris dataset as an interactive scatter plot, visualizing petal width against sepal length with points colored by species. It demonstrates a reusable chart architecture using D3 v6, where a factory function returns a customizable scatter plot configured through method chaining. The plot uses D3 scales, axes, and symbol generators to render SVG paths, with data loaded asynchronously via `d3.csv` from a GitHub Gist. The code highlights modular design patterns for building flexible, reusable visualization components.

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, with the x-axis cycling through different flower measurements every two seconds while the y-axis remains fixed to sepal length. The visualization uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, along with SVG circle marks and animated transitions via `setInterval`. The axis scales recalculate when the selected column changes, smoothly updating the points and tick marks to reveal correlations between different iris features.

Loading thumbnail…

Fork of Fork of Scatter Plot with Color

This scatter plot visualizes the Iris dataset, displaying sepal length on the x-axis and petal length on the y-axis. Each point is colored according to the species of iris flower, with a color legend labeling the three categories. The visualization uses D3.js version 7.6.1, leveraging the library's selection join operation, linear and ordinal scales, and the ColorBrewer categorical color scheme. Custom modules handle axis generation and the color legend, while data is loaded from a CSV file.

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example displays the Iris Dataset as a scatter plot, mapping petal width and sepal length to x and y positions while encoding species with distinct D3 symbols. The code uses d3.csv for data loading, d3.scaleLinear and d3.scaleOrdinal for scales, and the d3.symbol API to generate path shapes. Axes are rendered with d3.axisLeft and d3.axisBottom. The visualization is a reusable module, created via a custom scatterPlot function that is called once within an SVG container sized to the viewport.

Loading thumbnail…

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

This bar chart visualizes the basic cost of Netflix subscriptions across fifteen countries, using horizontal bars to show each country's SCORE value. Built with React and D3 v5, the code loads CSV data from a GitHub gist and renders the visualization as an SVG. It uses `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, with manually drawn tick marks and axis labels. Bar rectangles are generated directly from the data, mapping each country's title to the y-coordinate and its score to the bar width.

Loading thumbnail…

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

This visualization displays the basic cost of Netflix in various countries as a horizontal bar chart, rendering twenty data points from a CSV file. It leverages React for component state management and conditional rendering, while D3 v5 functions like `scaleBand`, `scaleLinear`, and `max` handle chart scaling and data aggregation. The SVG output includes axis ticks and labels, with each bar’s length representing the cost value, and uses D3’s `csv` parser to load the remote dataset.

Loading thumbnail…

Fork of ICE6 - Penguin Dataset

This example displays a scatter plot of penguin measurements, using flipper length and body mass for the x- and y-axes, while encoding species by color (orange, green, blue). It additionally maps bill length and bill depth as redundant visual channels via the circle’s `rx` and `ry` attributes, creating elliptical markers. The code loads CSV data from a GitHub gist using `d3.csv` with a custom row parser, then renders SVG circles with D3 v5’s selection joins and `scaleLinear`, `axisLeft`, and `axisBottom` APIs. Titles and axis labels are added as SVG text elements.

Loading thumbnail…

Fork of ICE-6 (penguin dataset)

A scatter plot of the penguin dataset shows body mass versus flipper length, with each point colored by species (Adelie, Gentoo, or Chinstrap). The plot also encodes bill length and bill depth through each circle’s horizontal and vertical radii, blurring the boundary between scatter and bubble chart. The visualization is built with D3 v5, using `d3.csv`, `d3.scaleLinear`, and `d3.axisLeft`/`axisBottom` to render an SVG. Data is loaded from a GitHub-hosted CSV, with axes labeled and a title included.

Loading thumbnail…

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

This example displays the top 20 movies from an IMDB dataset as a horizontal bar chart, where bar length encodes movie rank and each bar is labeled with its numeric rank. Built with React for component state and rendering, it uses D3 v5 APIs such as `csv` for data loading, `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and manual SVG elements for axes and grid lines. The chart updates reactively after the CSV is fetched asynchronously.

Loading thumbnail…

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

This example shows the cost of Netflix in 15 different countries as a horizontal bar chart, ranked on the y-axis, with bar lengths encoding the movie_name value. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map data to SVG rectangles, with axes drawn manually via `.ticks()`. The data comes from a CSV file loaded using `d3.csv`, and the chart renders bars and tick labels entirely as SVG elements within a React component.

Loading thumbnail…

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

A horizontal bar chart displays the basic cost of Netflix subscriptions across fifteen countries, with country names on the y-axis and cost values on the x-axis. Using React hooks (`useState`, `useEffect`) to manage data loading, the code fetches a CSV file via `d3.csv`, then renders SVG rectangles scaled with `d3.scaleBand` and `d3.scaleLinear`. Axis ticks are manually generated, and the visualization uses blue vertical gridlines with labeled tick values.

Loading thumbnail…

Student Performance in exam ICE5

This example displays metadata about a student performance dataset, including file size, row count, and column count, on a page with a custom background image. The page presents a clickable link to the raw CSV data and shows the dataset’s summary information in a styled preformatted text block. The visualization uses D3.js (d3.v7) to fetch the CSV via `d3.csv` and computes the metadata with `d3.csvFormat`. The layout is styled with CSS, including a background image and centered headings, and does not render any charts or graphs.

Loading thumbnail…

ICE5_ASSIGNMENT

This example displays a webpage titled “WELCOME TO UNT STUDENT INFO” that introduces a student records dataset and provides a hyperlink to view the information. The page also fetches a CSV file of customer credit card data using d3.csv, then computes and displays file size in kilobytes, row count, and column count as metadata. The code uses D3 v7 to load and format the CSV data, and writes the resulting message into a pre element via textContent. The visualization is minimal, focusing on data summary rather than graphical representation.

Loading thumbnail…

Fork of HTML Starter

This example shows a simple HTML page displaying the text “Hello HTML!” centered in the browser window. The text is styled with a large font size using CSS, and the page itself contains no JavaScript logic. The rendering relies entirely on standard HTML markup and CSS rules, with no external libraries or data sources involved. It serves as a minimal demonstration of how to structure a basic webpage with inline styles in a single `index.html` file.

Loading thumbnail…

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

This example demonstrates DOM manipulation with D3.js by constructing a smiley face from SVG shapes, complete with a sky-blue head, eyes, nose, mouth, and ears. The most notable behavior is the animated movement of the eyebrows, which shift upward and then return to their original position over a two-second cycle. The code uses D3 v5 and the `select` and `append` functions to build the SVG structure, and it leverages chained `transition` calls to animate the eyebrows' transform attribute. The SVG canvas is 960 by 500 pixels, and the face is centered within it.

Loading thumbnail…

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

This visualization demonstrates basic D3.js DOM manipulation by rendering a smiling face with animated eyebrows that move up and down. The face includes a skyblue circular head, eyes, nose, and an arc-based mouth, all drawn as SVG elements. The code uses D3 v5 selections, `transition()` with a 2000-millisecond duration to animate the eyebrow group, and the `arc()` generator to create the mouth path.

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face composed of a sky-blue head, eyes, nostrils, a curved nose, and a mouth. An animated sequence moves the eyebrows up and down over two seconds using chained `transition` calls on a group element. The visualization relies on D3 v5 selection and `arc` APIs to build the SVG shapes and animate properties.

Loading thumbnail…

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

This animated SVG face shows a yellow circle with two eyes, eyebrows, and a mouth, and the eyebrows move up and down over time. The code uses D3 v5 to manipulate the DOM, appending SVG shapes and applying a chained `transition().duration(2000).attr('transform', ...)` to animate the eyebrow group’s vertical position. It imports `select` and `arc` from D3 to select the SVG element and generate the mouth’s path with an annular arc geometry.

Loading thumbnail…

Fork

A yellow smiley face with animated eyebrows is rendered in SVG using D3 v5. The code builds the face from primitive shapes—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—demonstrating DOM selection and manipulation via `d3.select` and `d3.append`. The eyebrows repeatedly shift vertically using a chained `transition().duration(2000)` sequence. All positioning relies on fixed numeric coordinates and transforms, with no external data source.

Loading thumbnail…

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

This animated SVG face shows a yellow circle with two eyes, eyebrows, and a mouth, and the eyebrows move up and down over time. The code uses D3 v5 to manipulate the DOM, appending SVG shapes and applying a chained `transition().duration(2000).attr('transform', ...)` to animate the eyebrow group’s vertical position. It imports `select` and `arc` from D3 to select the SVG element and generate the mouth’s path with an annular arc geometry.