alisha-zemoso

@alisha-zemoso·5 public vizzes

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for automobiles from the auto-mpg dataset, with each point representing a vehicle. The code uses d3.csv to load the data and d3.scaleLinear to map the values to SVG coordinates, while d3.axisBottom and d3.axisLeft generate the axes with formatted ticks. Circles are appended to the SVG container with a steelblue fill and 0.5 opacity. The chart includes a title and axis labels, with margins set around the plotting area to accommodate the axes.

Jul 18, 2022

Loading thumbnail…

Temprature in San Francisco

This visualization depicts temperature readings in San Francisco as a scatterplot, where each circle represents a data point plotted by temperature on the x-axis and timestamp on the y-axis. The chart uses d3.csv to load the dataset, d3.scaleLinear for the temperature axis, and d3.scalePoint for the time-based positions. Axes are rendered with d3.axisBottom and d3.axisLeft, while the SVG circles are styled with steelblue fills. The code includes a population dataset that is not used in the final rendering.

Jul 11, 2022

Loading thumbnail…

Formatting axis

This example shows a horizontal bar chart of the top 10 most populous countries, with population values formatted using d3.format’s ".3s" abbreviation (e.g., 1.42M). The chart uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisBottom with a custom tickFormat to display compact population labels. Data is loaded from a CSV file via d3.csv, and the SVG rendering is driven by React-compatible D3 v7 code. Axis gridlines are removed, and a text label for the x-axis appears below the ticks.

Jul 7, 2022

Loading thumbnail…

Fork of Smiley using D3 lib

This example renders a simple smiley face in an SVG using D3 v7, with a yellow circle for the head, two black eye circles, and a half-arc mouth created via the `d3.arc` shape generator. The SVG is 900 by 500 pixels, and the face is centered by reading the width and height attributes from the DOM. Though the repository includes a `data.csv` file with country populations, the visualization does not use it; instead, all shapes are drawn statically with hardcoded coordinates and attributes. The code imports `select` and `arc` from D3 and appends the elements directly to the SVG.

Jul 7, 2022

Loading thumbnail…

Fork of Bar Chart using D3

This horizontal bar chart displays population figures for ten countries using a forked D3 example. The visualization maps country names to the y-axis with a band scale and population values to the x-axis with a linear scale. The code imports specific D3 modules like `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data from a CSV file and render SVG rectangles with steelblue fills. Axes are generated using D3’s axis components, with margins applied around the chart area.

Jul 7, 2022