kkwyoung

@kkwyoung·15 public vizzes

test

This example presents a radar chart comparing five data points across 19 labeled features, with each point rendered as a semi-transparent polygon overlaid on a shared circular grid. The visualization uses D3 v5 within a React framework, leveraging `d3.scaleLinear` for radial scaling and `d3.line` to generate path coordinates from the CSV data. Hover interactions trigger transitions that highlight a selected polygon while dimming others, and the legend identifies each series by ID.

Aug 12, 2020

Loading thumbnail…

D3 Bar Chart

This bar chart displays the populations of the world’s ten most populous countries, with each bar’s length proportional to its population. The chart uses a linear scale for the x-axis and a band scale for the categorical y-axis, drawing the bars as SVG rectangles via the D3.js `select`, `scaleLinear`, `scaleBand`, and `axisBottom` APIs. Population values are parsed from a local CSV file, and axis ticks are formatted using D3’s `format` to abbreviate large numbers, while the chart’s title and axis labels are added as SVG text elements.

Aug 12, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in two translated groups against a plain background. The first group shows default black shapes, while the second uses group-level fill and stroke attributes to alter appearance. A third group, moved horizontally, displays a stroke-heavy line and a semi-transparent steelblue path with rounded corners. The code relies on raw SVG elements and CSS class selectors (`.lines`, `.lines path`) for styling, with a JavaScript console log present but no interactive behavior.

Aug 12, 2020

Loading thumbnail…

test

This radar chart visualization displays multiple data points across seven axes (A through G), with each colored polygon representing a distinct row from the CSV data. The code builds the chart using D3 v5’s `scaleLinear` for radial positioning and `d3.line` for connecting coordinate points, rendering both filled and stroked paths via SVG. The fixed dataset includes five records with numeric feature values, imported asynchronously through `csv()`. The visualization emphasizes comparative shapes within a circular coordinate system, using a consistent color palette for each data series.

Aug 12, 2020

Loading thumbnail…

Population Area Plot

This area plot visualizes the growth of world population from 1950 to 2015, using a smooth, filled curve to emphasize the upward trend over time. The chart is rendered as SVG and built with the D3 v5 library, employing `area`, `curveBasis`, `scaleTime`, and `scaleLinear` to generate the shape. The y-axis ticks are formatted to display values in billions using `format`. Data is loaded from a CSV file, with the population values parsed as numbers and years as dates.

Aug 8, 2020

Loading thumbnail…

Temp Area Plot

This visualization shows temperature readings in San Francisco over a week, displayed as a smooth area chart with time on the x-axis and temperature on the y-axis. The graph, rendered as an SVG, uses a firebrick-colored filled area beneath a curve created with D3’s `area()` and `curveBasis` functions. The code loads the temperature data from a CSV file and processes timestamps as dates. Axes are generated using `scaleTime` and `scaleLinear` scales, with grid lines and labels added via `axisBottom` and `axisLeft`, and axis titles and chart title are included in the layout.

Aug 8, 2020

Loading thumbnail…

Temp Line Plot

This visualization shows a week of hourly temperature readings in San Francisco as a smooth, firebrick-colored line plotted against time and temperature axes. The line chart is rendered as an SVG using d3.v5, with the time-based x-axis and linear y-axis generated through axisBottom and axisLeft. The code imports specific d3 modules including scaleTime, scaleLinear, axisBottom, axisLeft, and line, applying a curveBasis to the line generator. The csv data is loaded and parsed, with temperature values converted to numbers and timestamps to Date objects.

Aug 7, 2020

Loading thumbnail…

Temp Line Plot

A line plot displays hourly temperature readings from a CSV file over several days. The chart shows temperature fluctuations over time, with the x-axis representing timestamps and the y-axis representing degrees. The visualization uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for scaling, and d3.line to generate the path. SVG rendering includes axis labels, a title, and grid lines created with d3.axisBottom and d3.axisLeft. The line is styled with a firebrick stroke.

Aug 7, 2020

Loading thumbnail…

Scatter Plot

This scatter plot displays the populations of the top 10 most populous countries, with each circle positioned along a point scale for country names and a linear scale for population values. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the chart. Population data is loaded from a CSV file, and axis tick labels are formatted using `format` with abbreviations like "B" for billions. The chart includes grid lines, an axis label, and a title, with circles styled in steelblue.

Aug 7, 2020

Loading thumbnail…

D3 Face

This example uses D3 v5 to draw a stylized yellow face, including a circular head, two eyes, and eyebrows, within an SVG. The eyebrows are animated using a chained `transition` to move down and back up. The mouth is created using D3's `arc` generator, and all elements are positioned relative to the SVG's center using a `g` element and transformations. The code applies shapes like `circle` and `rect`.

Aug 7, 2020

Loading thumbnail…

D3 Bar Chart

This bar chart displays the populations of the top 10 most populous countries, sorted vertically by country name. It uses D3 v5’s `csv` loader and `scaleLinear` and `scaleBand` to map population values and country categories, with axes generated by `axisLeft` and `axisBottom`. The SVG bars are rendered in steel blue, and population labels use the `format` function with abbreviated suffixes. Data comes from a local CSV file, and all rendering is done via SVG elements.

Aug 7, 2020

Loading thumbnail…

D3 Face

Aug 6, 2020

Loading thumbnail…

HTML Cars Report

A simple HTML page titled "Cars Report" displays a bulleted list of three used cars with their model years and prices, using plain HTML elements. The first item is highlighted in red via a CSS class called `.highlighted`, while the entire page uses a monospace font and enlarged font sizes defined in an external `styles.css` file. The code includes a JavaScript snippet that logs "Hello JavaScript!" to the browser's console, utilizing the built-in `console.log` API. No external libraries or data sources are used; the data is hardcoded directly in the HTML.

Aug 5, 2020

Loading thumbnail…

Cars Report

This example displays a text-based report of used cars, filtered to show only those priced below $2,000 and formatted as a list of year, make, model, and price. The page initially shows "Loading..." while it retrieves the car data, then replaces it with the report. It uses JavaScript's `Promise` and `setTimeout` in `getCars` to simulate a delayed data fetch, and `filter`, `map`, and `join` in `generateReport` to process the data. The HTML `<pre>` element renders the formatted output.

Aug 4, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that displays the text “Hello HTML” in the center of the browser window, with the font size set to an enormous 13em. It also runs a small JavaScript script that logs “Hello JavaScript!” to the browser’s console. The page uses plain HTML, inline CSS for styling, and a standard `console.log` call, with no external libraries or data sources.

Jul 29, 2020