A

AndrewRiceMGW

@AndrewRiceMGW·17 public vizzes

Loading thumbnail…

Fork of Bowl of Fruit

A fork of the Bowl of Fruit example demonstrates dynamic data updates with D3’s enter, update, and exit selections. It shows a row of fruit shapes in a rounded bowl, where apples are red circles and lemons are yellow circles of different sizes, with each fruit labeled by type. The visualization uses `d3.scaleOrdinal` for color and radius mapping, and updates the SVG via `fruitBowl` over timed intervals that remove fruits, change an apple to a lemon, and filter out another apple. The rendering relies on SVG groups containing `circle` and `text` elements, with transitions triggered by JavaScript `setTimeout` calls.

Loading thumbnail…

Bowl of Fruit

A bowl of fruit demonstrates animated enter, update, and exit transitions for SVG circles representing apples and lemons. Five apples initially render, then one is removed, another changes to a lemon, and a third disappears, with each change animating radius and position over one second. The example uses d3.select and d3.range to generate data, and a custom fruitBowl function with d3.scaleOrdinal for color and radius, plus selection.merge and selection.exit with transition.duration.

Loading thumbnail…

World Population Area Chart

This area chart visualizes global population growth from 1950 to 2015 using data from the United Nations World Population Prospects 2017. The maroon-filled area curve shows population values over time, with a time-scaled x-axis and linear y-axis formatted in billions. Built with D3 v6, the visualization uses `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the smooth path, along with `axisLeft` and `axisBottom` for labeled gridlines. Data is loaded as CSV and rendered as SVG.

Loading thumbnail…

Temperature in San Fransisco Area Chart

This area chart displays one week of temperature data in San Francisco, sourced from Data Canvas: Sense Your City. The visualization uses a smooth, basis-curved area path to show temperature fluctuations over time, with a time-scaled x-axis and linear y-axis. Built with D3 v6, it leverages `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with `curveBasis` to render the SVG chart, including grid lines and labeled axes. Temperature values are parsed from a CSV dataset and mapped to the chart’s coordinates.

Loading thumbnail…

Temperature in San Fransisco Line Chart

This line chart visualizes one week of temperature data in degrees Celsius for San Francisco, sourced from Data Canvas: Sense Your City. The visualization plots temperature against time, with a smooth curve connecting data points and labeled axes for both variables. The chart is rendered as SVG using D3 v6, employing d3.csv for data loading, d3.scaleTime and d3.scaleLinear for scaling, d3.axisLeft and d3.axisBottom for axes, and d3.line with curveBasis for the smoothing.

Loading thumbnail…

Temperature in San Fransisco

This scatter plot displays one week of temperature readings in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The visualization uses D3 v6’s `scaleTime` and `scaleLinear` functions to map the data, while `axisBottom` and `axisLeft` generate the labeled axes with gridlines. Data comes from a CSV file loaded via D3’s `csv` method, and each temperature observation is rendered as an SVG circle. The chart includes axis labels and a title, all styled with CSS classes.

Loading thumbnail…

Temperature in San Fransisco Scatter Plot

This scatter plot displays one week of temperature readings in degrees Celsius over time in San Francisco, with each red circle representing a timed measurement. The visualization uses D3.js version 6 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to render axes and plot points in an SVG. Data from Grey Area’s Data Canvas Sense Your City is loaded via `csv` and parsed into numerical temperature values and timestamp date objects. The chart includes labeled x and y axes with gridlines, emphasizing the temporal trend of temperature fluctuations.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG data set. Each red, semi-transparent circle represents a car, positioned by its horsepower and weight values. The visualization uses D3 v6’s scaleLinear, extent, axisLeft, and axisBottom to construct the plot, with axes styled using tickSize and tickPadding. The code loads data from a CSV file and renders the chart as an SVG, including axis labels and a title.

Loading thumbnail…

Customizing Axis

This horizontal bar chart displays the populations of the world’s ten most populous countries, based on 2018 estimates from the United Nations World Population Prospects. Built with D3 version 6, the visualization uses `scaleLinear` and `scaleBand` to map population values and country names. Custom axis styling removes the chart’s default domain lines, applies tick marks with negative sizing to create a grid, and formats tick labels using `format` to abbreviate numbers, such as converting gigabytes to billions.

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the 2018 population estimates for the ten most populous countries, using data from the United Nations' World Population Prospects 2017. The visualization employs D3 v6 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to create an SVG rendering with horizontal bars. Population values are formatted in thousands, with each rectangle’s width scaled proportionally and countries listed on the y-axis. The chart is built with a margin-based layout and uses `selectAll` to bind data to SVG rectangles.

Loading thumbnail…

Making a Bar Chart

This horizontal bar chart displays the populations of the ten most populous countries in 2018. It uses D3 v6 to load the CSV data and render SVG rectangles and axes. The chart employs d3.scaleLinear for the quantitative population axis, d3.scaleBand for categorical country labels, and d3.axisLeft and d3.axisBottom to draw the scales. Population values are multiplied by 1,000 after parsing.

Loading thumbnail…

Let's make a face with D3.js

This example builds a cartoon face from SVG shapes using D3.js v6, with yellow circular head, eyes, eyebrows, and a mouth drawn using the `d3.arc` path generator. The code animates the eyes by transitioning their radius attribute and shifts the eyebrow group’s transform property through sequential `transition.duration` calls. All elements are centered within an SVG via a translated group, and the face is constructed entirely from static shape attributes rather than data binding or external data sources.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in a 960×500 viewport. It shows how CSS classes and inline SVG styling control fill, stroke, and stroke-width properties, including a grouped set of shapes with a blue fill and black outline. The code uses raw SVG elements and a stylesheet with classes like `.lines` and `.highlighted` to apply styling. Rendering is static, with no interactivity or data binding, and the SVG is scaled via a transform attribute.

Loading thumbnail…

HTML Cars Report

This example displays a simple HTML cars report listing three used vehicles with their model years and prices. The page uses plain HTML with an unordered list to present the car data, while a linked stylesheet (`styles.css`) controls the visual styling. The report emphasizes the first item—a 2012 Nissan Leaf—by applying the `highlighted` CSS class, which sets its text color to red. The page relies on standard HTML elements and CSS rules, including a monospace font and large base font size, to create a bold, readable listing without any JavaScript or external visualization libraries.

Loading thumbnail…

Cars Report

This example demonstrates a text-based report of used cars, showing which vehicles are priced under $2,000. It begins by displaying “Loading…” while a JavaScript Promise simulates delayed data retrieval. After a two-second timeout, the `getCars` function resolves a hardcoded JSON dataset of five vehicles. The `generateReport` utility filters the array and formats each entry as a line of text, which is then inserted into a `<pre>` element. The page uses plain HTML, CSS, and JavaScript, with modular ES6 imports for `formatCar` and `generateReport`.

Loading thumbnail…

Cars Report

This example demonstrates a data-processing pipeline for a car inventory report. It displays a list of vehicles priced under $2,000, formatted as “year make model: $price” in a large HTML `<pre>` element. The code uses asynchronous JavaScript with a `Promise` and `setTimeout` to simulate a 2-second data fetch from a hardcoded JSON array. The `Array.filter()` and `Array.map()` methods, along with template literals in `formatCar`, generate the report, while `document.getElementById()` updates the page content from “Loading...” to the final output.

Loading thumbnail…

Cars Report

This example displays a simple "Hello" message in large text on an HTML page, using React as the framework. The code imports a dataset of five used cars from a separate module, parsing it from JSON into a JavaScript array, though the data is not rendered visually. The page structure is defined in an HTML file with a single `<pre>` element, which is updated via the Document Object Model API (`document.getElementById`) within the `index.js` script. The example demonstrates basic React project setup and DOM manipulation without any charting or visualization libraries.