Geekboxer

@Geekboxer·15 public vizzes

Fork of Coronavirus Deaths Over Time by Country

A line chart shows cumulative global coronavirus deaths over time, with one colored line per country. The y-axis uses a logarithmic scale to accommodate wide variation in death tolls. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLog` for axes, `line` for path generation, and `axisBottom` and `axisLeft` for ticks. Data comes from a CSV of reported deaths loaded via `d3.csv`, transformed into per-country time series.

Jul 29, 2021

Loading thumbnail…

Fork of Interactive Color Legend

A scatter plot of the Iris dataset shows petal length versus sepal width, with points colored by species. Hovering over a species in the color legend dims all other points and highlights only that species. The visualization uses React components with D3 scales from `d3.scaleLinear` and `d3.scaleOrdinal`, rendering as SVG circles and axis ticks. Data is loaded via `d3.csv` from a GitHub Gist.

Jul 27, 2021

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attributes are plotted on the x- and y-axes via dropdown menus. The chart renders data points as SVG circles with tooltips, using D3’s `scaleLinear`, `extent`, and `format` APIs for axes and tick labels. The visualization is built with React, managing state for axis selections, and a custom `useData` hook loads the CSV data using `d3.csv`.

Jul 27, 2021

Loading thumbnail…

Fork of Stylized Line Chart

This example visualizes weekly temperature readings from the Data Canvas Sense Your City dataset as a stylized line chart. The chart displays temperature over time using a smooth curve, with labeled axes for time and temperature. The code builds the visualization with React components and D3 v5 APIs including `scaleTime`, `scaleLinear`, `line`, and `curveNatural`. It renders as an SVG, using D3’s `csv` loader to fetch data and `extent` to compute domains, with tick marks and axis labels styled via CSS.

Jul 27, 2021

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City dataset. The chart uses a time-scaled x-axis showing weekday labels and a linear y-axis for temperature, with each data point rendered as a circle. Built with React and D3 v5, the code employs `scaleTime`, `scaleLinear`, and `extent` to map data, while custom `AxisBottom` and `AxisLeft` components generate SVG ticks and labels. Circles include a `<title>` tooltip displaying the formatted timestamp.

Jul 27, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This example renders a bar chart of the ten most populous countries using React and D3 v5, with data from the 2019 United Nations World Population Prospects. The chart is intentionally minimal, lacking axes and using only bars labeled with country names and value ticks generated by `xScale.ticks()`. SVG elements are created via React's JSX, with scales defined by `scaleBand` and `scaleLinear`. Data loads asynchronously through `d3.csv`, and the bars update once the top ten rows are fetched and parsed.

Jul 27, 2021

Loading thumbnail…

Fork of Axes with React & D3

This interactive bar chart displays the top 10 most populous countries in 2020 according to the United Nations World Population Prospects 2019. The visualization loads CSV data via `d3.csv` and uses React with hooks (`useState`, `useEffect`) to manage asynchronous data fetching and rendering. D3 v5 constructs the scales: `d3.scaleBand` for countries on the y-axis and `d3.scaleLinear` for population on the x-axis. The SVG output includes gridlines and tick labels via `xScale.ticks()`, with bars drawn as `rect` elements.

Jul 27, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a series of unlabeled rectangles, with bar width proportional to each country’s projected 2020 population, and no axes or gridlines. Using React hooks to manage state, it fetches tabular data from the United Nations World Population Prospects 2019 via `d3.csv`, then renders SVG rectangles scaled with `d3.scaleBand` for the y-axis categories and `d3.scaleLinear` for the x-axis values. The visualization intentionally omits chart furniture to emphasize raw quantitative comparison.

Jul 27, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a bar chart, using rectangle widths proportional to each country’s 2020 population estimate from the United Nations World Population Prospects 2019. The chart intentionally omits axes and labels, presenting only bare colored bars against a plain background. Built with React and D3 v5, the code uses `d3.csv` to load the data, `scaleBand` for the vertical positioning of countries, and `scaleLinear` for the horizontal bar lengths. All bars are rendered as SVG `<rect>` elements within a React component, with each bar’s width derived from the maximum population value.

Jul 27, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

A radial burst of CSS named colors, rendered as SVG paths in React, displays each color as a wedge from the center outward. The code loads color data from a CSV file using D3’s `csv` utility, then computes arc angles with `d3.pie` and draws them via `d3.arc`. React manages the component state and lifecycle, using `useState` and `useEffect` to fetch data asynchronously. The visualization maps each color’s hex value to its wedge fill, creating a full circle where every slice represents a distinct named color.

Jul 27, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for automobiles from the UCI Machine Learning Repository’s Auto MPG dataset. A semi-transparent line mark encodes mpg on the x-axis and horsepower on the y-axis, with color distinguishing origin and size representing weight. The visualization is built using the Vega-Lite API, which is registered with vega, vega-lite, and vega-tooltip for interactive tooltips. Data is loaded asynchronously via d3.csv, and the final SVG is rendered to fit the full window size.

Jul 27, 2021

Loading thumbnail…

Fork of Smiley Face Part IV

This example shows a yellow smiley face with black-outlined eyes and a curved mouth, centered on a white background. The visualization is built using React 16.9 and D3 v5, with D3’s `arc()` function generating the mouth path. React components render the SVG elements, including circles for the eyes and an SVG `<path>` for the mouth, while D3 handles the arc geometry. The fixed dimensions and hardcoded offsets define the face’s layout without external data.

Jul 27, 2021

Loading thumbnail…

Fork of Smiley Face Part III

This example displays a classic yellow smiley face centered on an SVG canvas, with a blue outline, two eyes, and a curved mouth. It demonstrates how React manages the SVG elements while D3’s `arc` function generates the mouth path geometry. The component uses JSX to render circles and a path, with D3 v5 providing the arc generator and React 16.9 handling the DOM updates. The face is drawn using fixed numeric constants for dimensions, strokes, and positioning.

Jul 27, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A responsive smiley face fills the browser viewport, drawn with nested SVG circles: a yellow face with a black stroke, two black eyes, and no mouth. Built with React and ReactDOM, the JavaScript defines positions and radii relative to the window’s dimensions and center, while SVG attributes handle the shapes and styling. The example adapts its size dynamically by reading `window.innerWidth` and `window.innerHeight`.

Jul 26, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a step-by-step construction of a smiley face using basic SVG shapes, presenting the halfway point of the drawing process. A large blue circle forms the head, with two smaller black circles placed for the eyes. The code uses raw SVG elements—`circle` tags with `cx`, `cy`, `r`, `fill`, and `stroke` attributes—positioned within an `<svg>` element sized 960 by 500 pixels. No JavaScript libraries or data sources are involved; the entire visualization relies on static SVG markup with inline styling.

Jul 26, 2021