Skip to main content
Log in
L

linkshady

@linkshady·14 public vizzes

Loading thumbnail…

Vega-Lite API Template

This example visualizes the top religions by country from a CSV dataset, using grouped bars to compare population counts across countries. It employs the Vega-Lite API to construct the chart, with D3.js loading the data and Vega-Tooltip providing interactive hover details. The visualization uses a dark theme with custom axis and label styling, rendering to SVG and fitting itself to the full browser window. The code also demonstrates registering Vega, Vega-Lite, and the API together for a streamlined charting workflow.

Oct 20, 2020
Loading thumbnail…

React Starter

This example displays a single, large “AAAA” message centered on the screen, rendered as a React component. It uses React and ReactDOM from CDN, with a custom imported text constant defined in `importtext.js`. The app component returns a div with a CSS class for styling, and ReactDOM renders it into the root element. The code imports `Mytext` but does not use it, instead hardcoding the output text.

Oct 19, 2020
Loading thumbnail…

Untitled

A yellow circle with a black outline and two black eyes sits centered on a blank SVG canvas, presenting the first stage of a smiley face. The static composition uses two small black circles positioned symmetrically above the center of the large yellow face. The rendering is achieved through raw SVG elements in an HTML file, with no JavaScript or external libraries involved. The circle shapes are defined directly with `cx`, `cy`, and `r` attributes, while the stroke and fill properties are set inline.

Oct 19, 2020
Loading thumbnail…

temperature in san francisco line chart

This example displays a week of temperature readings in San Francisco as a smooth line chart. The visualization uses React with SVG rendering, and the data loads from a CSV file. D3 functions like `scaleTime`, `scaleLinear`, `line` with `curveBasis`, `axisLeft`, and `axisBottom` construct the plot, while custom axes labels and a title are added. The line path is styled with a steelblue stroke, and the chart includes a time-based x-axis and temperature-based y-axis.

Oct 16, 2020
Loading thumbnail…

Let's make a bar chart with D3.js

This example shows a bar chart of country populations from a CSV file, using D3.js v5 within a React project. The chart renders as an SVG with `rect` elements scaled by `d3.scaleLinear` for the y-axis and `d3.scaleBand` for the x-axis, alongside `d3.axisLeft` and `d3.axisBottom` for tick marks. Data is loaded asynchronously via `d3.csv`, with population values converted to thousands, and margins are applied inside a main `<g>` group.

Oct 16, 2020
Loading thumbnail…

cars scatter plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each circle representing a vehicle. Built with React and rendered as SVG, it uses D3’s `csv` loader and `scaleLinear` for axes, plus `axisBottom` and `axisLeft` for labeled tick marks. The D3 code maps the data to pixel coordinates, applies `extent` and `.nice()` to scale domains, and removes default tick lines for a clean presentation.

Aug 31, 2020
Loading thumbnail…

chart exercise

This example displays a bar chart of five product prices from a local CSV file. The visualization uses D3 version 5 to render SVG rectangles, with the y-axis scaled linearly from zero to the maximum price and the x-axis using a band scale for categorical item names. The chart includes labeled axes and steel-blue bars, with all text styled to a large size via CSS. The code manually applies margins and uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to construct the plot.

May 17, 2020
Loading thumbnail…

bowl of fruit-nested version update pattern

This example demonstrates the enter-update-exit pattern with nested selections in D3. The code uses `selection.enter()` and `selection.merge()` to bind fruit data to SVG groups, each containing a circle and text, with `scaleOrdinal` mapping fruit types to colors and radii. Timed mutations—removing an apple, changing a fruit to a lemon, and removing another—show how the visualization updates smoothly, with exiting groups removed via `.exit().remove()`. The SVG rendering uses a simple bowl shape drawn with a rect.

May 17, 2020
Loading thumbnail…

bowl of fruit general update pattern

Five apples appear as red circles in a bowl, then update through a sequence of removals and a type change to lemon. Using D3.js and its `selection.data` method with key functions, the example demonstrates the general update pattern: entering elements animate from radius zero, updating circles transition to new x-positions and colors, and exiting circles shrink away. SVG animations via `transition.duration` (1000ms) run automatically through `setTimeout` calls.

May 17, 2020
Loading thumbnail…

world population area chart

This area chart shows the growth of world population from 1950 to 2015, with the area under the curve filled in maroon and a blue outline. The visualization uses D3.js version 5.16 to load CSV data, parse dates, and map time and population values to an SVG canvas. It employs `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with `curveBasis` to generate the smooth filled region. The y-axis is labeled "Population" with tick values formatted in billions, while the x-axis shows years.

May 16, 2020
Loading thumbnail…

temperature in san francisco area chart

This visualization shows temperature readings in San Francisco over a week, with a smooth area chart tracing hourly variations from roughly 50 to 85 degrees Fahrenheit. The chart uses a maroon-filled area with a steel-blue stroke, plotted against time on the x-axis and temperature on the y-axis, with clear axis labels and a title. Built with React and SVG, the code leverages D3 v5 functions including `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisLeft`/`axisBottom` to render the chart. Data comes from a CSV file loaded via `d3.csv`.

May 16, 2020
Loading thumbnail…

temperature in san francisco scatter plot

This scatter plot visualizes temperature readings in San Francisco over a week, with each circle representing an hourly measurement plotted against time. The chart uses D3’s scaleTime and scaleLinear functions to map timestamps and temperatures to pixel coordinates, while axisBottom and axisLeft generate labeled axes. Data is loaded as CSV and parsed with d3.csv, then rendered as SVG circles with fixed radius. The visualization clearly reveals daily temperature cycles, with warmer afternoons and cooler nights across the week.

May 16, 2020
Loading thumbnail…

scatter plot

A scatter plot displays population figures for ten countries, with each circle positioned along a linear population axis and a point scale for country names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, rendering SVG circles with a steelblue fill. Data comes from a CSV file, with populations multiplied by 1000 and formatted using `format('.3s')` to show billions. Gridlines extend across the plot, and axis labels are added via appended SVG text elements.

May 16, 2020
Loading thumbnail…

customizing axes

This example shows a horizontal bar chart of population by country, with customized axes that remove the default axis lines and use formatted tick labels (abbreviating millions with "B"). The chart is built with React and rendered as SVG, using D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format`. Population data is loaded from a CSV file and multiplied by 1000, with grid lines generated via negative tick sizes and axis titles added as text elements.

May 15, 2020