Skip to main content
Log in
P

pravalliyaram

@pravalliyaram·7 public vizzes

Loading thumbnail…

Iris Dataset Scatter Plot

This interactive scatter plot visualizes the Iris dataset, plotting petal length against petal width for individual flowers. Data points are color-coded by species—blue for setosa, red for versicolor, and black for virginica—allowing immediate comparison of species clusters. The visualization loads CSV data using d3.csv, and employs d3.scaleLinear and d3.extent to map the data to screen coordinates, with d3.axisLeft and d3.axisBottom rendering labeled axes. Circles are drawn as SVG elements with d3.selectAll and .join, while the chart also encodes sepal measurements as additional attributes (rx, ry) on each marker.

Mar 7, 2022
Loading thumbnail…

Fork of Data Visualization- Scatter Plot with Iris DataSet

This visualization shows a scatter plot of the Iris dataset, mapping petal length and width for each flower sample, with points colored by species (setosa, versicolor, or virginica). The code loads the data via D3’s `csv` from a GitHub gist, parses numeric fields, and uses `scaleLinear` with `extent` to set x–y domains. It renders SVG circles via `selectAll` and `join`, and appends an axis on the left and bottom using `axisLeft` and `axisBottom`. The chart also includes rotated axis labels.

Mar 7, 2022
Loading thumbnail…

Fork of Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width for each specimen on the x- and y-axes, while coloring each point by species (setosa, versicolor, and virginica). The chart uses the D3 v6 `csv` loader to fetch the dataset, `scaleLinear` for axes, and `extent` to compute the domains. Each flower is drawn as an SVG circle with a fixed radius, but the code also defines rectangular attributes (`rx` and `ry`) from sepal measurements, though these are not visually applied. Axis labels and ticks are generated using `axisLeft` and `axisBottom`.

Mar 7, 2022
Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This fork renders the classic Iris Dataset as a scatter plot, mapping petal length and width to the x- and y-axes while coloring each point by species. It directly loads the CSV via `d3.csv`, parses numeric fields, and uses `d3.scaleLinear` with `d3.extent` to set scales. Circles are drawn with `d3.selectAll` and `join`, assigned colors per species, and styled with a fixed radius. Axes are generated using `d3.axisLeft` and `d3.axisBottom`. The SVG fills the browser window, with tick text enlarged for readability.

Mar 7, 2022
Loading thumbnail…

Fork of Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width for each specimen on the x- and y-axes, while coloring each point by species (setosa, versicolor, and virginica). The chart uses the D3 v6 `csv` loader to fetch the dataset, `scaleLinear` for axes, and `extent` to compute the domains. Each flower is drawn as an SVG circle with a fixed radius, but the code also defines rectangular attributes (`rx` and `ry`) from sepal measurements, though these are not visually applied. Axis labels and ticks are generated using `axisLeft` and `axisBottom`.

Mar 7, 2022
Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This fork renders the classic Iris Dataset as a scatter plot, mapping petal length and width to the x- and y-axes while coloring each point by species. It directly loads the CSV via `d3.csv`, parses numeric fields, and uses `d3.scaleLinear` with `d3.extent` to set scales. Circles are drawn with `d3.selectAll` and `join`, assigned colors per species, and styled with a fixed radius. Axes are generated using `d3.axisLeft` and `d3.axisBottom`. The SVG fills the browser window, with tick text enlarged for readability.

Mar 7, 2022
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the ages of the top 20 players from a CSV dataset as a horizontal bar chart. Each player is represented by a blue rectangle, with the bar length encoding age using a linear scale, while player names are mapped to the y-axis using a band scale. The code integrates React’s `useState` and `useEffect` hooks with D3’s `csv`, `scaleBand`, `scaleLinear`, and `max` functions to load and transform data. SVG rendering is handled directly through React elements, with manual grid lines and tick labels generated from D3’s scales.

Mar 7, 2022