Skip to main content
SimilarExport ZIP
100%

ICE-6_Shanmukha

✓ Published0🌍 Public
Sshanmukhadatta4040@gmail.com
Last edited Mar 18, 2024
Created on Mar 12, 2024
Forked from Circles with D3

This scatter plot visualizes patient data, showing the relationship between length of hospital stay and treatment cost. The D3.js v6 code loads CSV data from a remote URL, parses numeric fields, and renders circles positioned by linear scales for the x and y axes. The visualization includes labeled axes with custom formatting, using d3.axisLeft and d3.axisBottom for the treatment cost and length of stay scales. The SVG rendering approach positions each data point as a steelblue circle, with margins and dimensions optimized for display in a frame.

AI-generated description

Creating circles with D3.

Challenge

  • Fork this example
  • Modify it
  • Maybe make it Halloween themed
  • Maybe make it Christmas themed
  • Be creative
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE - VI (Scatter Plot)

This scatter plot compares medical charges with body mass index, coloring each point by the number of children. The chart uses D3 v5’s `csv` loader to parse the MedicalExpensesPredictors dataset, then maps BMI to the x-axis and charges to the y-axis via `scaleLinear` and `extent`. Points are rendered as SVG circles with `selectAll` and `join`, while `axisLeft` and `axisBottom` create the axes. Labels for both axes and a title are added as SVG text.

Mms.himabinduchalla@gmail.com
77% match
Loading thumbnail…

ICE-6 Scatter Plot

This D3.js scatter plot visualizes an insurance dataset, mapping BMI to charges for individual patients. Points are colored red for smokers and green for non-smokers, using a custom `scaleLinear` mapping for the axes. The visualization employs `csv` for data loading, `select` and `join` for SVG circle rendering, and `axisLeft`/`axisBottom` for labeled axes, with all text styled in cursive. The plot includes age and children values as `rx` and `ry` attributes on the circles, though these do not affect the visual output.

Ggayuvurukuti@gmail.com
76% match
Loading thumbnail…

Fork of ICE-6 Scatter Plot

This scatter plot visualizes the relationship between accommodation cost and duration in days, with points colored by species (blue, yellow, or red). The data is loaded from a GitHub Gist CSV using D3 v6’s `csv` and parsed into numeric fields. The visualization uses `scaleLinear` for both axes, `axisLeft` and `axisBottom` for ticks, and SVG `circle` elements with per-point `rx` and `ry` attributes. Axis labels are rendered as text elements, all within a full-window SVG.

Ppujitha532
75% match
Loading thumbnail…

ICE-6 Scatter Plot

This example presents an ICE-6 scatter plot, a static visualization that displays individual data points as circles within a bounded area. The plot uses D3.js (v7) to create the visualization, with the code defining scales for positioning, axes for orientation, and SVG elements for rendering. The data appears to be plotted without any encoding for size or color, suggesting a focus on spatial distribution rather than multidimensional analysis. The implementation relies on standard D3 methods like `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, and the visualization is contained in a simple HTML file with a single container div.

Nneeharika2023@gmail.com
74% match
Loading thumbnail…

ICE-6

This example visualizes the relationship between age and BMI in insured individuals using a horizontal bar chart, displaying the top 15 counties by the number of hospitalized COVID-confirmed patients. The chart uses an SVG rendering with React for state management and D3 v5 for scales, axes, and data loading. Specifically, it employs `scaleBand` for the y-axis counties and `scaleLinear` for the x-axis patient counts, with data fetched via `d3.csv` from a GitHub raw URL. The bars are drawn as SVG `<rect>` elements, and custom tick labels replace traditional axes for clarity.

DDineshK2602
73% match
Loading thumbnail…

ICE-6(Scatter plot)

This scatter plot visualizes 150 samples of x_value against y_value, with points colored by group using a Tableau10 ordinal scale. The data is loaded from a CSV file via d3.csv and rendered as SVG circles with opacity, axes, labels, and a legend. Built with D3 v6, it uses d3.scaleLinear for axes, d3.extent for domain calculation, and d3.axisLeft/d3.axisBottom for tick marks. Points respond to hover with a black stroke, and the chart includes a white background with margin-based layout.

Kkmuktha09@gmail.com
73% match
Loading thumbnail…

Fork of ICE-6 Scatter Plot

This example presents a scatter plot of an insurance dataset, visualizing the relationship between patient height and age while encoding weight and income through non-standard circle radius properties (`rx` and `ry`), which distorts the marks into ellipses. The code colors each point by gender (red for female, green for male) and builds the SVG chart using D3 v5 APIs such as `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Data is loaded from a GitHub-hosted CSV file, with axes labeled “Charges” and “bmi” despite the actual mapped fields being age and height.

TTekmal-Bhavana
73% match
Loading thumbnail…

ICE7 - Scatter Plot

A reusable scatter plot built with D3.js 6.7.0 visualizes sales, profit, and discount data from a remote CSV file. The plot displays circles for each data point, with axes and labels, and each circle is rendered with a white stroke and black fill. Every two seconds, the plot cycles the x-axis between the Profit, Discount, and Sales columns, updating the axis labels and re-rendering the points accordingly. The implementation uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scaling and axis generation.

Kkuraakhila9@gmail.com
73% match