Snapika

@Snapika·53 public vizzes

ICE 8 : Country Map

This example displays a map of Argentina’s administrative departments, colored by reported COVID-19 case counts. It uses a transverse Mercator projection via `d3.geoTransverseMercator` and renders geographic paths with `d3.geoPath`. A logarithmic color scale (`d3.scaleLog`) maps the case numbers to a teal fill. The map supports zooming through `d3.zoom`, and department shapes hover with a light blue highlight. Data is loaded as TopoJSON from a GitHub repository and drawn as SVG paths.

Apr 4, 2022

Loading thumbnail…

try Map)

This map shows the African country of Kazakhstan, rendered in brown with black borders on a light blue background. It uses D3 v5 and TopoJSON to load world-atlas country data from a CDN. The code applies the `geoAlbersUsa` projection with `geoPath` to convert geographic coordinates into SVG paths, filtering the dataset to display only Kazakhstan from the complete set of world countries.

Apr 4, 2022

Loading thumbnail…

Fork of US states map : with colorScale. One color for each country

A choropleth map of US states renders each state as a muted gray SVG path with thin dark borders, using an Albers USA projection. The visualization currently shows uncolored states, though the code defines a color scale with `d3.scaleOrdinal` and `schemeCategory10` for per-state coloring. Hovering any state turns it green via CSS. The map is built with `d3.geoPath`, TopoJSON state features, and the `geo-albers-usa-territories` projection, loading geographic data from the `us-atlas` package.

Apr 4, 2022

Loading thumbnail…

ICE8 - Social Network Graph

A social network graph visualizes connections between nine individuals in a group, with nodes representing people and directed arrows showing relationships. The graph uses a force-directed layout via d3.forceSimulation, applying charge, collision, and center forces to position nodes dynamically. Nodes are rendered as SVG circles with labels, and the simulation updates their positions on each tick. Data comes from a JSON file containing node IDs and group assignments, while links define directed edges. The visualization supports interactive dragging of nodes and highlights nodes on hover using CSS class changes. The implementation uses D3 v6 with SVG rendering.

Apr 4, 2022

Loading thumbnail…

ICE 8: My Family Tree

This example displays a family tree as a set of colored, animated circles linked by straight lines. The data is a small list of parent-child relationships. Using D3.js v6, the code applies a `d3.stratify()` layout to build a hierarchy, then renders it with a `d3.tree()` layout. Each generation is assigned a distinct color via a custom function, and circles and connecting paths are drawn to an SVG. A transition smoothly animates the initial state of the branches and nodes.

Apr 4, 2022

Loading thumbnail…

Fork of Network graph of Social Connections

This network graph displays social connections among seven individuals, with green links and cyan circular nodes labeled by name. The visualization uses an interactive force-directed layout, allowing nodes to be dragged and repositioned. The code relies on the D3 library (v4 with a v2 fallback), explicitly using `d3.layout.force()` for the physics simulation and `force.drag` for node interaction. SVG elements render the nodes and weighted links, with stroke widths reflecting the `weight` values from the JSON data source.

Apr 4, 2022

Loading thumbnail…

Fork of Network

This example visualizes a small network of characters from *Les Misérables*, colored by group and connected by a single link. Using D3.js v5, it loads data from a JSON file and applies a force-directed layout via `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`. Circles represent nodes in SVG, positioned dynamically on each simulation tick, while lines show edges with stroke width proportional to link value. Node colors come from a `d3.scaleOrdinal` with `d3.schemeCategory10`.

Apr 4, 2022

Loading thumbnail…

ICE 8 World Map

This example displays a world map using a natural Earth projection, rendering countries as white shapes with dark blue outlines against a light blue ocean sphere. It loads geographic data from the world-atlas TopoJSON dataset via `d3.json`, converts it to GeoJSON with TopoJSON’s `feature` function, and draws paths using `d3.geoPath` and `d3.geoNaturalEarth1`. The visualization is built with D3 v5 and rendered as SVG elements.

Apr 4, 2022

Loading thumbnail…

ICE 8 Network Graph

This example displays a small network of two main nodes and their connected child nodes, each labeled with a name and styled with distinct colors from a predefined palette. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter APIs to position the nodes, while SVG circles, lines, and text elements render the graph. Node data is generated in a separate JavaScript module, with forces applied through a tick event that updates the x and y coordinates of all elements automatically.

Apr 3, 2022

Loading thumbnail…

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

This example displays a world map with countries rendered as light green landmasses against a blue spherical background. The visualization uses a natural Earth projection to transform geographic coordinates into a flat SVG canvas. The code leverages D3.js v5 with `d3.geoPath` and `d3.geoNaturalEarth1` for projecting and drawing the map. Country boundaries are stroked in black with low opacity, while the data comes from the `world-atlas` package’s 110m resolution GeoJSON, loaded via `d3.json`. The rendering is entirely SVG-based with styling defined in CSS.

Apr 3, 2022

Loading thumbnail…

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

This example displays a world map rendered as SVG paths, with countries filled in light green against a blue spherical backdrop. It uses D3.js v5’s `geoPath` and `geoNaturalEarth1` projection to generate geographic outlines from the world-atlas TopoJSON dataset. The code also loads the TopoJSON library to extract country features, then appends each path to the SVG container. The visualization demonstrates a straightforward choropleth-style map without interactivity, emphasizing the projection and vector rendering pipeline.

Mar 31, 2022

Loading thumbnail…

Fork of map with legend

This example displays a choropleth map of Indian states, with each state’s color encoding its area value through a sequential rainbow scale. The map is rendered as SVG using React and D3. The code loads TopoJSON data for Indian states, converts it to GeoJSON with `topojson.feature`, and projects it with `geoMercator` and `d3.geoPath`. A `d3.scaleSequential` with `d3.interpolateRainbow` assigns colors based on the `AREA_` property, while the legend is prepared but not rendered.

Mar 31, 2022

Loading thumbnail…

Fork of Swedish map

This visualization displays the counties of Sweden as an SVG map, rendered with a Mercator projection fitted to the geographic bounds of the country. County boundaries appear in teal with lighter interior borders, created using the `geoPath` and `feature`/`mesh` APIs from D3 v5 and TopoJSON. The data comes from a simplified Swedish counties GeoJSON file, loaded asynchronously via `d3.json` and integrated into a React component structure. The map is static, showing only geographic outlines without additional data encodings.

Mar 31, 2022

Loading thumbnail…

Fork of Globe Zoom - Animate

This example visualizes nuclear explosion locations on a world map using a Mercator projection, with each explosion represented as a small circle and country boundaries drawn as lines. It uses React to manage component state and rendering, while D3 v3 APIs such as `d3.geoPath`, `d3.geoMercator`, and `d3.geoGraticule` generate the map geometry from TopoJSON world-atlas data. The nuclear explosion coordinates and names are loaded from a CSV file, and the visualization appears as static SVG elements without any animation.

Mar 31, 2022

Loading thumbnail…

Fork of world map w/ cities

A world map displays cities with populations exceeding 50,000, sized by population using a square root scale. The map uses a Natural Earth projection with a rotation offset, rendering land, graticules, geographic lines, and country boundaries as SVG paths via `d3.geoPath`. City data comes from Simplemaps, while country boundaries use World Atlas TopoJSON. An animated GIF pattern fills the land, and hovering over countries highlights them. Built with React and D3.

Mar 31, 2022

Loading thumbnail…

Fork of World Map

This visualization displays a world map using an orthographic projection, rendered as SVG within a React application. It shows landmasses in teal, country borders in black, and graticules on a light gray sphere. The code uses `geoOrthographic` and `geoPath` from d3 to project geographic features, while topojson’s `feature` and `mesh` functions process land and country boundary data from the world-atlas dataset. The map is static, with no interaction or animation.

Mar 31, 2022

Loading thumbnail…

Fork of Polished World Map

This example displays a world map illustrating country boundaries and interior borders derived from the World Atlas TopoJSON dataset. It employs D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` APIs to render the sphere, graticules, land masses, and interiors as SVG paths. The visualization uses React to manage data loading via `useData`, which fetches topology and computes features with the `topojson` library, while CSS styles apply a teal and gray color scheme to the map’s layers.

Mar 30, 2022

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This interactive scatter plot, built with D3 v6, visualizes the Iris dataset. It cycles through four feature combinations (sepal and petal dimensions) on the x-axis, updating every few seconds while the y-axis remains sepal length. Data points are colored by species (Setosa, Versicolor, Virginica), with a static legend and axis labels. The visualization uses SVG for rendering and animation, with axes and scales computed via `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` from the D3 API.

Mar 28, 2022

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, cycling through four numeric attributes on the x-axis every two seconds. The reusable chart component uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map petal and sepal measurements to SVG circles with a fixed radius. Axes update dynamically via `setInterval`, while the chart’s configuration methods for width, height, margins, and value accessors enable customization. The visualization demonstrates a modular pattern for building flexible, animated plots with D3’s data joins and SVG rendering.

Mar 28, 2022

Loading thumbnail…

testing ice 7

This interactive scatterplot animates through different x-axis variables from the classic Iris dataset, cycling between petal width, sepal width, petal length, and sepal length. Using d3.csv to load the data and d3.scaleLinear for axes, it renders colored circles for each species (setosa, versicolor, virginica) via a setInterval loop that updates the plot's xValue. The visualization uses d3-selection and d3-axis APIs, with SVG rendering and a custom legend showing species colors.

Mar 28, 2022

Loading thumbnail…

ICE 7 D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, encoding petal and sepal measurements as x/y coordinates while color-coding points by species (setosa, versicolor, and virginica). Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG axes and circles. A `setInterval` cycles through four measurement columns, animating the x-axis mapping across petal width, sepal width, petal length, and sepal length. The visualization includes a fixed y-axis for sepal length, a color legend, and axis labels, with data loaded from a remote CSV via `d3.csv`.

Mar 28, 2022

Loading thumbnail…

Fork of Reusable D3 Scatter Plot orginal

This example visualizes the Iris dataset using D3.js, displaying a scatter plot of petal and sepal measurements. The code uses reusable chart components from `scatterPlot.js` with D3 scales like `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. The plot animates by cycling through different measurement combinations every two seconds using `setInterval`, with SVG circles colored by species. Data loads from a CSV via `d3.csv`, and the chart adapts to the full window size with configurable margins and radius.

Mar 28, 2022

Loading thumbnail…

ICE 7 Line Chart

This line chart displays Nike sales from 2009 to 2019, with years on the x-axis and sales figures on the y-axis. The visualization uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to construct the plot. Data is loaded via `csv` from a GitHub gist, with years parsed using `d3.timeParse` and sales converted to numbers. Grid lines and axis labels are styled through CSS, while a maroon path represents the sales trend.

Mar 28, 2022

Loading thumbnail…

Iris Dataset Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing the relationship between petal length and sepal length for three flower species. It uses D3.js v6 (d3.csv, d3.scaleLinear, d3.axisLeft, d3.axisBottom) to load and parse the data, scale the points, and render the SVG circles. Each species is assigned a distinct color: skyblue for setosa, red for versicolor, and green for virginica. The visualization includes labeled axes, margins, and a radius of 6 for all data points.

Mar 27, 2022

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot animates through the four numeric columns of the Iris dataset, cycling every two seconds. It visualizes the flower measurements as circles colored by species, with axes and a legend. The implementation uses D3 v6 APIs including `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` within a custom `scatterPlot` function, and renders to SVG with an animated update via `setInterval`.

Mar 27, 2022

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This scatter plot visualizes the Iris dataset, displaying sepal length against petal width with points colored by species (setosa, versicolor, and virginica). The visualization uses D3.js version 6.7.0 with reusable module patterns, employing `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes. Data is loaded asynchronously via `csv` and parsed into numeric values, with SVG circles rendered for each data point. The black background and white axes create high contrast, while the `Share Tech` font adds a technical aesthetic to the axis labels.

Mar 27, 2022

Loading thumbnail…

Fork of Reusable D3 Scatter Plot test

This reusable scatter plot visualizes the Iris Dataset, showing petal width against sepal length. D3 v6 functions like `scaleLinear`, `axisLeft`, and `axisBottom` render SVG axes, while circles are joined and updated via `join`. The chart cycles through four numerical columns every two seconds using `setInterval`, re-assigning the x-value function and re-calling the chart on a full-screen SVG. Points animate smoothly as axes rescale, demonstrating a modular chart factory pattern with setters for width, height, data, and margin.

Mar 27, 2022

Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart displays Nike’s annual sales from 2009 to 2019, with a smooth curve overlaid on a shaded region beneath it. The visualization uses d3.csv to load external data, d3.scaleTime and d3.scaleLinear for axes, and d3.line with d3.area and curveBasis to generate the SVG paths. Axis ticks are formatted with d3.format, and d3.timeParse converts date strings into time values.

Mar 27, 2022

Loading thumbnail…

Untitled

A force-directed network diagram maps a graph of nodes and links, with node color and size encoding a categorical or quantitative dimension. The visualization uses d3.forceSimulation to calculate node positions and a Canvas rendering context to draw the connections and circles. Interactivity includes dragging nodes and a legend. The data appears to be synthetic or preloaded, with no external file fetch.

Mar 27, 2022

Loading thumbnail…

Fork of Line Chart

This example visualizes US auto sales from 2005 to 2022 as a single red line chart, with the x-axis showing years and the y-axis showing sales amounts. The code uses d3.scaleTime and d3.scaleLinear to map the data, d3.axisBottom and d3.axisLeft to render axes with grid lines, and d3.line to generate the path. Data is loaded from a CSV file via d3.csv, with year values converted to Date objects and amounts to numbers before rendering in SVG.

Mar 27, 2022

Loading thumbnail…

Fork of Fork of line chart section 3

This visualization displays car sales data from 2013 to 2021 as a line chart, showing the trend of total sales over time. The chart uses a time-scaled x-axis for years and a linear y-axis for sales totals, with axes enhanced by gridlines and labels. It loads data from an external CSV file, parsing dates with `d3.timeParse` and computing the line path using the `d3.line` generator. The SVG rendering employs D3 v5 selection, scales, axes, and margin conventions to produce the final graphic.

Mar 27, 2022

Loading thumbnail…

Fork of Fork of line chart section 3

This example shows the annual amount spent on military vehicles from 2013 to 2021 as a single red line chart. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` to map the parsed year and numeric amount values onto the axes. The data is loaded from a CSV file via `d3.csv`, and the line is drawn with the `line()` generator. Axis labels and gridlines are positioned using `axisBottom` and `axisLeft`, with custom tick formatting and margins.

Mar 27, 2022

Loading thumbnail…

Fork of Line Chart

This example visualizes US auto sales from 2005 to 2022 as a line chart, using a red path to show sales trends over time. The chart is rendered as an SVG with d3.line, d3.scaleTime for the year axis, and d3.scaleLinear for the sales axis, both with axis labels. Grid lines are drawn using tickSize, and the title is placed above the plot. Data is loaded via d3.csv from a gist, with values converted to numbers before rendering.

Mar 27, 2022

Loading thumbnail…

Fork of Line Chart

This visualization displays a line chart of US auto sales from 2005 to 2022, with time on the x-axis and sales volume on the y-axis. The chart is rendered as an SVG using D3 v5, where the `line` generator maps data points to pixel coordinates via `scaleTime` and `scaleLinear` scales. Axes are drawn using `axisBottom` and `axisLeft`, with grid lines created by setting negative tick sizes. The data is loaded from an external CSV file using `csv()`.

Mar 27, 2022

Loading thumbnail…

ICE-7 Pie Chart

This pie chart visualizes the top clothing brands by revenue for 2022, with each slice representing a brand’s year-to-date earnings and a legend displaying brand names and their values in billions. Built with D3.js v5, it loads CSV data from a Gist URL and renders the chart as SVG, using `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format` to construct segments, apply a custom color palette, and format the revenue labels.

Mar 27, 2022

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents the classic Iris flower dataset as an animated scatter plot. Built with D3.js, it cycles through the dataset’s four numerical attributes on the x-axis every two seconds, while the y-axis consistently maps sepal length. The visualization updates axes through reusable `axisBottom` and `axisLeft` APIs and renders data points as SVG circles whose coordinates are computed via `scaleLinear`. It uses `select` and `.join` for efficient idempotent updates, and reads `iris.csv` directly from a GitHub Gist.

Mar 27, 2022

Loading thumbnail…

Fork of Pie chart Test

This example presents a large donut chart that displays the revenue figures of ten major global companies, drawn from a CSV data file. The chart is rendered as Scalable Vector Graphics (SVG) using the D3.js library, with each segment’s color assigned from a hardcoded ordinal scale. The visualization’s construction relies on the `d3.pie` function to compute the arc segments, `d3.arc` to define the donut’s inner and outer radii, and centroid-based text positioning to place company names. The code also includes a default dataset and static functions, indicating a direct, non-interactive rendering approach.

Mar 25, 2022

Loading thumbnail…

Fork of World Population Area Chart

This area chart visualizes world population over time, using a filled path to emphasize the magnitude of growth across the years. The data is loaded from a CSV file provided by Curran, with population values parsed as numbers and years as dates. Built with D3 v5, the visualization uses `d3.area` with a basis curve, `scaleTime` for the x-axis, and `scaleLinear` for the y-axis, which formats values in billions. Axes are customized with grid lines and rotated labels, and the chart includes a title and axis annotations.

Mar 25, 2022

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

Mar 23, 2022

Loading thumbnail…

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

This example shows the top 10 most valuable companies by market value, displayed as a horizontal bar chart with the company name on the y-axis and company value on the x-axis. The visualization is built using React for component structure and D3 v5 for scales and data loading via `d3.csv`. Bars are rendered as SVG `<rect>` elements, with `d3.scaleBand` and `d3.scaleLinear` positioning bars and axes, while custom `AxisBottom` and `AxisLeft` components generate tick marks and labels. Company values are formatted with `d3.format` to abbreviate billions.

Mar 6, 2022

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris flower dataset, mapping petal length on the x-axis against sepal width on the y-axis. Built with React and D3 v5, it renders as an SVG using `d3.scaleLinear` for axes and `Marks` component to draw each data point as a circle. The chart's distinctive aesthetic comes from oversized axis labels, chunky tick marks, and a bold Poppins font, giving the familiar scatter plot a modern, graphic-design feel.

Mar 6, 2022

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width as x and y coordinates while coloring each point by species (setosa, versicolor, or virginica). It also stores sepal measurements as data attributes on each circle, though these are not used for positioning. The implementation uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale axes, and render an SVG with circles. Data is fetched from a GitHub Gist, and the viewport fills the browser window.

Mar 6, 2022

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that select which attribute appears on each axis. The visualization renders as SVG using React components, with D3 v5 handling data loading, scales, and axis generation. The implementation uses `useState` hooks to manage the selected attributes and ReactDropdown for menu interactions, while the `Marks` component renders circles with tooltips showing formatted values.

Mar 6, 2022

Loading thumbnail…

Fork of Stylized Scatter Plot

A scatter plot of the Iris Dataset displays petal length on the x-axis and sepal width on the y-axis, with each flower as a teal circle. Built with React and D3 v5, it uses `scaleLinear`, `extent`, and `max` from D3 to compute scales, while SVG circles render the marks with tooltips. The `csv` loader fetches the data, and custom React components handle the axes and styling.

Mar 6, 2022

Loading thumbnail…

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

A horizontal bar chart displays the top 10 most populous countries, with bars sized by population using an SVG `<rect>` for each mark. Built with React for component state and rendering, it uses D3 v5 scales (`scaleBand`, `scaleLinear`) and formatting (`format`) to position bars and tick labels. The bar widths encode population values, and hover tooltips show formatted numbers. Data comes from the United Nations World Population Prospects 2019 CSV, loaded asynchronously via `d3.csv` and sliced to the top ten entries.

Mar 6, 2022

Loading thumbnail…

Fork of Stylized Bar

This bar chart displays the top 10 most populous countries in 2020, using data from the United Nations World Population Prospects 2019. The visualization uses React with D3 v5 scales (`scaleBand` and `scaleLinear`) to map country names to the y-axis and population values to the x-axis. Each bar is rendered as an SVG rectangle, with axes and tick labels drawn from the `AxisBottom` and `AxisLeft` components. The chart's styling is defined in a separate CSS file, and data is loaded asynchronously via D3's `csv` function.

Mar 6, 2022

Loading thumbnail…

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

This example shows a horizontal bar chart of the top 10 most populous countries, using population data from a CSV file. The chart is built with React components that render SVG elements, with D3 scales and axes from `d3.scaleBand`, `d3.scaleLinear`, and `d3.max` handling the layout. A loading state is displayed until the data is fetched via `d3.csv`. The visualization demonstrates how React manages the DOM while D3 provides the data-driven mapping and axis generation.

Mar 6, 2022

Loading thumbnail…

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

This visualization is a horizontal bar chart showing the ten most populous countries, with a title above the chart. The chart uses SVG rendering within a React application, leveraging D3’s `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and manual mapping of data to `rect` marks for each country. The code also uses D3’s `csv` loader to fetch population data from an external file, with axes constructed using `axisLeft` and `axisBottom`.

Mar 6, 2022

Loading thumbnail…

Fork of ICE-6: t2

This example displays a bar chart of the top 20 countries by population for a given date, sourced from a CSV file. Using React with hooks, it loads and slices the data, then renders an SVG with d3.scaleBand and d3.scaleLinear to map countries to horizontal bars. Custom tick marks and gridlines are drawn manually using d3.ticks, with axis labels positioned along the y-axis and x-axis. The visualization updates reactively as data loads, showing a clear ranking of population counts.

Mar 6, 2022

Loading thumbnail…

ICE5 : Loading data And Parsing CSV data with D3.Js

This example demonstrates how to load and parse CSV data using D3.js within a minimal HTML page. It fetches a remote CSV file containing rental car information, calculates the data size in kilobytes, and displays the row and column counts in a styled `<pre>` element, alongside a header and an SVG logo. The code uses `d3.csv()` to asynchronously load the data, `d3.csvFormat()` to measure the data length, and `document.getElementById()` to update the message container with the parsed statistics.

Feb 27, 2022

Loading thumbnail…

ICE5

This example displays a simple summary of a car rental dataset, presenting the file size in kilobytes, row count, and column count as plain text. The visualization loads a CSV file from a GitHub gist using d3.csv, then calculates and formats these statistics with d3.csvFormat and Math.round. The page is styled with custom CSS, featuring a large centered title and a responsive message area. The code relies on D3.js v7 and runs entirely within a single HTML file, with no interactive or graphical charting beyond the textual output.

Feb 26, 2022

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes, including a gold circle face, two black eyes with lightblue outlines, and a brown-stroked mouth drawn using the d3.arc() path generator. The face is centered within a 960×500 SVG canvas, with eye positions calculated relative to the canvas dimensions. The code uses d3.select() and chained .attr() methods to create and style each element, while a group element with a transform attribute aligns the mouth correctly.

Feb 20, 2022

Loading thumbnail…

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

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—all positioned relative to a centered group. D3's `transition()` and `duration()` methods repeatedly shift the eyebrow group up and down over two-second intervals, creating a continuous bobbing motion. The example demonstrates core D3 selections and DOM manipulation without external data, relying solely on hardcoded dimensions and the `arc()` helper for the mouth shape.

Feb 19, 2022