Skip to main content
Log in
M

maxthamt

@maxthamt·78 public vizzes

Loading thumbnail…

Interactividad

This interactive scatter plot displays global health and economic data, plotting life expectancy against GDP per capita, with circle radius encoding population and color distinguishing continents. Built with React and D3.js v7, the visualization uses `d3.scaleLog` for the x-axis, `d3.scaleLinear` for y and radius, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. The code implements enter/update/exit logic for SVG circles, enabling dynamic highlighting. Hovering over a circle triggers a custom tooltip showing country, population, GDP, and life expectancy, with other circles dimmed via `d3.selectAll` and opacity styles. Data comes from a remote rosling.json file.

Aug 18, 2022
Loading thumbnail…

Scrollama

Scrollama uses the scrollama library and D3 v7 to create a scrollytelling experience where line charts of COVID-19 case totals by region update as the user scrolls through steps. The visualization shows cumulative case counts over time, with each region’s data rendered as an SVG path using d3.line and d3.curveMonotoneX. Scrolling triggers updatePlot to redraw the chart with a growing subset of regions, while the axis labels and tick formatting use d3.axisBottom and d3.timeFormat. Data comes from a remote JSON file of COVID-19 cases.

Aug 18, 2022
Loading thumbnail…

Beeswarm -pruebas update-botones

This visualization displays 377 research projects funded by Fondecyt in Chile, grouped by sociology and information sciences, with each circle representing a project positioned along a time axis from 2010 to 2020. Interactive buttons filter projects by Fondecyt Regular, Iniciación, or all types, while hovering over circles reveals details about the year, university, lead researcher, and project title. The chart uses d3.forceSimulation with forceX and forceCollide to arrange overlapping circles, d3.scaleOrdinal for color encoding by university, and d3.scaleTime for the horizontal axis. Data comes from ANID via GitHub-hosted JSON and CSV files, rendered as SVG with a custom tooltip and legend.

Aug 17, 2022
Loading thumbnail…

Fork of Beeswarm -pruebas update

A beeswarm chart displays 377 Chilean sociology and information science research projects funded by Fondecyt from 2010 to 2020, with circles colored by university. Hovering reveals project title, year, university, and lead researcher. The visualization uses d3.forceSimulation for collision-based layout, d3.scaleTime for the x-axis, and d3.scaleOrdinal for color encoding, rendering as SVG with data loaded from CSV and JSON sources.

Aug 16, 2022
Loading thumbnail…

Enter Update

This example demonstrates animated transitions between data states in a scatter plot, where circles representing countries enter, update, and exit based on incoming data. The visualization shows GDP per capita against life expectancy, with circle size encoding population and color distinguishing South American countries in red. It uses D3.js v7's selection `.enter()`, `.transition()`, and `.exit()` methods to animate 500-millisecond changes, with logarithmic scaling for the x-axis. Data is loaded asynchronously via `d3.json` from a GitHub-hosted ROSLING dataset, rendered as SVG.

Aug 10, 2022
Loading thumbnail…

Beeswarm v2

This example visualizes 377 Fondecyt-funded sociology and information science projects in Chile between 2010 and 2020 as a beeswarm plot. Each circle represents a project, with its horizontal position indicating the year and color encoding the year via a color scale; hovering reveals the project title and year. The layout is computed using `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` forces, while SVG circles and axes are rendered with D3 v7. Data is loaded from a remote CSV and JSON source.

Jul 29, 2022
Loading thumbnail…

Clase 02 - Parte 2 - D3 Fernando Becerra

This interactive bubble chart visualizes the relationship between GDP per capita, life expectancy, and population across countries, using a logarithmic x-scale and linear y-scale. The D3 v7 code renders SVG circles sized by population and colored by continent, with hover interactions that dim non-target circles and display a tooltip showing country details. The example demonstrates the enter-update-exit data join pattern, along with d3.scaleLog, d3.scaleLinear, d3.scaleOrdinal, and d3.axisBottom/axisLeft, loading data from a Rosling dataset via d3.json.

Jul 29, 2022
Loading thumbnail…

Clase 02 - Parte 2 - D3 Fernando Becerra

This example visualizes the temporal distribution of sociological research in Chile, plotting each study as a circular mark along a time axis from its publication year, colored by research group. The visualization uses D3 v7 with a force-directed simulation (`d3.forceSimulation`, `d3.forceX`, `d3.forceY`, and `d3.forceCollide`) to position overlapping points, while a time scale (`d3.scaleTime`) and band scale (`d3.scaleBand`) map the data. Data is loaded from remote JSON and CSV sources via `d3.json` and `d3.csv`, with rendered output as SVG circles that include hover tooltips.

Jul 28, 2022
Loading thumbnail…

Prototipo proyecto 1

This visualization displays sociology thesis records as circles positioned by publication year along a shared x- and y-axis, using a CSV dataset from GitHub. It uses D3 v7 to load and parse the data, apply linear scales for position, and render SVG circles with transitions on enter and update. The circles are uniformly sized and styled in steelblue, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The example demonstrates a basic scatter plot with animated circle placement.

Jul 22, 2022
Loading thumbnail…

Beeswarm Chart

This beeswarm chart visualizes WHO suicide statistics, showing each country as a circle positioned along a horizontal axis by either total deaths or per-capita deaths, with color encoding continent. Interactive buttons switch between linear and logarithmic scales, while checkboxes toggle continent visibility. The visualization uses d3.forceSimulation with forceX, forceY, and forceCollide to arrange circles into clusters, and d3.axisBottom renders the x-axis. The React-built interface animates transitions between chart states, with tooltips appearing on hover.

Jul 22, 2022
Loading thumbnail…

Clase 02 - Parte 1 - D3 Fernando Becerra

Four circles of varying sizes and colors appear at random positions on an SVG canvas when a button is clicked. The example demonstrates D3’s data join pattern by generating new data, updating existing circles, and removing extraneous ones with 500-millisecond transitions. Using d3.scaleLinear, it maps x, y, and radius values to axes and pixel ranges, while d3.axisBottom and d3.axisLeft render scales that update with each run. The code employs d3.select, selection.enter, and selection.exit to manage SVG circle elements dynamically.

Jul 21, 2022
Loading thumbnail…

Scatter Plot World Heritage List

This interactive scatter plot visualizes UNESCO World Heritage Sites, with each dot representing a heritage element and its color indicating the continent. Users can switch the x- and y-axes between quantitative variables like longitude and date_inscribed, or categorical continent values, using custom dropdown menus. The visualization uses D3 v6 with SVG rendering and transitions to animate circle positioning and axis updates. Data comes from the official UNESCO dataset, while the code employs `scaleLinear`, `scalePoint`, `scaleOrdinal`, and `transition` to handle scaling, coloring, and animation.

Jul 21, 2022
Loading thumbnail…

Fork of Choropleth Map

This map visualizes global economic classifications by shading each country with a categorical color scale, with a legends showing the income groups. It uses d3.geoNaturalEarth1 and d3.geoPath to project and draw country boundaries from TopoJSON data sourced from world-atlas, while d3.scaleOrdinal maps economy categories to a spectral color scheme. The map supports zooming via d3.zoom, and hovering highlights individual countries. A custom colorLegend module builds the SVG legend with circles and text labels.

Feb 17, 2022
Loading thumbnail…

Circles on Map

This example displays a world map colored by each country's economy classification, with a color legend showing the categorical scale. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render the map from TopoJSON data loaded via topojson, while d3.scaleOrdinal with schemeSpectral assigns colors to economic categories. The map supports zooming through d3.zoom, and hovering highlights individual countries in red. A custom colorLegend component renders the legend as SVG circles with text labels, and the sphere background is filled with blue.

Feb 11, 2022
Loading thumbnail…

Scatter Plot - Reusable - Dynamic

This example demonstrates a dynamic scatter plot that cycles through different iris flower measurements every two seconds, updating the x-axis to show petal width, sepal width, petal length, or sepal length against sepal length on the y-axis. Built with React and D3, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and circles in SVG with animation. The reusable `scatterPlot` component accepts configurable accessors, margins, and radius, pulling data from a remote CSV of the Iris dataset.

Jun 24, 2021
Loading thumbnail…

Scatter Plot - Reusable

This example presents a reusable scatter plot built with D3 and React, visualizing the classic Iris dataset. It maps petal length to the x-axis and sepal length to the y-axis, using D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to generate axes and position circles. The plot is rendered as SVG within a full-screen viewport, with margins and point radius configured through a chainable function interface. Data is loaded asynchronously via D3’s `csv` parser, demonstrating a modular pattern for encapsulating chart logic.

Jun 18, 2021
Loading thumbnail…

Vanilla Scatter Plot

This example renders a scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. The code uses D3 v6 with `d3.csv` to load data, `d3.scaleLinear` and `d3.extent` for scales, and `d3.axisLeft` and `d3.axisBottom` for axes. Circles are drawn via SVG using the general update pattern with `selectAll` and `join`. The plot fills the browser window, with margins and tick styling configured in CSS.

Jun 16, 2021
Loading thumbnail…

Scatter Plot including Species

This interactive scatter plot visualizes the Iris Dataset, allowing users to dynamically explore relationships between sepal and petal measurements across species. The visualization uses D3.js v6 APIs including `scaleLinear`, `axisLeft`, `axisBottom`, and `transition` to animate point movements and axis updates over 1-second durations. Two drop-down menus, built with a custom reusable `menu` component that utilizes `dispatch` for change events, let viewers select which quantitative variables to plot on the x and y axes. The SVG rendering uses the `join` pattern to smoothly transition existing circles to new positions while animating new points growing from radius zero.

Jun 12, 2021
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, showing petal length against sepal length for individual flowers. The visualization uses a custom reusable D3 module, `scatterPlot`, which leverages `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to SVG circles. Data is loaded asynchronously via `d3.csv`, with numeric parsing applied to each measurement. The plot fills the browser window, includes labeled axes with large tick text, and uses a margin object to position the chart within the SVG container.

May 8, 2021
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis with circles of fixed radius. It uses D3 v6 APIs including `csv` for data loading, `scaleLinear` for axes, `axisLeft` and `axisBottom` for tick marks, and a custom reusable `scatterPlot` module. The SVG renders full-window, with data parsed from a remote Gist, and styling sets large tick text while hiding page overflow.

May 8, 2021
Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot visualizes the classic Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis for 150 flower samples. Built with vanilla HTML, CSS, and the D3 v6 library, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data points to an SVG canvas. Circles are rendered via `selectAll` and `join`, with the visualization filling the full browser window and updating to any screen size.

May 8, 2021
Loading thumbnail…

D3 Starter UNDP scatter

This interactive scatter plot visualizes the relationship between the Human Development Index (HDI) and two alternative measures: child mortality rates and the Gini index, using data from the UNDP's 2019 Human Development Report. Users toggle between the two metrics via buttons, which triggers a smooth animated transition of the data points, axes, and explanatory text. Built with D3 version 5, the visualization renders as an SVG and includes interactive tooltips that reveal country-specific data on hover, with axes and labels updated programmatically using a `transition` API.

Apr 17, 2021
Loading thumbnail…

D3 Starter lgbt movies

This interactive scatterplot explores the relationship between a movie's rank and two selectable metrics: score and year. Users toggle between measures via buttons, triggering a smooth transition that updates the y-axis and circle positions. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, `axisLeft`, and `transition` to animate changes. Hovering over a circle reveals a tooltip with movie details, while the data is sourced from the Human Development Report 2019 and rendered as SVG.

Apr 17, 2021
Loading thumbnail…

D3 Starter Circle Packing

This example demonstrates a basic D3 circle packing layout using movie studio data loaded from a CSV file. It shows how to fetch and parse data with d3.csv, then converts string values to numbers for fields like budget, revenue, and popularity. The visualization relies on D3 version 5’s data handling APIs to prepare the dataset, though the packing layout itself is not yet implemented in the visible code. The page includes a JavaScript bundle and styles the body with a large text size, while the accompanying README links to a D3 v6 tutorial video.

Apr 17, 2021
Loading thumbnail…

Prep Data UNDP

This interactive scatter plot visualizes United Nations Development Programme data, mapping countries by their Human Development Index and maternal mortality ratio. A small multiple display changes the x-axis variable between revenue, release year, and popularity via control buttons, with hover tooltips revealing detailed country information. The visualization uses D3 version 5, loading CSV data from a GitHub gist and employing `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and custom tooltip styling.

Apr 13, 2021
Loading thumbnail…

D3 Starter Updating only scatter plot

A scatter plot displays movie budget against a selectable metric (revenue, release year, or popularity) for roughly 100 top-budgeted films from 2000-2009. Buttons change the y-axis metric, triggering an animated transition that updates the circles' positions and the axis. The visualization uses D3 v5, with `d3.transition` for smooth updates, `d3.scaleLinear` for axes, and `d3.event` for tooltip positioning. Hovering over a dot reveals a detailed tooltip with title, tagline, and financial and rating statistics.

Apr 13, 2021
Loading thumbnail…

D3 Starter Updating scatter plot

This example demonstrates how to build an updating scatter plot with D3 v5, visualizing the budget and revenue of the top 100 films by budget from 2000–2009. The plot uses `d3.csv` to load movie data, `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` for ticks, with circles representing each film. Axes include formatted tick labels and dashed gridlines. Hovering over a point changes its fill to red, though no tooltip is implemented. The visualization is rendered as SVG within a container, styled via an external CSS file.

Apr 12, 2021
Loading thumbnail…

D3 Starter Updating bar chart + Interaction

This example demonstrates an interactive bar chart that visualizes movie metrics—revenue, budget, or popularity—for titles released between 2000 and 2009. Users click buttons to switch metrics, triggering animated updates to bar lengths and axes through D3’s general update pattern with transition delays. Hovering over a bar displays a tooltip with details like profit, ratings, and genre. The code uses d3.scaleBand, d3.scaleLinear, d3.axisTop, d3.axisLeft, and d3.transition, with SVG rendering and data parsed from a CSV file.

Apr 12, 2021
Loading thumbnail…

D3 Starter Updating scatter plot + Interaction

This interactive scatter plot displays movie budgets against revenue, with buttons to switch between revenue, budget, and popularity metrics, updating the top 100 films via a general update pattern. Built with D3 v5, it uses `d3.scaleLinear`, `transition`, and `d3.selectAll` to animate SVG circles and axes. Tooltips appear on mouseover, showing film details via `d3.event` and HTML manipulation. The dataset from 2000–2009 is filtered and sorted in JavaScript, with axes formatted using `d3.format`.

Apr 12, 2021
Loading thumbnail…

D3 Starter Updating scatter plot brush v2

This example demonstrates an interactive scatter plot of movie budget versus revenue, using data from the Movies dataset filtered to years 2000–2009 and the top 100 films by budget. Users can brush over the plot to select points, which highlights matching circles in coral and updates a side panel listing selected movie titles, release years, budgets, and revenues. Hovering over a list item highlights its corresponding circle in red. The visualization uses D3 v5 with scaleLinear, brush, and transition APIs, rendering SVG with enter/update/exit joins for the selection list.

Apr 12, 2021
Loading thumbnail…

D3 Starter Updating scatter plot w/brush

An updating scatter plot displays movie budgets against revenue for the top 100 films by budget from 2000–2009, drawn as SVG circles with d3.scaleLinear axes. A d3.brush overlay lets users select a region, though the brush handler is currently empty. Data loads from a CSV via d3.csv and uses timeParse for date handling, with tick labels formatted using d3.format. The chart includes styled axis ticks and a header, all rendered within a single SVG container.

Apr 9, 2021
Loading thumbnail…

D3 Starter Updating bar chart

A D3 bar chart displays the top 15 movies from 2000-2009, with bars showing revenue, budget, or popularity; interactive buttons trigger an animated update that re-sorts and re-scales the data. The chart uses D3's modular API, including `scaleLinear`, `scaleBand`, `axisTop`, `axisLeft`, and the `transition` helper for smooth animations. SVG elements render the bars and axes, with a header updating to reflect the selected metric.

Apr 7, 2021
Loading thumbnail…

D3 Starter - Pluralsight 03

A horizontal bar chart displays total movie revenue by genre for films released between 2000 and 2009, using data loaded from a CSV via d3.csv. The chart computes revenue sums with d3.rollup and sorts genres in descending order. It renders SVG rectangles scaled with d3.scaleLinear and d3.scaleBand, and adds axes using d3.axisTop and d3.axisLeft with custom tick formatting via d3.format.

Apr 7, 2021
Loading thumbnail…

D3 Starter - Pluralsight

This example demonstrates the D3 general update pattern by displaying a list of favorite fruits that changes when the user clicks one of three buttons. The visualization uses an SVG text element for each fruit, with enter, update, and exit selections handled through `selection.join`. Entering items slide in from the left in blue, updating items shift position in gray, and exiting items slide out to the right in red. The code uses `d3.select`, `selectAll`, `transition`, and `selection.data` with a key function, driven by click handlers on the buttons.

Apr 6, 2021
Loading thumbnail…

D3 Starter-episode 04

This example demonstrates a basic D3.js bar-like visualization of 100 horizontal rectangles stacked vertically, each with a height of 10 pixels and width matching the viewport. The code uses `d3.select`, `d3.range`, and the `join` pattern to bind data to SVG `rect` elements, spacing them at 20-pixel intervals. It renders quickly to show the minimal setup for D3 version 6, with styling from a large body font size. The visualization is purely layout-driven, using no external data source or interaction.

Mar 27, 2021
Loading thumbnail…

Sol LeWitt Reproduction with D3-episode 04

This piece displays a visual grid of alternating horizontal and vertical strips that are revealed through two contrasting circular masks. Built with the D3 library (version 6.6.1), it generates 100 semi-transparent rectangular bands in each orientation, with one mask using a black background and the other using white to invert the visible regions. The composition forms an intersecting pattern that echoes Sol LeWitt’s geometric style, rendered entirely through programmatic SVG element creation.

Mar 27, 2021
Loading thumbnail…

D3 Starter - making bar chart

This bar chart displays the population of the top 10 most populous countries, using 2019 estimates from the United Nations World Population Prospects. The chart encodes population on a linear x-axis and country names on a banded y-axis, with steel-blue rectangles representing each value. The visualization is built with D3 v5, using `d3.csv` to load the data, `d3.scaleLinear` and `d3.scaleBand` for scales, and `d3.axisLeft` and `d3.axisBottom` for axes. The population values are converted from strings to numbers and multiplied by 1000 before rendering.

Mar 26, 2021
Loading thumbnail…

D3 Starter - General update pattern Modular way with Bowl

This example demonstrates the general update pattern in D3 using a modular function `fruitBowl` that renders a bowl with fruit circles. It shows how enter, update, and exit transitions handle dynamic data changes, animating fruits in and out as apples are consumed and one apple becomes a lemon. The code uses d3's `scaleOrdinal` for color and radius mapping, `selectAll`, `enter`, `merge`, and `exit` methods with `.transition()` for smooth animations. Data is generated with `range` and `Math.random()` IDs, rendered as SVG elements.

Mar 23, 2021
Loading thumbnail…

D3 Starter - General update pattern Modular way

This example demonstrates the D3 general update pattern in a modular way, using animated fruit bowls to illustrate how data changes drive SVG circle and text elements. The code defines a reusable `fruitBowl` function that handles enter, update, and exit transitions for circles and labels, with `transition().duration(1500)` animating position, radius, fill color, and opacity changes. Using d3.v6's `scaleOrdinal` for color and radius mapping, the visualization cycles through adding, removing, and modifying fruit data points via `setTimeout` calls.

Mar 23, 2021
Loading thumbnail…

D3 Starter - General update pattern Nest grouped version w/transition

This example demonstrates the D3 general update pattern with nested groups, animating a fruit bowl where apples are eaten or replaced by lemons over time. The visualization uses d3.selectAll and data joins to bind fruit objects to SVG group elements, with transitions on circle radii and positions. The code leverages d3.scaleOrdinal for color and size mapping, while enter, merge, and exit selections handle dynamic updates. The animation sequence includes removing apples, changing a fruit type, and filtering the dataset.

Mar 23, 2021
Loading thumbnail…

D3 Starter - General update pattern Nest grouped version

This example demonstrates the D3 general update pattern with a nested group structure, showing how a data array of fruit items maps to SVG circles and text labels. The data starts with five apples, then animates through a lemon replacing an apple, and two apples being removed, all at one-second intervals. Using `d3.select` and `d3.range`, the `fruitBowl` function appends `<g>` groups, merging enters and updates, while exits are removed. It uses ordinal scales for color and radius based on fruit type, rendering with SVG.

Mar 22, 2021
Loading thumbnail…

D3 Starter - General update pattern Nest

This example demonstrates the D3 general update pattern for data-bound SVG elements, using a fruit bowl metaphor to show how enter, update, and exit selections handle changing data. The code uses `d3.scaleOrdinal` to map fruit types (`apple`, `lemon`) to colors and radii, with each fruit’s position derived from its index. Over timed intervals, `setTimeout` triggers removal of apples, mutation of one apple to a lemon, and filtering of another fruit, while the `fruitBowl` function merges `enter` and `update` selections and applies transitions to exit circles. Rendering is SVG-based, with text labels showing fruit types.

Mar 22, 2021
Loading thumbnail…

D3 Starter - General update pattern

Five fruit circles render as apples in an SVG created with D3 v6. A function called `render` demonstrates the general update pattern by joining data to circles with `selectAll` and `data`, then handling enter, update, and exit selections. The code uses `scaleOrdinal` for color and radius based on fruit type, and `merge` to apply shared attributes. After one second, a fruit is removed; after two, an apple becomes a lemon, showing transitioned states.

Mar 22, 2021
Loading thumbnail…

D3 Starter - Area chart World population

This area chart visualizes world population over time, with a shaded region beneath a smooth curve and circular markers at each data point. Built with D3 v5, it uses `scaleTime` and `scaleLinear` for axes, `area` with `curveBasis` for the filled path, and `axisLeft`/`axisBottom` for gridlines. Population data is loaded from a CSV via `csv`, and the SVG output includes labeled axes and a title.

Mar 21, 2021
Loading thumbnail…

D3 Starter - Area chart

This area chart displays temperature readings over a week in San Francisco, with data loaded from a CSV file. The visualization uses D3 v5 to render an SVG, employing `scaleTime` and `scaleLinear` for axes, and the `area` generator with `curveBasis` to create a smooth filled path. Individual data points appear as circles, though set to zero opacity, while axis labels, tick marks, and a title are added via `axisBottom` and `axisLeft`.

Mar 21, 2021
Loading thumbnail…

D3 Starter - Line chart

This line chart visualizes temperature readings over the course of a week in San Francisco. The data comes from a CSV file loaded via `d3.csv`. The chart uses `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with an SVG rendering. A smooth line is drawn using `d3.line` with `curveBasis`, and circles mark each data point. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with grid lines and custom styling.

Mar 21, 2021
Loading thumbnail…

D3 Starter - Line area chart

This line area chart visualizes a week of San Francisco temperature data, plotting daily temperatures against time. The SVG chart uses d3.scaleTime and d3.scaleLinear to map data to axes, with d3.axisBottom and d3.axisLeft rendering gridlines and labels. Circles represent individual temperature readings, colored mediumvioletred with reduced opacity. The data loads via d3.csv from a GitHub gist, with timestamps parsed into Date objects before rendering.

Mar 21, 2021
Loading thumbnail…

D3 Starter - Creating Cars scatterplot

This scatterplot charts car weight against horsepower, with each car represented as a translucent red circle. The data is loaded from the Plotly auto-mpg dataset and parsed as numeric values before rendering. The visualization uses D3 v5’s `select`, `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, `format`, and `extent` APIs to construct the SVG chart, including labeled axes and a title. Axis grids and tick marks are styled via CSS, while the plot area is sized using computed margins.

Mar 21, 2021
Loading thumbnail…

D3 Starter - Creating scatterplot

This scatterplot displays the population of the top 10 most populous countries, using data from the 2019 United Nations World Population Prospects. Each circle’s horizontal position encodes population on a linear scale, while the vertical axis uses a point scale for countries. The visualization is rendered with D3 v5, using `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the SVG chart. Gridlines extend across the plot, and the x-axis formats tick labels in abbreviated units using `format('.3s')`.

Mar 21, 2021
Loading thumbnail…

Sol Lewitt Reproduction

This example reproduces a Sol LeWitt drawing as a single black vertical rectangle spanning the full height of an SVG canvas. The work is rendered entirely through the native Document Object Model’s `createElementNS` and `appendChild` methods, without external libraries like D3. The script sets the SVG’s width and height attributes to fixed pixel values and appends the rectangle directly to the page body. The accompanying CSS hides page margins and scrollbars, focusing attention solely on the minimalist geometric form. The data source is the original LeWitt artwork.

Mar 20, 2021
Loading thumbnail…

JS Basics . Black and White

This example demonstrates the basics of JavaScript programming through a series of console-logged statements within an SVG container. The code shows variables, objects, functions, and ES6 arrow functions, including object mutation and a person factory. It uses plain JavaScript APIs, such as `console.log`, and renders with an SVG element while the accompanying CSS hides page margins and overflow.

Mar 20, 2021
Loading thumbnail…

D3 Starter - customizing axes

This bar chart shows the population of the top 10 most populous countries, using 2019 estimates from the United Nations World Population Prospects. The visualization customizes both axes: the y-axis uses a band scale for country names, while the x-axis uses a linear scale with tick labels formatted in billions. The chart is rendered as an SVG using d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, with grid lines and axis labels styled via CSS.

Mar 19, 2021
Loading thumbnail…

D3 Starter prueba

A D3 v6 starter demonstrates basic SVG drawing and animation by rendering a yellow smiley face with animated eyebrows. The page builds the face using D3 selection and arc methods, including `d3.select`, `append`, and `d3.arc` for the mouth, while applying circular and rectangular shapes for eyes and brows. Two eyebrow rectangles use chained `transition().duration()` calls to move up and down over two seconds each, creating a looping effect. The example uses an inline SVG canvas of 960 by 500 pixels and serves as a minimal template for learning D3’s core update and transition patterns.

Mar 18, 2021
Loading thumbnail…

D3 Starter - Making Smile Face with D3

A playful code example demonstrates the basic setup of a D3 version 6 project by rendering a simple smiley face on an SVG canvas. The page loads the D3 library from a CDN, creates an empty SVG element, and uses JavaScript to plot coordinates for the face’s eyes, mouth, and other features directly in the browser without external data. The visual output is static, built with SVG shapes, while the accompanying console log confirms the library is active. This serves as a minimal starter template for learning D3’s foundations.

Mar 18, 2021
Loading thumbnail…

Cars Report - ES5 Modules

This example demonstrates a modular JavaScript approach to generating a text-based car report. It displays a filtered list of cars under a specified price threshold, formatted with year, make, model, and price. The code uses ES5 module exports and imports to separate data loading, formatting, and report generation functions. D3 v6 is loaded via CDN but not actively used for visualization. The report updates after a simulated two-second asynchronous delay from a hardcoded JSON array.

Mar 17, 2021
Loading thumbnail…

D3 Starter - Asynchronus

This example demonstrates asynchronous programming in JavaScript using Promise objects and the `setTimeout` API, showing how to handle operations that take time to complete. The code defines a `waitSeconds` function that returns a Promise resolving after a specified delay, then chains `.then()` to log a message once the time has elapsed. Using D3 v6 loaded from a CDN, the page includes explanatory text about asynchronous versus synchronous behavior, with no data visualization or rendering involved—the focus is purely on illustrating the callback and Promise patterns.

Mar 17, 2021
Loading thumbnail…

HTML Starter - IntroJS2018, este sí

This interactive HTML page demonstrates JavaScript programming concepts, including loops, functions, recursion, and data structures, with a focus on ES6 syntax. The code defines and manipulates an array of car objects, using methods like `forEach`, `map`, and `filter` to manage and transform data. The page displays the results of these operations in the browser’s console, showcasing how to create, access, and process arrays and objects in JavaScript. It relies on core JavaScript APIs for array manipulation and template literals for string formatting.

Mar 17, 2021
Loading thumbnail…

HTML Starter Modules tutorial

This example demonstrates the minimal setup required to build a data visualization with D3 v5 in a plain HTML page, using CSS and JavaScript. It loads D3 from a CDN and renders a “Cars Report” title, though the actual chart logic is not included in the visible files. The code shows how to structure an `index.html` with a script tag for D3 and a separate `bundle.js` file, highlighting the basic modular workflow before integrating into a React environment.

Mar 17, 2021
Loading thumbnail…

HTML Starter. Intro to JS 2018

This example demonstrates a minimal HTML page that displays the text “Hello HTML” centered on the screen with a font size of 13em. The page includes a small JavaScript block that initializes a variable to zero and begins an empty `while` loop, though no visible interactive behavior is implemented. The code uses plain HTML, a CSS `style` element for layout and typography, and inline JavaScript. No external libraries or data sources are involved.

Mar 16, 2021
Loading thumbnail…

HTML Starter - Intro JS

This example shows a plain web page displaying the text “Hello HTML” in large type. The visualization demonstrates the use of CSS for styling and JavaScript for a simple script, which logs “Hello world” to the console in a while loop. It uses the native DOM and JavaScript `console.log` API. No data source or rendering library is involved, only a static HTML document with inline styles and script.

Mar 16, 2021
Loading thumbnail…

The margin convention

This example demonstrates the D3 margin convention by rendering a horizontal bar chart of the top 10 most populous countries in 2020, using data from the UN Population 2019 dataset. The code uses React state and the `useEffect` hook to load and parse the CSV via `d3.csv`, then applies `scaleBand` and `scaleLinear` for layout. It shows how to apply margins by translating an SVG `<g>` group with `margin.top` and `margin.left`, drawing gridlines from `xScale.ticks()` and styled `<rect>` elements for each bar. Rendering relies on React’s virtual DOM and SVG output.

Mar 13, 2021
Loading thumbnail…

Rendering data with React using D3 - Bar Chart

A React application renders a horizontal bar chart of the top ten countries by population in 2020, with the data loaded from a CSV file. The chart uses React state to hold the data and D3 utilities to scale and position the bars. d3.scaleBand maps countries to y-coordinates, while d3.scaleLinear maps population values to bar widths, with the maximum population determining the scale domain. The SVG rectangles are generated directly through React's JSX mapping of the data array, and the chart updates when new data is loaded.

Mar 13, 2021
Loading thumbnail…

SVG Fundamentals

This example illustrates fundamental SVG shapes—circles, rectangles, and paths—positioned within a fixed 700×700 canvas. Each shape demonstrates basic styling properties such as fill colors, stroke widths, and stroke colors, alongside explicit coordinate and dimension attributes. The code uses raw SVG markup directly in the HTML body, with no external libraries or JavaScript. The rendering approach is purely declarative, showing how static vector graphics can be composed from primitive elements without data binding or animation.

Mar 12, 2021
Loading thumbnail…

Rendering data with React using D3 pie

A React component loads CSS named colors from a CSV file using `d3.csv` in a `useEffect` hook, storing the result in state. Once loaded, it renders an SVG pie chart by passing the data through `d3.pie` and drawing each slice with `d3.arc`, filling paths with the hex value from each row. The visualization shows all color categories as equal-size wedges, with the `d3.arc` generator set to an outer radius matching the chart width, producing a full-circle display.

Mar 12, 2021
Loading thumbnail…

Rendering data with React using D3 arcs

A color wheel visualizes the CSS named colors dataset, with each arc segment representing a single color and its fill matching that color's hex value. The visualization renders as a full circle of contiguous arcs, evenly divided based on the number of data rows. Built with React managing the data state, the example uses D3's `csv` loader to fetch the remote data and D3's `arc` generator to construct the SVG path segments. React's `useState` and `useEffect` hooks handle the asynchronous data loading and rendering.

Mar 12, 2021
Loading thumbnail…

Rendering data with React

This example shows a React application that renders CSS named colors as horizontal stacked bars, using each color’s RGB hex value as the background. The data comes from a CSV file fetched with `d3.csv`, and the component uses React’s `useState` and `useEffect` hooks to manage the asynchronous loading state. Once loaded, the app maps each row to a `<div>` element with a fixed width and height, displaying a loading message via a `<pre>` tag before data arrives. The visualization relies on React’s declarative rendering rather than explicit D3 drawing methods.

Mar 12, 2021
Loading thumbnail…

Vega-Lite API Template Blue

This example uses the Vega-Lite API to render a bubble plot of religious affiliation by country, with circle size encoding population. The chart aggregates data from a CSV file of top-five religions per country, sorting countries by total population along the x-axis. Built with the `vega-lite-api` library, it registers Vega and Vega-Lite, configures a dark custom theme, and renders a full-screen SVG with tooltips. The code loads data using d3.csv and applies a circular mark with field-based encodings for position and size.

Mar 12, 2021
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automotive data, showing the relationship between engine displacement and horsepower for various car models, with tooltips revealing the car name for each point. Built with the Vega-Lite API, the visualization renders directly to SVG using the `vl` interface to define marks and encodings. The code registers Vega and Vega-Lite, loads data from a CSV file via `d3.csv`, and applies custom styling through a `config` object to improve readability.

Mar 12, 2021
Loading thumbnail…

Loading data with React and D3

This example demonstrates how to load and summarize a CSV dataset using D3 and React. The code fetches a list of CSS named colors via `d3.csv` and stores the result in React state with the `useState` and `useEffect` hooks. While loading, the display shows “loading,” then renders a message generated by `d3.csvFormat` that reports the data’s size in kilobytes, row count, and column count. React 16.9 and D3 v5 are used together, with the data sourced from a GitHub gist.

Mar 12, 2021
Loading thumbnail…

Loading and parsing CSV data with D3

This example demonstrates how to load and parse CSV data from a remote URL using D3 v5, displaying the file size, row count, and column count of the dataset. It fetches a CSV containing CSS named colors via `d3.csv`, then uses `d3.csvFormat` to measure the data’s byte size. The code also shows commented alternatives using the Fetch API, `d3.csvParse`, and async/await functions. Results appear in a large, preformatted text element.

Mar 12, 2021
Loading thumbnail…

Mouse follower

A single circle follows the mouse cursor across an SVG canvas, responding in real time to pointer movement. The example demonstrates integrating D3.js with React hooks, using React's `useState` to track mouse coordinates and `useCallback` to handle the `mousemove` event. D3's `arc` API is imported but not used in the visible logic. The circle's position updates directly from the browser's `clientX` and `clientY` values, rendered as a simple SVG `<circle>` element without animation or data binding.

Mar 12, 2021
Loading thumbnail…

Loading and parsing CSV data

This example demonstrates how to fetch and parse a CSV file from a remote URL. It uses the Fetch API and the `fetchText` asynchronous function to retrieve the raw text, then writes the parsed data to the browser console with `console.log`. The data source is a GitHub gist containing CSS named colors in CSV format. No chart or visualization is created; the focus is solely on the initial steps of data loading and text output.

Mar 12, 2021
Loading thumbnail…

Smiley Face Part VI v.3

A grid of eighteen randomized smiley faces renders as SVG through React components split across modules. Each face uses d3.arc to generate a mouth path, while background circles, eyes, and a translated group container are built from reusable React components. The demo shows ES6 module imports, React fragments for grouping eye circles, and a FaceContainer that wraps children in an SVG group. Random values for stroke width, eye offset, eye radius, and mouth dimensions vary each face’s appearance.

Mar 10, 2021
Loading thumbnail…

Smiley Face Part 6 v2

This example shows a simple smiley face composed of a yellow circle, two eyes, and a curved mouth. The face is rendered as SVG using React components, with the mouth’s arc generated by the `arc()` API from d3. The code uses ReactDOM to mount the components and d3.v6, specifying dimensions, offsets, and radii as constants. The visualization uses hardcoded parameters, with no external data source.

Mar 10, 2021
Loading thumbnail…

Smiley Face Part 6

This example shows a smiley face constructed from modular React components. A yellow circle forms the background, with two smaller circles for the eyes and a D3-generated arc for the mouth, all positioned within an SVG canvas using an SVG group and translate transform. The code uses React for component composition, D3 v5’s `arc()` API to create the mouth path, and D3’s random-looking data to format arcs. It appears as a single frame from a series exploring incremental assembly of the face.

Mar 10, 2021
Loading thumbnail…

Smiley Face Part 3

This example shows a smiley face composed of a yellow background circle, two eyes, and a curved mouth, all rendered as SVG elements. The components are built with React function components and use d3.v6’s `arc` generator to define the mouth path. The SVG is centered via a translate transform, with fixed dimensions and stroke widths. The code relies on React and ReactDOM for rendering, and d3 for the arc shape, producing a static, standalone visualization.

Mar 5, 2021
Loading thumbnail…

Smiley Face SVG assignment

A React-rendered SVG draws a stylized smiley face using D3’s `arc` generator for the curved mouth. The face is a circular gradient-filled shape with black stroke, positioned at the center of a 960×500 viewport, and includes two eye circles and two eyebrow lines. The code explicitly uses D3 v6 for the arc path and React 16.9 for component rendering, with all coordinates and radii computed from the viewport dimensions. The rendering approach is fully static SVG.

Mar 3, 2021
Loading thumbnail…

Smiley Face Part 1

A minimalist smiley face drawn with two eyes, a curved mouth, and a circular head, all rendered in SVG. The face is constructed using React and D3 v6, with the mouth generated by D3’s `arc()` function to form a semicircular path. Positions are computed from fixed offsets and the canvas dimensions, while the large yellow circle uses a thick black stroke for the face outline.

Mar 3, 2021