Subliminal_[var]

@SubliminalGuy·7 public vizzes

D3.js Bar Chart with FCC Data

This example visualizes United States GDP data from FreeCodeCamp, rendering a bar chart in SVG where each bar represents quarterly GDP values. The chart uses D3.js v4 with a linear y-scale and an x-axis showing years, fetched from a remote JSON source. The code employs `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to map data to bar heights and positions, with bars styled via CSS classes.

Sep 30, 2021

Loading thumbnail…

Visualize Data with a Bar Chart FCC

This example shows quarterly U.S. GDP data from the FreeCodeCamp tutorial dataset as a bar chart. Each bar represents a quarter, with the x-axis mapped to time and the y-axis to GDP value. The visualization uses React and D3 v7, building scales with `scaleTime` and `scaleLinear`, and manually rendering SVG ticks and bars rather than using D3’s axis generator. The data is fetched asynchronously via `json()`, and bars are drawn as SVG rectangles, with custom tick components for both axes.

Jul 30, 2021

Loading thumbnail…

Stylized Bar Chart

This stylized horizontal bar chart displays the ten most populous countries from the UN World Population Prospects 2019 dataset, ranking them by estimated 2020 population. Built with React and D3 v7, the visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The SVG render includes custom `AxisBottom` and `AxisLeft` components, with values formatted using D3's `format` function to abbreviate large numbers (e.g., converting "G" to "B"). Population values are converted from strings to numbers via `+d['2020'] * 1000` before being mapped to bar widths.

Jul 29, 2021

Loading thumbnail…

Visualizing Data with React and D3.arcs

This example renders a radial burst of CSS named colors from a CSV dataset, using React to manage state and D3's `arc` and `pie` generators to compute SVG path geometry. Each color is drawn as a slice of equal angular width, filled with its hex value from the data, and positioned around the center of a 960x500 viewport. The implementation fetches the CSV via `d3.csv` and maps the pie result to `<path>` elements within a translated `<g>` group.

Jul 28, 2021

Loading thumbnail…

Rendering Data with React

This example renders CSS named colors as a vertical sequence of colored strips. It loads color data from a CSV file using `d3.csv`, fetches it through React’s `useEffect` and stores it with `useState`, then maps each row to a `<div>` whose `backgroundColor` is set from the `RGB hex value` column. The visualization relies on React’s `ReactDOM.render` and D3’s CSV parser, producing a simple 960-pixel-wide swatch grid.

Jul 23, 2021

Loading thumbnail…

Vega-Lite API Template subGuy

This example uses the Vega-Lite API to render a GDP bar chart, displaying the raw data from the freeCodeCamp ProjectReferenceData repository. The visualization plots the data’s first field on the x-axis and the second on the y-axis, with tooltips showing the value. The chart is built with `vega-lite-api` and `vl.markBar()`, and configured with custom guide-label and guide-title styles from a `config.js` file. The visualization is rendered to SVG via `vega` and `vega-lite`, using `vega-tooltip` for interactivity, and it is sized to fit the browser window with `window.innerWidth` and `window.innerHeight`.

Jul 16, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example displays basic SVG primitives—circles, rectangles, lines, and paths—organized in groups that are scaled and translated. Styling for the line group comes from CSS, setting stroke color and width, with a specific path receiving a custom color and rounded line joins. The code demonstrates how SVG elements inherit styling from CSS classes and parent group attributes, using inline presentation attributes like `fill` and `stroke-width` for direct control.

Jul 14, 2021