JadeITNT

@JadeITNT·11 public vizzes

Scatterplot

A scatterplot displays the population of the top 10 most populous countries, with each circle's horizontal position encoding population size and vertical position organizing countries by name. The chart uses D3 v7 with `scaleLinear` for the x-axis, `scalePoint` for the y-axis, and `axisLeft`/`axisBottom` to render grid lines. Data loads from a CSV file via `d3.csv`, and circles are appended to an SVG using `selectAll` and `enter`.

Dec 21, 2021

Loading thumbnail…

Cars Scatterplot

This scatterplot displays the relationship between vehicle weight and horsepower for a dataset of cars, with each circle representing an individual car. The visualization uses D3 v7 to load the auto-mpg CSV data, then employs `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes. The code renders SVG circles with a red fill and 50% opacity, while library functions like `extent` and `nice` help determine the scales. Title and axis labels are added directly to the SVG group elements.

Dec 1, 2021

Loading thumbnail…

Customising Axes

This visualization shows the ten most populous countries as a horizontal bar chart, with custom formatting applied to both the x-axis and y-axis. Population values are abbreviated using D3’s `format('.3s')` and then converted from billions to a friendlier label, while the y-axis labels are cleaned by removing tick lines and the domain path. The chart uses `scaleLinear` for the population axis, `scaleBand` for the country categories, and `axisBottom` and `axisLeft` for rendering, with data loaded from a CSV file via `d3.csv`.

Nov 26, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst, with each color represented as a slice of a pie chart. It loads color data from a CSV file using D3’s `csv` utility, then uses React to render the SVG paths. The pie layout is computed with `d3.pie` and arcs are generated with `d3.arc`, while React manages the component state and rendering. The code runs entirely in the browser with D3 v5 and React 16.9.

Nov 21, 2021

Loading thumbnail…

Rendering Data with React

This example shows the 148 named CSS colors rendered as horizontal stripes, forming a colorful gradient block. The visualization uses React to map each row of CSV data to a styled div element whose background color comes from the parsed hex value. The code loads data with d3.csv from a GitHub gist, then iterates over the parsed objects to generate the stripes. React’s useState and useEffect manage the asynchronous data loading, while the rendering relies entirely on ReactDOM to inject the generated divs into the page.

Nov 21, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a line chart of San Francisco weekly temperatures, sourced from a CSV via d3.csv. The visualization encodes timestamps on the x-axis and temperature values on the y-axis, with tooltips displaying temperature details. It leverages vega-lite-api to construct the chart specification, vega-lite to compile it, and vega-tooltip for interactive hover information, all styled with a custom config for readability.

Nov 21, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates a simple data-loading workflow that displays dataset statistics, including file size, row count, and column count, as a large text output. Built with React and D3, it uses the `useState` and `useEffect` hooks to fetch a CSV file from a GitHub gist via D3’s `csv` function. The loaded data is formatted and summarized using `d3.csvFormat` and the `message` utility, while the interface shows a “Loading…” state until the asynchronous request resolves. The visualization integrates React 16.9 and D3 v7 in a single-page app.

Nov 19, 2021

Loading thumbnail…

Loading and Parsing CSV Data

A minimalist web page displays the basic statistics of a remote CSV file: its size in kilobytes, row count, and column count. Using D3 v7, the example loads the data with `d3.csv` from a GitHub gist containing named CSS colors, then outputs the parsed information as plain text. The code also demonstrates alternative parsing approaches with the Fetch API and `d3.csvParse`, though the primary visualization is purely textual.

Nov 19, 2021

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across an SVG canvas, updating its position in real time. Built with React and SVG, the app uses a `useState` hook to track mouse coordinates from an `onMouseMove` event handler on the `<svg>` element. The circle radius is fixed at 30 pixels, and the canvas dimensions are 960 by 500, with the initial cursor position centered. The example demonstrates interactive state management and event-driven rendering in a React-based visualization.

Nov 19, 2021

Loading thumbnail…

Making a Bar Chart

This bar chart displays the obesity rates of the most affected countries using 2016 data from a Wikipedia list. It renders horizontal bars for each country, with the length of each bar proportional to the obesity rate percentage. The visualization uses D3 v7 with `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` for the axes. The SVG elements are styled with `fill: steelblue`, and the data is loaded from a local `data.csv` file.

Nov 18, 2021

Loading thumbnail…

Let's make a face with D3.js

A cheerful yellow face constructed with SVG elements in D3.js demonstrates chained transitions. The code builds a centered group containing a circle for the head, two circles for eyes, and rectangles for eyebrows, all with fixed coordinates and styling from CSS classes. A mouth uses the `d3.arc()` path generator with specified angles. The eyebrows animate through a `transition.attr()` sequence, moving down and up over two one-second intervals. The example imports `select` and `arc` from D3 v7 and renders entirely as static SVG shapes with programmed motion.

Nov 18, 2021