KyleHincz

@KyleHincz·17 public vizzes

MAP make D3.js!

A D3.js example demonstrates fundamental DOM manipulation by rendering a yellow smiley face with animated eyebrows. The SVG circle forms the face, while `d3.arc()` creates the mouth path. The code uses D3 selections and transitions to move rectangular eyebrows vertically over two seconds, then back. It imports `select` and `arc` from d3.v5, builds the graphic in an SVG container, and animates the eyebrow group's transform attribute.

Sep 26, 2021

Loading thumbnail…

MAP make a with D3.js!

A yellow smiley face rendered in SVG animates its eyebrows upward and back down in a looping two-second transition. Built with D3.js v5, the example uses `d3.select`, `d3.arc` for the mouth, and SVG circles and rectangles for facial features. The eyebrow movement is driven by sequential `transition().duration()` calls that modify the group’s `transform` attribute.

Sep 26, 2021

Loading thumbnail…

KH makes a map with D3.js

A map-like face built from SVG shapes animates its eyebrows in a looping bounce. The code constructs a yellow circle head with eyes, eyebrows, and an arc-based mouth using D3 v7 selections. Eyebrow rectangles move via chained `transition()` calls with a two-second duration each, while the mouth is drawn with the `arc()` generator from D3’s shape module. The static SVG canvas is 960 by 500 pixels, and the animation runs continuously without external data.

Sep 26, 2021

Loading thumbnail…

Make a MAP with D3.js!

A step-by-step tutorial demonstrates fundamental D3.js DOM manipulation by constructing an animated smiley face. The example uses SVG primitives—circles, rectangles, and paths—to render the face, while a chained `transition` animates the eyebrows up and down over two-second intervals. The mouth is created using D3's `arc` function to generate a donut-shaped path. The code relies on D3 v5's `select`, `append`, and `attr` methods to build and modify the SVG structure dynamically.

Sep 26, 2021

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern - no transitions

This example demonstrates the general update pattern in D3 by animating a bowl of fruit through a sequence of state changes: buying five apples, eating one, replacing an apple with a lemon, and removing another apple. The visualization uses SVG rendering with D3 v5, where the `fruitBowl` function manages the enter, update, and exit phases for circle and text elements. The code leverages D3's `scaleOrdinal` for color and radius mappings, while sequential `setTimeout` calls drive the data mutations and trigger re-renders without any transition animations.

Aug 29, 2021

Loading thumbnail…

KH Bowl of fruit general update pattern.js

A bowl of fruit animates through a general update pattern using D3 v7, showing five apples that are progressively removed or transformed into lemons over timed intervals. The visualization demonstrates enter, update, and exit selections: new circles grow from radius zero, existing ones transition to new positions and colors, and removed fruits shrink away before deletion. SVG circles are bound to data with unique IDs, using ordinal scales for color and radius mapping, with transitions lasting one second for each state change.

Aug 29, 2021

Loading thumbnail…

KH World pop area chart with D3.js

This area chart visualizes world population growth from 1950 to 2015, with a smooth curve showing the steady increase over time. The visualization uses D3.js v7 to load CSV data and render an SVG, employing `scaleTime` and `scaleLinear` for axes, and `area` with `curveBasis` to generate the filled path. Axes include labeled tick marks and gridlines, while the title and axis labels provide context for the data.

Aug 28, 2021

Loading thumbnail…

KH temp in SF AREA chart with D3.js

This chart displays a week of hourly temperature readings in San Francisco, plotted as a smooth area chart with time on the x-axis and temperature on the y-axis. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for scales, and the d3.area generator with curveBasis to create the filled path. Axes are rendered with d3.axisBottom and d3.axisLeft, including tick lines and labels for time and temperature. The SVG output includes a title, axis labels, and a maroon-filled area beneath the temperature line.

Aug 28, 2021

Loading thumbnail…

KH temp in SF Line chart with D3.js

A line chart displays temperature readings in San Francisco over a week, with time on the x-axis and temperature on the y-axis. The visualization uses D3.js v7 with SVG rendering, loading data from a CSV file. It employs `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` with `curveBasis` for the smoothed path, and `d3.axisBottom` and `d3.axisLeft` for labeled ticks with gridlines.

Aug 28, 2021

Loading thumbnail…

KH cars scatterplot with D3.js

This scatterplot displays the relationship between horsepower and weight for a dataset of cars, sourced from the auto-mpg.csv file. Red, semi-transparent circles represent individual car models, with axes labeled "Horsepower" and "Weight" and a title at the top. The visualization is built using D3.js version 7, employing `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.extent` to map data values to SVG coordinates, with gridlines and tick labels styled via CSS. The SVG canvas is 960 by 500 pixels.

Aug 28, 2021

Loading thumbnail…

KH scatterplot with D3.js

This scatterplot displays the top 10 most populous countries, using population on the x-axis and country names on the y-axis. The chart is built with D3.js v7, using `scaleLinear` and `scalePoint` for the axes, `axisBottom` and `axisLeft` for ticks, and SVG circles for the data points. The data is loaded from a CSV file via `csv()` and formatted with `format(".3s")` to abbreviate large numbers. Grid lines are generated by setting negative tick sizes.

Aug 28, 2021

Loading thumbnail…

KH customising axis barchart with D3.js

This bar chart displays the top 10 most populous countries, with population values read from a CSV file and rendered as horizontal bars. The visualization uses D3.js v7’s `scaleLinear` and `scaleBand` for positioning, `axisLeft` and `axisBottom` for custom axes, and a tick formatter that converts large numbers into abbreviated units (e.g., "B" for billions). Axes are styled with custom CSS, and grid lines are drawn via tick sizing.

Aug 27, 2021

Loading thumbnail…

KH makes a barchart with D3.js

This is a horizontal bar chart made with D3.js (version 7) and rendered as an SVG, showing the populations of ten countries (in thousands) from a local CSV file. The view uses `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with populations read from the data and multiplied by 1,000 before being drawn as rectangles. Axes are added with `axisLeft` and `axisBottom`, and the chart is built by appending a group element and then entering rectangles, all styled with a steelblue fill.

Aug 27, 2021

Loading thumbnail…

KH makes a face with D3.js

A face drawn with SVG primitives in D3.js animates its eyebrows. A yellow circle forms the head, with black circles for eyes and a semi-circular arc for the mouth. The eyebrows, rendered as rectangles, shift vertically through a chained transition over four seconds. The code uses d3.select, d3.arc for the mouth path, and d3.transition to move the eyebrow group between two positions.

Aug 26, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered in SVG, showing circles, rectangles, lines, and paths arranged with CSS styling. It displays how SVG elements use attributes like `cx`, `cy`, `r`, `x`, `y`, and `d` for positioning and form. The code applies transformations via SVG’s `transform` attribute for scaling and translation, while CSS classes control stroke properties such as color and width. The page uses native SVG APIs and CSS, with no external JavaScript libraries, to create static visual compositions.

Aug 25, 2021

Loading thumbnail…

HTML Cars Report

This example presents a static, hand-coded HTML report listing three used cars with their model years, makes, and prices. The page displays the information as a simple bulleted list, with the first vehicle entry highlighted in red using the CSS class `highlighted`. The report is styled through an external `styles.css` file, which sets the font size and family. The data is hardcoded directly into the `index.html` markup.

Aug 25, 2021

Loading thumbnail…

Cars Report

This example generates a text-based report of cars priced under $2,000, displaying each car’s year, make, model, and price in a large-font `<pre>` element. It demonstrates ES6 module imports and asynchronous data loading, using `getCars()` to return a promise that resolves with a hardcoded JSON dataset after a two-second delay. The report is formatted by `formatCar` and generated with `generateReport`, which filters and maps the data, then joins lines with newline characters. The visualization relies on plain JavaScript, Promises, and DOM textContent manipulation, with no external libraries.

Aug 24, 2021