Kenneth Silvere

@kennethsilvere·8 public vizzes

Line chart

This line chart visualizes San Francisco temperature readings over a week, with a smooth natural curve connecting individual data points and circles marking each observation. Built with React and D3 v5, the visualization uses `scaleTime` for the x-axis, `scaleLinear` for temperature values, and the `line()` generator with `curveNatural` for the path. Axes, labels, and tick marks are rendered as SVG elements, with tooltips providing abbreviated weekday labels for each data point.

Jun 25, 2021

Loading thumbnail…

Scatter Plot

This example displays a horizontal bar chart of population figures for ten countries from the 2019 UN Population dataset, loaded as CSV via D3’s `csv` utility. The visualization uses `scaleBand` for the categorical country axis and `scaleLinear` for the population axis, rendering SVG bars through React components. A native SVG `<title>` tooltip shows formatted population values upon hover, while the axis labels and ticks are styled with D3 `format` to abbreviate large numbers.

Jun 20, 2021

Loading thumbnail…

Stylized bar chart

This stylized bar chart displays the top 10 countries by population for 2020, using horizontal bars to rank each nation. Built with React and D3 v5, the visualization loads data from a CSV file containing UN population estimates. The code employs D3's `scaleBand` and `scaleLinear` to position bars, while `format(".2s")` converts large numbers into readable abbreviations. SVG rectangles render the marks, with hover tooltips providing exact values. The chart uses a clean Poppins font and a teal color scheme to highlight each bar's length.

Jun 20, 2021

Loading thumbnail…

Axes with React & D3

A React application renders a horizontal bar chart of the top ten countries by estimated 2020 population, using the UN Population 2019 dataset loaded via `d3.csv`. The code employs `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with custom axes built from `xScale.ticks()`. SVG elements—`rect`, `line`, and `text`—are generated directly in JSX, while React’s `useState` and `useEffect` manage asynchronous data loading and display a loading message until the CSV resolves.

Jun 20, 2021

Loading thumbnail…

Make a bar chart with React & D3

This example shows a bar chart of the ten most populous countries in 2020, with horizontal bars scaled by population size. It loads data from a CSV file using d3.csv, parses the population values with a row function, and manages the asynchronous data through React’s useState and useEffect hooks. The chart renders as SVG elements, using d3.scaleBand for the categorical country axis and d3.scaleLinear for the population axis. React handles the component lifecycle and DOM updates while D3 provides the data loading and scale utilities.

Jun 20, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

This example renders a donut chart of CSS named colors, with each slice colored by its corresponding hex value. The visualization fetches data from a CSV file using the `d3.csv` utility and manages the loading state through React hooks (`useState` and `useEffect`). The chart is drawn as SVG paths generated with `d3.arc`, positioned using a translation transform. React 16.9 and D3 v5 handle the data flow, while the page displays a loading message until the dataset arrives.

Jun 19, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the loading and parsing of a CSV file containing CSS Named Colors. It displays a summary message showing the data size in kilobytes, the number of rows, and the number of columns. The visualization uses D3 v5’s `d3.csv` method to fetch the remote CSV data and handle it as a Promise. The code then uses `d3.csvFormat` to calculate the data size and accesses the `data.columns` property to determine the column count, rendering the final text inside an HTML `<pre>` element.

Jun 19, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays summary statistics from a CSV file of CSS named colors. It fetches the remote dataset with D3’s `d3.csv` method, then reports the file size in kilobytes, the total row count, and the number of columns. The output appears as plain text inside a `<pre>` element. A commented-out alternative demonstrates using `fetch` with `d3.csvParse`. The page is built with vanilla HTML, CSS, and JavaScript, loading D3 v6 from a CDN.

May 31, 2021