Skip to main content
Log in
A

Avisa Poshtkouhi

@Avisa-GA·8 public vizzes

Loading thumbnail…

Bowl of fruit - General Update Pattern

This example demonstrates the D3 general update pattern using a bowl of fruit rendered with SVG shapes. Five apples appear initially, then the visualization updates twice: first removing two apples, then changing one apple to a lemon. The code uses `d3.scaleOrdinal` for color and radius scales, with enter, update, and exit selections managing circles and text elements. The fruit bowl is drawn as a rounded rectangle, and the update functions use `merge()` and `.exit().remove()` to handle data changes.

Jun 29, 2022
Loading thumbnail…

World Population Area Chart

This area chart visualizes global population growth from historical data, using a filled path to emphasize the increasing trend over time. The chart loads CSV data from a VizHub dataset, applies a time scale for the x-axis and a linear scale for the y-axis, and formats population values in billions. Built with D3 v7, it uses `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate a smooth, maroon-filled region, with custom tick formatting and axis labels rendered as SVG.

Jun 28, 2022
Loading thumbnail…

Area Chart Temperature in San Francisco

This area chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. It displays temperature in degrees Celsius over time, using a smooth, curved area fill. The visualization is built with D3 v7 and renders as an SVG. Code leverages `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` generator with `curveBasis` to create the shaded region. Data is loaded as CSV and parsed with timestamps converted to `Date` objects, with axes, labels, and a title included.

Jun 28, 2022
Loading thumbnail…

Line Chart Temperature in San Francisco

This line chart displays one week of temperature data in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The visualization uses d3's `scaleTime` for the date axis, `scaleLinear` for the temperature scale, and `line` with `curveBasis` to draw a smooth path through the data points. The chart is rendered as SVG, with axis labels and a title, using data from the Data Canvas - Sense Your City initiative.

Jun 28, 2022
Loading thumbnail…

Scatter Chart Temperature in San Francisco

This scatter plot displays one week of temperature readings in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. Using D3.js with `d3-scale` and `d3-axis`, it renders SVG circles positioned via `scaleTime` and `scaleLinear`. The chart includes labeled axes, gridlines, and a title, pulling data from a CSV file via `d3.csv`. Styling is applied through CSS for circle color, tick labels, and axis text.

Jun 28, 2022
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Red, semi-transparent circles represent individual cars, with positions determined by linear scales for weight (x-axis) and horsepower (y-axis). The chart uses D3 scaleLinear for coordinate mapping, axisBottom and axisLeft for the axes, and the csv function to load the data. A title and axis labels provide context.

Jun 28, 2022
Loading thumbnail…

Customizing Axes

A bar chart displays the populations of the top ten most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization customizes both axes: the y-axis removes its domain line and tick lines, while the x-axis uses a custom tick format that converts values from millions to billions. Built with D3 v7 and d3-scale.v3, the chart uses `scaleLinear` and `scaleBand` for scaling, `axisLeft` and `axisBottom` for axes, and renders as SVG with steelblue bars.

Jun 28, 2022
Loading thumbnail…

Making a Bar Chart

This example visualizes the population of the top 10 most populous countries using a horizontal bar chart, with data sourced from the 2018 United Nations World Population Prospects. The population values are displayed along the x-axis while country names are mapped to the y-axis using band scaling. The visualization uses d3.scaleLinear for the numeric axis, d3.scaleBand for categorical positioning, and d3.axisLeft and d3.axisBottom to render the chart’s axes. Rectangles represent each country’s population, and the SVG rendering is powered by D3 v3 and v7 modules, with CSS styling applied to the bars.

Jun 27, 2022