Activity8_question4

100%

Activity8_question4

✓ Published0🌍 Public

Last edited Apr 15, 2024

Created on Apr 15, 2024

Forked from Task8

This interactive bubble chart visualizes kinase panel data, grouping 25 categories by origin, disease area, and kinase family. Built with React and D3 v7, the visualization uses a hierarchical packing layout (`d3.pack`) to position circles, with circle radii scaled logarithmically from the data values. The chart displays category labels within each bubble and includes a color legend for quick reference. Data is loaded from a CSV file via D3's `csv` parser, and the component updates reactively when the underlying dataset changes.

AI-generated description

Code snippet for a React + D3 visualization that includes:

D3 as a React Component Example - CDN connections for D3, ReactDOM, and React

Simple boilerplate for React

Width, height, and margin variables Use the useData hook to retrieve a CSV URL.
A component called {VizContainer} that abstracts SVG/group container components
- Complies with the margin standard

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6_ Question4

A bubble chart visualizes the relationship between revenue, employee count, and growth for ten major tech companies. Each circle's x-position maps to revenue, y-position to employee count, and radius to growth percentage, with color distinguishing individual companies through a custom `colorMap`. The visualization uses D3 v7 with SVG rendering, implementing `scaleLinear` axes and `scaleSqrt` for bubble sizing, alongside `d3.axisBottom` and `d3.axisLeft` for axis generation. A legend, positioned separately, maps company names to their respective colors using D3's selection and data join methods. Data originates from an embedded array within the HTML file.

Ggroup118sai@gmail.com

76% match

Loading thumbnail…

Jinsu - Bubblechart

This bubble chart visualizes gene panel data by category, using circle area to represent values and color to distinguish groups such as Origin, Kinase Family, and Related Disease. Built with React and D3 v7, it computes a hierarchical pack layout via `d3.pack` and `d3.hierarchy`, then renders SVG circles and labels with `d3.select` and `d3.join`. A color legend is generated from `d3.scaleOrdinal` with `d3.schemeTableau10`, and tooltips display the full id and category. The data comes from `panel_data.csv`.

MMinwoo Pak

76% match

Loading thumbnail…

Activity 8_Q4.A4

A bubble chart displays patient age and sodium-to-potassium ratio, with bubble size encoding the count of patients per drug and color distinguishing drug types. The visualization uses D3 v6 to load CSV data from a GitHub repository, render SVG circles, and apply scales via `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal`. Axes, labels, and a legend are added using `d3.axisLeft` and `d3.axisBottom`, with data aggregated through `d3.rollup`.

SSeema Shrestha

75% match

Loading thumbnail…

fork of activity_6_question_4

This bubble chart visualizes product data, mapping price to the x-axis, sales volume to the y-axis, and rating to bubble radius, with categories distinguished by color. The D3 v7 code uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for circle sizes, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding. The SVG rendering includes a legend, axis labels, and interactive tooltips that display product details on mouseover. Data is loaded from a CSV file using `d3.csv`.

JJaswanthkota@my.unt.edu

75% match

Loading thumbnail…

Activity6-Question4

This bubble chart displays sales information for a group of employees, plotting profit against revenue while using circle size to encode product quantity and color to distinguish employee names. It loads data from a CSV file and renders with D3 v7 in SVG, featuring interactive tooltips on mouseover that show each employee's name. The visualization includes a size legend for quantity and a color legend for employees, with colors generated via `d3.interpolateTurbo` and scales built using `d3.scaleLinear` and `d3.scaleOrdinal`.

LLayaMyadam@my.unt.edu

74% match

Loading thumbnail…

Activity7_Task 1

This example demonstrates a custom visualization built with D3 v5 and React, featuring a scatterplot with a bubble chart overlay. The code loads D3 via UNPKG and uses ES6 imports to organize components like custom axes (AxisBottom.js, Axisleft.js), a bubble element (Buddle.js), and proportional marks (Marks.js). The chart styles axis ticks and labels with a blue stroke and gray text, while data is imported through a local UseData.js module. The visualization highlights how to combine D3’s low-level primitives with React’s component structure for interactive web graphics.

HHarshita Vairagade

74% match

Loading thumbnail…

Activity6_ Question4

A bubble chart visualizes sales and profit by country, with bubble size encoding market share and color distinguishing each region. The SVG renders circles positioned by linear scales for the x and y axes, while a sqrt scale maps market share to radius. Data loads from a CSV file via `d3.csv`, with D3 v7 handling scales, axes, and the `d3.schemeCategory10` color scale. Labels display country names at each bubble's center, with axis titles for sales and profit.

Ggroup118sai@gmail.com

74% match

Loading thumbnail…

Activity 6_Task 1

This visualization displays a scatter plot of data points rendered as green circles, with blue tick marks along the axes and gray axis labels. The chart is built using React for the user interface and D3.js (v5) for the SVG rendering, leveraging D3's selection and scale APIs. The visualization is embedded in an HTML page that loads React, ReactDOM, and D3 from a CDN, with the chart drawn from a bundled JavaScript file. The dataset originates from source v3, though the specific data values are not visible in the provided code.

Ssaikarthiknimmagadda@gmail.com

74% match