Sam Lite

@litesam·11 public vizzes

Visualization Labels

This line chart tracks cumulative global Coronavirus deaths over time, using a logarithmic y-axis to accommodate the data's wide range. The visualization is rendered as an SVG within a React component, leveraging D3 v5 APIs such as `scaleTime`, `scaleLog`, and `line` for path generation, while custom `XAxis` and `YAxis` components apply `axisBottom` and `axisLeft` to draw gridlines and ticks. Data is fetched from the Johns Hopkins Coronavirus dataset via `d3.csv`.

Mar 28, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart shows the temperature in San Francisco over a week, with each data point plotted as a semi-transparent circle that highlights in orange on hover. The code uses D3 v5’s `scaleTime` and `scaleLinear` to map timestamps and temperatures, with `axisBottom` and `axisLeft` rendering labeled axes and gridlines. Data is loaded via D3’s `csv` function from a remote dataset. The SVG visualization includes a title, axis labels, and a large margin layout, with styled tick text and hover effects defined in CSS.

Feb 25, 2020

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The code uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render SVG circles, with hover effects changing their fill color. Data is loaded as CSV from a remote dataset, with each temperature parsed as a number and timestamp as a `Date`. Axis labels and a title are added as SVG text elements.

Feb 18, 2020

Loading thumbnail…

Car Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each vehicle represented as a semi-transparent blue circle. The visualization uses D3.js (v5) with SVG rendering, employing `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to construct the axes, while `d3.csv` loads the auto-mpg dataset. Hovering over a circle changes its color and opacity, and the chart includes labeled axes and a title.

Feb 17, 2020

Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top ten most populous countries using circles positioned along a linear x-axis (population count) and a point-based y-axis (country names). The visualization is rendered as SVG using D3 v5, with axes generated via axisBottom and axisLeft, while scaleLinear and scalePoint map the data values. Population values are loaded from a CSV file and multiplied by 1000, with tick labels formatted using D3’s format function to abbreviate large numbers (e.g., ’1.4B’).

Feb 16, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, with countries listed on the y-axis and population values on the x-axis. The chart uses D3 version 5's `scaleLinear` for the x-axis and `scaleBand` for the y-axis. It customizes the x-axis tick labels to abbreviate numbers (e.g., converting billions to "B") via `format('.3s')` and removes default axis lines. Data is loaded from a CSV file using D3's `csv` function, and the chart is rendered as SVG elements.

Feb 16, 2020

Loading thumbnail…

React and bar chart Right Approach

A horizontal bar chart ranks the ten most populous countries, with bar lengths proportional to population and country names on the vertical axis. Built with React and D3 v5, the reusable `BarChart` component uses D3’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to compute scales and render axes into an SVG `<g>` element. The chart reads population data from a CSV file via `d3.csv`, and re-renders its SVG `<rect>` bars declaratively through React’s component model.

Feb 15, 2020

Loading thumbnail…

React and bar chart Black Box approach

A bar chart displays population estimates for ten countries, sorted by country name along the y-axis and population count along the x-axis. Built with React and D3 v5, the visualization uses a black-box approach where D3 handles all SVG rendering inside a React component via a ref, while React manages the data-fetching lifecycle. The code loads data from a local CSV with `d3.csv`, scales values with `d3.scaleLinear` and `d3.scaleBand`, and draws axes using `d3.axisLeft` and `d3.axisBottom`.

Feb 14, 2020

Loading thumbnail…

Making a Bar Chart 2019

This example uses D3 v5 to render a horizontal bar chart of 2019 population estimates for the ten most populous countries, sourced from a CSV file. It maps population values to a linear scale for bar widths and country names to a band scale for vertical positioning, drawing SVG rectangles. The chart includes axes generated with `axisLeft` and `axisBottom`, while data loading and scaling use `csv`, `scaleLinear`, `scaleBand`, and `max`.

Feb 13, 2020

Loading thumbnail…

SVG 2019

This example shows a yellow smiley face drawn inside an SVG canvas. The face consists of a large circular head centered in the 960x500 viewport, two smaller circles positioned for eyes, and a curved path forming a smile. The visualization uses d3.select and d3.append to build the SVG elements, with d3.arc generating the mouth’s path coordinates. All shapes are styled using SVG attributes like fill and stroke. The code runs in a React framework using D3 v5, rendering purely through SVG without external data.

Feb 13, 2020

Loading thumbnail…

React and SVG with D3

This example shows a yellow smiley face drawn as an SVG graphic, built with React components and D3’s arc generator for the mouth. The face includes a circular head, two eyes, and a curved mouth, all positioned using D3’s arc function with specified inner and outer radii and start/end angles. React renders the SVG elements declaratively, while D3 (v5) computes the path data for the mouth arc. The code uses `ReactDOM.render` to mount the app and D3’s `arc()` API to define the mouth’s shape.

Feb 13, 2020