C

CodeNinja

@Venkat-Co·18 public vizzes

Loading thumbnail…

Activity_7.1.2

This example shows the cost of product sales from 2000 to 2013 as a smooth area chart, with the filled region underneath the line emphasizing trends over time. Using D3 v5 within a React framework, the code loads CSV data, parses dates and numeric values, and renders an SVG with scaled axes, gridlines, and labeled axis text. The line and area paths are generated using the `d3.line` and `d3.area` generators with `curveBasis` for smooth interpolation, while axes are drawn with `d3.axisLeft` and `d3.axisBottom`.

Loading thumbnail…

Activity_7.1.1

A pie chart displays 2022 U.S. auto sales by brand, with each slice sized by year-to-date sales. Percentages and sales values (in thousands) are shown in a legend. Built with D3 v5, the visualization loads CSV data via `d3.csv`, computes pie arc paths with `d3.pie`, and renders them as SVG paths using `d3.arc`. A sequential `d3.scaleOrdinal` color scheme distinguishes brands. The chart is centered in a 960×450 SVG canvas, with legends positioned to the right.

Loading thumbnail…

Activity_7.1.1

This example visualizes 2022 US auto sales by brand as a pie chart, with each slice colored and accompanied by a legend showing brand names, their percentage of total sales, and sales figures in thousands. The code loads CSV data via `d3.csv`, computes pie layout using `d3.pie`, and renders SVG paths with `d3.arc`. Legends are built manually with appended rectangles and text, using `d3.scaleOrdinal` for categorical colors and `d3.format` for tick labels.

Loading thumbnail…

Activity6_3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width, with each point colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). The visualization uses d3.scaleLinear for both axes and d3.extent to compute the data domains. Points are rendered as SVG circles using a d3.select join operation. The chart includes axis labels and a rotated y-axis label, built with d3.axisLeft and d3.axisBottom. The data is loaded asynchronously from a CSV file using d3.csv.

Loading thumbnail…

Activity6_4

This bubble chart displays the correlation between average horsepower, torque, and highway MPG for various car makes, with bubble size encoding MPG and color representing the manufacturer. The visualization uses D3.js v7 to render SVG circles with a tooltip that appears on mouseover. Axes, legend, and labels are generated using D3 scales and axes, while the color scheme is derived from the `d3.interpolateTurbo` function. Data is loaded from a CSV file containing make, horsepower, torque, and highway MPG values.

Loading thumbnail…

Activity6_2

This stacked bar chart shows the impact of genre on movie ratings, displaying the percentage of each rating level (from below 5.0 to above 8.5) within six genres. The visualization uses d3.stack() to compute the stacked segments, with d3.scaleOrdinal for color mapping and d3.scaleBand for genre positioning. Hovering over a bar triggers a tooltip showing the exact percentage for that rating segment. The chart is rendered as SVG in d3.v7, reading from a CSV data file, with axes and legends generated using d3.axisBottom and d3.axisLeft.

Loading thumbnail…

Activity6_1

This example shows a horizontal bar chart of 2020 population data for 30 countries, with green bars representing each nation’s population sorted by country name. The visualization uses React to render SVG elements, with D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `format` to abbreviate tick labels. Data is loaded asynchronously via D3’s `csv` parser from a GitHub-hosted dataset, and axes are constructed with custom React components that map D3 scales to SVG lines and text.

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the IRIS dataset, mapping the percentage of ratings below 5.0 on the x-axis against the percentage of ratings above 8.5 on the y-axis. Each point represents a genre, colored by its category using a D3 ordinal color scale. The visualization is rendered as an SVG using D3 v7, loading the CSV data from a GitHub repository. Axes are labeled with D3’s `axisBottom` and `axisLeft` methods, and a legend is built dynamically from the color scale’s domain.

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the Iris dataset, plotting sepal length against sepal width for three flower species. Each circle’s size encodes petal length, while color distinguishes species. The visualization uses D3.js v7 with SVG rendering, employing `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `schemeCategory10` for color mapping, and interactive tooltips that appear on hover. Data is loaded via `d3.csv` from a GitHub repository, with styled circles that increase opacity and stroke width on mouseover.

Loading thumbnail…

Activity6_Task3.2

This scatter plot shows the relationship between sepal length and petal length for Iris flowers, with species distinguished by shape. It uses d3.scaleLinear for the x and y axes, d3.scaleOrdinal with d3.symbolsFill for shape encoding, and d3.axisBottom and d3.axisLeft for labeled axes. The shape legend is rendered via a custom legend function using d3.symbol. Data is loaded from a remote CSV and parsed with d3.csvParse. The visualization is built using d3.v7’s join method for incremental updates.

Loading thumbnail…

Activity6_Task2

This stacked bar chart compares horsepower, torque, and highway MPG across car manufacturers, showing how each performance metric contributes to a total value per make. The visualization uses D3.js v7 to create SVG bar segments via the `d3.stack()` function, with a color scale distinguishing metrics. Hovering over a bar segment triggers a tooltip displaying the exact metric value, while axis labels and a legend clarify the categorical comparison. The data originates from a CSV file, and the code uses `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis.

Loading thumbnail…

activity6_task1.2

This example shows a horizontal bar chart of 2010 population data for 20 countries, with country names on the y-axis and population scaled along the x-axis. The visualization is rendered as an SVG using React components and D3 v5 scales, including `scaleBand` for the categorical axis and `scaleLinear` for the numeric axis. Data is loaded from a remote CSV file using the `csv` function from D3, with population values multiplied by one thousand. Axes, tick lines, and bar marks are built from custom React components, with title tooltips formatting population values using D3’s `format` function.

Loading thumbnail…

activity6_Task 1

This example displays a horizontal bar chart of the 2020 population for 30 countries, sorted alphabetically. The chart uses an SVG canvas created with React and D3 v5 APIs, including `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Data is fetched from a remote CSV file using D3’s `csv` method. Each bar includes a tooltip showing the formatted population value; x-axis tick labels are formatted with `d3.format`.

Loading thumbnail…

activity 6_Task 1

A horizontal bar chart displays the population of ten countries for the year 2000, using data loaded from a remote CSV via `d3.csv`. The React application builds an SVG with `scaleBand` for the country axis and `scaleLinear` for population values, rendering bars as SVG rectangles with tooltips. The chart includes formatted tick labels using `d3.format` and styled axes with the Poppins font.

Loading thumbnail…

activity 6_Task 1

This example demonstrates a minimal D3.js setup that renders a static text message on a web page. It loads D3 v5 from a CDN and uses the `select` function to set the text content of an HTML element, while also importing a local ES6 module that exports the message string. The visualization highlights basic module imports and DOM manipulation with D3, styled through an external CSS file.

Loading thumbnail…

Activity 6

This example renders a static “Hello VizHub!” message to the center of the page using D3 v5. The code imports the `select` function from the D3 library and a local ES6 module called `myMessage.js` to retrieve the string. It then sets the text content of the `#message` div via `select('#message').text(message)`, while CSS applies 12em centered styling. The page loads D3 from a CDN in `index.html` and uses a bundled script for execution.

Loading thumbnail…

Fork Buddha

Five nested copies of a Buddha silhouette overlap and scale across a black background, creating a layered, translucent composition. The paths, hardcoded SVG coordinate data, are rendered with React and ReactDOM, each instance using a violet fill with a white stroke and varying opacity. The rendering is set against a background image of flowers, with the entire scene contained in an SVG canvas.

Loading thumbnail…

5 Buddhas

Five identical Buddhist figure silhouettes overlap in a chaotic jumble, drawn as large SVG paths in React. A dense field of small, randomly generated, rotated polygons fills the background with colorful noise. The React code maps over a numeric array to create the polygon grid, while the Buddha shape is a single, hard-coded SVG path repeated five times. The visualization uses React 16.10 and renders entirely through SVG elements.