shreyagoddu

@shreyagoddu·10 public vizzes

Bowl of Fruit

This example shows five red apples arranged in a horizontal row across the center of an SVG canvas. The visualization uses D3 version 5’s `select` and `range` functions to generate and bind a dataset of fruit objects, then appends circles for each apple with fixed spacing and a uniform radius. The rendering relies on SVG circles and static attributes for positioning and fill color.

Aug 16, 2020

Loading thumbnail…

Temperature in San Fran Area Chart

This area chart visualizes a week of hourly temperature readings in San Francisco, using a maroon filled area under a smooth curve to show the daily temperature cycles and overall trends. The chart includes labeled axes for time and temperature, with gridlines and a title. Built with React and D3 v5, the code loads data from a CSV file using `d3.csv`, scales the time and temperature values with `scaleTime` and `scaleLinear`, and renders the area using the `d3.area` generator on an SVG canvas.

Aug 16, 2020

Loading thumbnail…

Temperature in San Fran Line Chart

A line chart visualizes temperature fluctuations in San Francisco over a week, with time on the x-axis and temperature on the y-axis. The data is loaded from a CSV file and rendered as an SVG. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` with a *curveBasis* interpolation to create a smooth path. Axis labels and a title annotate the chart, while grid lines are generated via custom tick sizes.

Aug 16, 2020

Loading thumbnail…

Temperature in San Fran Scatter Plot

This scatter plot visualizes temperature readings collected hourly over a week in San Francisco. Each red circle represents a single timestamp and its corresponding temperature, with time plotted along the x-axis and temperature along the y-axis. The visualization uses D3 v5 scales, including `scaleTime` and `scaleLinear`, to map data values to SVG coordinates, and `axisBottom` and `axisLeft` for the labeled axes. The data is loaded from a CSV file using `d3.csv`.

Aug 16, 2020

Loading thumbnail…

Cars Scatter Plot

A scatter plot visualizes the relationship between horsepower and weight for 406 car models from the classic 1970s and 1980s dataset. Each circle represents a car, with its position determined by the car's horsepower on the x-axis and weight on the y-axis. The visualization uses d3.csv to load data from a local CSV file, d3.scaleLinear and d3.extent for scaling, and d3.axisBottom and d3.axisLeft to render axes with grid lines. The code leverages D3 v5 selections and data joins to draw semi-transparent SVG circles with a steelblue fill, displaying a clear positive correlation between the two variables.

Aug 16, 2020

Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top 10 most populous countries, with each circle positioned along a linear population scale on the x-axis and a categorical country scale on the y-axis. The visualization uses d3.csv to load the data, then applies d3.scaleLinear and d3.scalePoint for the axes, with d3.axisBottom and d3.axisLeft rendering the gridlines and labels. SVG circles are appended and styled with a steelblue fill, while a title and axis label describe the chart. The axes use tick formatting to abbreviate large numbers.

Aug 16, 2020

Loading thumbnail…

Customizing Axis

This example shows a horizontal bar chart of the top 10 most populous countries, with a title, axis label, and customized axis ticks. Population values are formatted with d3.format to abbreviate large numbers, and grid lines extend across the chart via the tickSize method. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scales, and d3.axisLeft and d3.axisBottom for axes. It is rendered as SVG within a React framework.

Aug 16, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the ten most populous countries, using horizontal bars arranged in descending order. The visualization uses D3 v5 within a React framework, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. The code loads data from a CSV file via `d3.csv`, renders SVG rectangles, and includes `axisLeft` and `axisBottom` for labeled axes. The chart emphasizes the stark population differences, with China and India leading by a significant margin over the United States.

Aug 15, 2020

Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js to construct an animated cartoon face out of basic SVG shapes. A yellow circle serves as the head, with two black-eyed circles, rectangular eyebrows, and a mouth drawn using the `d3.arc` path generator. The eyebrows animate upward and back down through chained `transition().duration(2000)` calls, while the React framework manages the overall layout. All shapes are positioned relative to a central group, with dimensions derived from the SVG’s `width` and `height` attributes.

Aug 15, 2020

Loading thumbnail…

Cars Report

This example displays a text-based report of cars priced above a threshold, generated from a static JSON dataset. After a simulated one-second delay via a Promise, the code filters the car data by price, formats each entry into a string, and updates the message element. The visualization uses React for project structure, though the core logic relies on DOM manipulation with `document.getElementById`, asynchronous data loading with `getCars`, and string formatting functions from `formatCar.js` and `generateReport.js`. The final output appears as multiline text in the browser.

Aug 15, 2020