Skip to main content
SimilarExport ZIP
100%

Task 9&10-Q1

✓ Published0🌍 Public
Sshraehithareddy@gmail.com
Last edited Apr 29, 2024
Created on Apr 29, 2024

This example demonstrates a reusable scatter plot built with D3.js v6, rendering data points as SVG circles with linear scales for the x and y axes. It uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to map values and draw axes. The code also includes a separate pie chart implementation using `d3.pie` and `d3.arc` with an ordinal color scale and SVG legend, though the scatter plot is the primary focus.

AI-generated description

A demonstration of reusable scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

Task 9&10-Q1

A pie chart visualizes three categories with values 30, 50, and 20, using a color-coded legend. Built with D3 v7, the example loads D3 via UNPKG and imports `pie`, `arc`, and `scaleOrdinal` from local ES6 modules. The SVG chart centers arcs with a translated group element, while a separate group renders the legend. Data is hardcoded in `index.js`, and the chart updates through D3’s data join pattern.

Sshraehithareddy@gmail.com
88% match
Loading thumbnail…

Task 9_t

This example presents a reusable scatter plot built with a custom D3 module, though the primary rendered chart in the main script is a pie chart displaying departmental data. The pie chart visualizes categorical values and percentages, with color-coded slices and an accompanying legend. The code uses D3 v6 APIs such as `d3.pie`, `d3.arc`, and `d3.csv` to load and transform data from a GitHub-hosted CSV file. The scatter plot module demonstrates a separate, configurable chart function with `scaleLinear`, `axisLeft`, and `axisBottom` for potential reuse, though it is not invoked in the index file.

HHari Kiran
84% match
Loading thumbnail…

Task 9_t_2

This example shows a reusable scatter plot built as a custom D3 function. It renders circles positioned by scaled x and y values with labeled axes, and appends an additional "TEXT" label to the x-axis. The scatter plot module exposes setters for width, height, data, value accessors, margins, and radius. Using D3’s scaleLinear, extent, axisLeft, and axisBottom, the chart reads data from a CSV file and draws SVG elements. The example demonstrates a modular, configurable chart pattern.

HHari Kiran
82% match
Loading thumbnail…

Task-10

This example displays a pie chart with a side legend, both rendered as SVGs. The D3 pie layout computes arc angles based on the percentage values, while d3.arc generates the path data and d3.schemeTableau10 assigns categorical colors. A second SVG contains the legend with colored rectangles and text labels, and the data is loaded from a remote CSV file.

Bbhargavr016@gmail.com
81% match
Loading thumbnail…

task 9_q1

This example is a pie chart showing the age distribution of a population, with each slice labeled by its age bracket. The chart is rendered as an SVG using D3.js v3, drawing colored arcs for each category. The visualization uses the `d3.svg.arc` generator to define slice geometry and `d3.layout.pie` to compute the angles, while the `color` scale assigns each age group its palette color. Data is loaded from a CSV file and preprocessed by converting the population values to integers. The slices have a white stroke, and labels are positioned at each arc's centroid.

Sshivasaiamaravadi@gmail.com
81% match
Loading thumbnail…

task 9 and 10 Q1 1

This pie chart visualizes the distribution of job postings across different experience levels, showing the count for each category as labeled slices. The chart is rendered as an SVG using D3.js v7, with the pie layout generated by `d3.pie()` and arcs drawn via `d3.arc()`. Data is loaded from a remote CSV file using `d3.csv()`, and counts are aggregated with `d3.rollup()`. Each slice is colored with `d3.schemeCategory10` and labeled inside the arcs using centroid positioning.

Ssruthimreddy6@gmail.com
80% match
Loading thumbnail…

Task 9&10 Q1

This example shows a pie chart displaying total sales distribution across item categories, with each slice labeled by category name and sales amount, plus a legend on the right. The visualization is built using D3.js version 6, employing `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring. Data is loaded from a remote CSV file via `d3.csv`, and aggregated using `d3.rollups` to sum sales per category. The chart includes a title and subtitle, rendered as SVG text elements.

Mmdadeebfarhaan@gmail.com
80% match
Loading thumbnail…

Task 3 Q 3.2

This interactive scatter plot uses D3 v7 to visualize two quantitative variables across multiple categories, with each category represented by a distinct geometric shape from `symbolsFill`. The visualization applies `scaleLinear` for both axes and `scaleOrdinal` for shape encoding, rendering data points as SVG paths using the `symbol` generator. A shape legend explains the categorical mapping, while axes with labels are constructed using `axisLeft`, `axisBottom`, and custom label positioning from the `axes` module. The example demonstrates reusable chart components through ES6 module imports and data-join patterns for updates.

RRukmini Devi Y
80% match