Skip to main content
Log in
A

Austin0524

@Austin0524·11 public vizzes

Loading thumbnail…

Making a Bar Bhart

This visualization displays population figures for the ten most populous countries as horizontal bars. It loads data from a CSV file containing population estimates, scales the values by one thousand, and renders bars using SVG rectangles within a D3.js framework. The chart uses D3’s scaleLinear for the x-axis, scaleBand for categorical country labels, and axis functions to display the axes, with steelblue bars on a clean background.

Jan 12, 2023
Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the General Update Pattern for data joins using D3 v7. It renders five apples as circle elements in an SVG, created from an array of fruit objects via `d3.range` and a custom `makeFruit` function. The visualization highlights how to bind data to existing SVG nodes and prepare for updates, though the current code only initializes the initial state. The implementation uses `d3.select` to manipulate the SVG container and relies on D3’s data-join principles, with SVG as the rendering target and a simple production function for fruit data.

Oct 17, 2022
Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes a week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization is built with D3.js v5, using `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and `line` with `curveBasis` to draw the smoothed temperature curve. The data originates from the Data Canvas - Sense Your City project and is loaded via a CSV file from vizhub. The SVG rendering includes custom styling for gridlines, axis labels, and a title.

Oct 17, 2022
Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot, titled “Cars: Horsepower vs. Weight,” visualizes the relationship between a car’s horsepower and its weight using data from the UCI Machine Learning Repository’s Auto MPG Data Set. The SVG rendering shows red, semi-transparent circles at positions determined by the `d3.scaleLinear` scales for each axis, with grid lines and axis labels. The code uses `d3.csv` to load the data, and `d3.axisBottom` and `d3.axisLeft` for the axes, with a fixed circle radius of 10 pixels.

Oct 4, 2022
Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top 10 most populous countries, with each country positioned along the y-axis and its population on the x-axis. The visualization uses d3.csv to load the data, d3.scaleLinear for the population axis, and d3.scalePoint for the categorical country axis. Circles are rendered in SVG with d3.select and data joins, while axes are generated using d3.axisBottom and d3.axisLeft with tick formatting via d3.format.

Oct 3, 2022
Loading thumbnail…

Customizing Axes

This horizontal bar chart displays the top 10 most populous countries, using a logarithmic-free linear scale for population values. The chart customizes the x-axis tick labels by reformatting large numbers (e.g., converting billions to "B" notation) and styling gridlines, while removing the y-axis domain and tick lines. It renders with D3 v7’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, reading population data from a CSV and drawing steel-blue rectangles via SVG.

Oct 3, 2022
Loading thumbnail…

Make a face with D3.js

A yellow smiley face is centered in an SVG canvas, with two eyes and a curved mouth built from basic SVG shapes. D3.js v7 selections and the `arc` generator draw the mouth path, while `circle` elements create the head and eyes. The body is rendered entirely in SVG, with the face assembled from primitives positioned relative to the canvas center.

Oct 2, 2022
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates the use of inline SVG shapes—circles, rectangles, lines, and paths—to build a static composition with varying fills, strokes, and transformations. It shows how SVG presentation attributes define the base appearance, while CSS rules in an external stylesheet override styling for grouped elements, such as setting a black stroke and round line joins on the path. The entire canvas is wrapped in a scaling <g> element, and an additional translation group repositions a set of shapes. The rendering relies entirely on native SVG markup and CSS, without any external JavaScript libraries or data sources.

Oct 2, 2022
Loading thumbnail…

CSS and HTML

This example displays a simple car pricing report, listing three used vehicles with their model years and costs. The page uses plain HTML with an unordered list to structure the data, while a linked CSS stylesheet (styles.css) controls the visual presentation, setting the page font and size. The first list item receives the "highlighted" class, which applies an orange text color to draw attention to the 2012 Nissan Leaf entry. No JavaScript libraries or frameworks are involved; the visualization relies entirely on static HTML markup and CSS styling rules.

Oct 2, 2022
Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot explores the Iris dataset, allowing users to select any combination of sepal and petal measurements for the x and y axes via dropdown menus. The visualization renders circles for each flower specimen using React and D3.js, with axes generated by `scaleLinear`, `extent`, and custom React components. Data is loaded asynchronously from a CSV file using D3's `csv` function. Hovering over a point reveals its exact attribute value through an SVG `<title>` tooltip.

Oct 1, 2022
Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, displaying petal length against sepal width. Circles are rendered using SVG within a React application, with axes and tick marks generated through custom components. The code leverages D3.js utilities such as `scaleLinear` for scaling, `extent` for domain calculation, and `format` for tick label formatting. Data is loaded asynchronously from a CSV file hosted on GitHub, and a tooltip showing petal length appears on hover via an SVG `<title>` element.

Oct 1, 2022