NeeharikaGali

@NeeharikaGali·31 public vizzes

Fork of Fork of Fork of ice 7 Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the classic Iris dataset, displaying the relationships between sepal and petal measurements across three species of iris flowers. Using the D3.js library within a React framework, the visualization animates through four different column pairings, cycling the x-axis between petal width, sepal width, petal length, and sepal length every few seconds. Each data point is colored by species (black, blue, or pink), with a legend identifying the categories, while the SVG rendering includes axis labels, a title, and a dynamic species legend.

Mar 26, 2023

Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This example presents an animated scatter plot of the Iris dataset, cycling through four different feature combinations on the x-axis every few seconds. The visualization dynamically updates the axes and labels to reflect the current variable pair, while plotting each flower species with a distinct color. Built with React and D3 v6, it uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to construct the plot, with data loaded via `csv` and rendered as SVG circles. Custom styling applies the Share Tech font and includes a legend for species identification.

Mar 26, 2023

Loading thumbnail…

Fork of Fork of Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset using D3 v6 within a React framework, rendering as SVG with animated transitions. The plot cycles through different x-axis variables (petal width, sepal width, petal length) on a timed interval, while the y-axis shows sepal length. Points are colored by species—setosa, versicolor, and virginica—with a custom color legend and axes generated using `scaleLinear`, `axisLeft`, and `axisBottom`. Data is loaded via `csv` from a VizHub URL, with all marks drawn as circles.

Mar 26, 2023

Loading thumbnail…

Fork of ICE-7 Reusable scatter plot with different symbol

This fork of the ICE-7 reusable scatter plot visualizes the Iris dataset, mapping petal width against sepal length to reveal species clusters. It uses d3’s `scaleOrdinal` to assign distinct symbol shapes and colors (black, grey, pink) for each iris species. The code builds the chart with `scaleLinear`, `axisLeft`, and `axisBottom`, while `symbolGenerator` generates the mark paths. Data loads via a CSV URL, and the SVG renders with window-sized dimensions and custom margins, showing setosa, versicolor, and virginica points.

Mar 25, 2023

Loading thumbnail…

Fork of Scatter Plot with Shape

This interactive scatter plot visualizes the Iris Dataset, mapping sepal length to the x-axis and petal length to the y-axis. Each of the 150 points is colored and shaped according to its species (setosa, versicolor, or virginica). The visualization uses D3's `scaleOrdinal` and `schemeCategory10` for the color scale, while shapes are generated with a symbol generator. A shape legend, rendered via `shapeLegend.js`, displays the species symbols. The chart is built with an SVG canvas, using `scaleLinear` for both axes and `selection.join` for efficient element updates.

Mar 25, 2023

Loading thumbnail…

Fork of ICE 7-1 Reusable Scatter Plot

This reusable scatter plot visualizes the Iris dataset, encoding flower species through both color and symbol shapes. The visualization cycles through four numeric attributes every ten seconds, updating the x-axis scale to display different variable combinations. Built with D3 v6, it uses `scaleLinear` for axes, `scaleOrdinal` for color and shape mapping, and `axisBottom`/`axisLeft` for rendering. SVG paths represent data points with transitions between updates, while `setInterval` drives the automatic axis changes. The dataset includes sepal and petal measurements for three iris species.

Mar 25, 2023

Loading thumbnail…

Fork of DV ICE7-Reusable Scatter Plot for Iris Data

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length and distinguishing species by symbol type. Built as a reusable chart module, it uses d3.scaleLinear for axes, d3.scaleOrdinal with d3.symbols for categorical markers, and d3.axisLeft/axisBottom for ticks. The SVG rendering fills the viewport, with data loaded via d3.csv from a GitHub Gist and parsed into numeric fields. The chart’s dimensions, margins, and accessor functions are configurable through a fluent API, demonstrating a modular approach to D3 visualization.

Mar 25, 2023

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris dataset, mapping petal width to sepal length for individual flower samples. Different species are distinguished using distinct symbols applied via a d3.scaleOrdinal with an array of d3 symbols. The visualization uses D3 v6 APIs including d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.symbol. A reusable scatterPlot function configures margins, size, and accessor functions. Data is loaded as CSV and parsed before rendering as SVG paths within a full-window viewport.

Mar 25, 2023

Loading thumbnail…

Fork of ICE-7 Area Chart

This visualization shows phone sales over time as a smooth area chart, with a gold line tracing the trend and a black filled region beneath it. The data is loaded from a CSV file via d3.csv, with years parsed as dates and phone counts converted to numbers. The chart uses d3.scaleTime and d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for ticks, and d3.line, d3.area, and d3.curveBasis to generate the smoothed path. The SVG is rendered with React, and styled with custom CSS for axis labels and grid lines.

Mar 25, 2023

Loading thumbnail…

Fork of ICE-7 Line Chart

This line chart tracks phone sales over time, with the x-axis representing years and the y-axis showing the number of phones sold. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to render an SVG path, with grid lines and labeled axes. Data is loaded from a CSV file via `d3.csv` and parsed into date and numeric values, then rendered inside a centered SVG element with margins and a title.

Mar 25, 2023

Loading thumbnail…

Fork of ICE 7-3 Line Chart

This D3.js v5 visualization displays bike sales in India from 2012 to 2022 as a single line chart. The SVG chart uses a time-scaled x-axis for years and a linear y-axis for sales figures, with grid lines and axis labels styled via CSS. Data is loaded from a CSV file hosted on GitHub and parsed using `d3.timeParse`. The line path is generated with the `d3.line` generator, while `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` handle the scales and axes.

Mar 25, 2023

Loading thumbnail…

Fork of ICE 7 Line Chart

This fork of the ICE 7 line chart presents the sales of cars in India from 2009 to 2019. The visualization shows a single line tracking the total car sales per year, with time on the x-axis and a numeric count on the y-axis, both rendered as SVG. The chart uses D3 version 5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs to map and draw the data. The data is loaded from a CSV file using D3’s `csv` function, with dates parsed via `timeParse`.

Mar 25, 2023

Loading thumbnail…

Fork of ICE 7-1 Reusable Scatter Plot

This reusable scatter plot visualizes the Iris dataset, with each flower's species distinguished by both color and point shape. The chart animates every 10 seconds, cycling through the four measured dimensions on the x-axis while keeping sepal length constant on the y-axis. Built with D3 v6, the visualization uses `scaleLinear` and `axisBottom` to configure scales and axes, while `scaleOrdinal` maps species to shape and color. The `join` operation efficiently updates SVG paths, enabling smooth transitions between data dimensions.

Mar 25, 2023

Loading thumbnail…

Fork of D3.js Line Chart

This example shows the change in customer counts from 2000 to 2010 using a thick steelblue line plotted over a band scale. The visualization uses D3.js v7 to load CSV data, create linear and band scales, and render SVG axes and a line path generated with `d3.line()`. The code constructs the chart by selecting a container div, appending an SVG group, and drawing the path with x-coordinates offset by half the band width. The data comes from an inline CSV file with year and customers columns.

Mar 25, 2023

Loading thumbnail…

Fork of ICE-7 Line Chart

This fork of ICE-7 displays a line chart of sales costs from 2000 to 2013, with cost on the y-axis and year on the x-axis. It uses d3.csv to load data from a GitHub gist, then renders an SVG with d3.scaleTime and d3.scaleLinear for axes, and d3.line to draw the path. The chart includes labeled axes, a title, and grid lines, with styling handled by external CSS.

Mar 25, 2023

Loading thumbnail…

Fork of ICE-7 Line Chart

This fork of the ICE-7 Line Chart visualizes state sales over total sales using an SVG line chart. The code loads CSV data, converts the state values to numbers and Total_Sales to date objects, then renders the chart with D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line`. A red stroked path connects the data points, with axis labels and a title styled via CSS.

Mar 25, 2023

Loading thumbnail…

Fork of ICE-7 Line Chart

This example displays a line chart of sales costs from 2000 to 2013, with the year on the x-axis and state values on the y-axis. The chart is rendered as an SVG using D3 v5, with scales created via `d3.scaleTime` and `d3.scaleLinear`, and axes generated using `d3.axisBottom` and `d3.axisLeft`. The data is loaded from a CSV file using `d3.csv` and drawn with the `d3.line` generator.

Mar 25, 2023

Loading thumbnail…

Fork of Pie Chart

This example visualizes state sales data as a pie chart, with each slice colored by total sales value and a corresponding legend listing state names alongside their formatted dollar amounts. The top ten states by sales are shown, sorted in descending order. Built with React and D3 v5, it uses d3.pie, d3.arc, and d3.scaleOrdinal to generate SVG paths, while d3.csv loads the external dataset from a GitHub gist. Mouseover events log slice data to the console, and all rendering occurs within an SVG container.

Mar 25, 2023

Loading thumbnail…

Fork of Fork of Pie Chart

This example visualizes the basic cost of Netflix subscriptions across ten countries using a pie chart, with each slice colored via `d3.scaleOrdinal` and `d3.schemeCategory10`. A legend lists country names and their costs in dollars, formatted with a custom number formatter. The visualization uses `d3.pie` and `d3.arc` to generate SVG paths, and data is loaded asynchronously from a CSV file via `d3.csv`, then sorted and sliced to show the top ten values.

Mar 25, 2023

Loading thumbnail…

Fork of Pie Chart

This visualization displays the basic cost of Netflix subscriptions across ten countries using a pie chart, with a legend listing each country alongside its corresponding cost in dollars. The chart is rendered as SVG using D3 v5 within a React framework, employing D3's `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` functions to generate the arcs and colors. Data is loaded from a CSV file hosted on GitHub, sorted in descending order, and the top ten entries are displayed, with hovering over a section logging its cost to the console.

Mar 25, 2023

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example visualizes the Iris Dataset with a scatter plot that maps petal width to the x-axis, sepal length to the y-axis, and encodes the iris species using different symbols. Built with D3 v6, it uses `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` to render SVG paths for the marks and axes. The plot fills the entire browser window, with margins adjusted for labels. The code is structured as a reusable `scatterPlot` function that accepts configuration for data, dimensions, and value selectors.

Mar 25, 2023

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example displays the classic Iris dataset as a scatter plot, mapping petal width to the x-axis and sepal length to the y-axis, with each of the three species represented by a distinct symbol. The visualization is rendered as an SVG using D3 v6, leveraging a reusable `scatterPlot` module that employs `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` APIs to position marks and axes. Data is loaded asynchronously from a CSV URL, and the plot fills the browser window, with axes labeled via D3's tick rendering.

Mar 25, 2023

Loading thumbnail…

ice_6

This example presents a scatter plot of penguin measurements, showing the relationship between flipper length and body mass for three species. The color-coded dots (black, silver, and unfilled) distinguish the species, with the marker size dynamically reflecting culmen dimensions. Built with React and D3 v7, it uses `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to load the data, compute scales, and render axes. The SVG circles are positioned via `cx` and `cy` attributes, with `rx` and `ry` applied for stylistic effect.

Mar 12, 2023

Loading thumbnail…

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

This example shows a horizontal bar chart of city temperatures, using React to render SVG marks and D3 to compute scales. It loads city data from a CSV file, slices the first 15 rows, and maps each city’s `Basic_length` value to a bar’s width. The code uses `d3.csv` for parsing, `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and `d3.max` for domain calculation. Grid lines and axis ticks are drawn manually with SVG elements, while React’s `useEffect` and `useState` manage asynchronous data loading.

Mar 11, 2023

Loading thumbnail…

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

This example shows state sales data as a horizontal bar chart, ordered by descending sales values and rendered as SVG rectangles. The visualization combines React’s state management with D3 scales and axes, using `scaleBand` for the y-axis categories and `scaleLinear` for the x-axis values. It loads data from a CSV file via D3’s `csv` method, then constructs custom tick marks and labels for both axes. React’s `useState` and `useEffect` hooks manage the asynchronous data fetching, while the rendering loop maps each data entry to a `<rect>` element with computed width and height.

Mar 11, 2023

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal web page that uses HTML, CSS, and JavaScript to display a centered message. The page contains a single `<div>` element with the text “Hello HTML!”, styled with a large font size and horizontal alignment via a CSS class. The code uses plain HTML structure and CSS styling rules, with no external libraries or frameworks. It serves as a bare-bones template for rendering static content in the browser, intended as a starting point for more complex visualizations or interactive applications.

Mar 3, 2023

Loading thumbnail…

Welcome to HTML

This example uses D3.js (v7) to display the metadata of a population dataset. It loads the CSV file from a GitHub gist and computes its size, row count, and column count, presenting these details as text in the browser. The code relies on the `d3.csv` and `d3.csvFormat` APIs to fetch and analyze the data. All information appears on an HTML page styled by an external CSS file.

Mar 3, 2023

Loading thumbnail…

Welcome to HTML

This example displays metadata about a population dataset against a full-page background image of population data. The page loads CSV data from a remote URL using D3 v7’s `d3.csv` method, then calculates the formatted data size in kilobytes, row count, and column count. It writes this information into a `<pre>` element using `document.getElementById` and `textContent`. The styling, defined in `index.css`, layers the text over a background SVG image with a white font color, while the background is set via CSS `background-image` with `cover` sizing.

Mar 3, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of Let's Make a Face Part I

This example builds a stylized face from reusable React components, assembling a gradient-filled background circle, asymmetric eyes, and a D3-generated arc-based mouth and teeth. The face is constructed declaratively by passing numeric properties for position, size, and offsets into the `Face` component, which orchestrates the SVG output. The `d3.arc` API creates the mouth and teeth paths, while custom parameters like `teethSpace` and `toothWidth` control the spacing and thickness of the teeth lines. The code demonstrates a modular approach to SVG composition with React and D3.

Feb 24, 2023

Loading thumbnail…

Fork of Fork of Fork of Let's Make a Face Part I

This example builds a stylized face using React components and D3's `arc` generator to draw a gradient-filled background circle, elliptical and circular eyes, and a mouth with staggered teeth lines. The `FaceContainer` wraps the SVG, applying a linear gradient definition and translating the coordinate system to center the face. All geometry parameters, such as eye offsets, radii, and tooth spacing, are passed as props to reusable components, allowing the face to be reconfigured by changing numeric values. The rendering is entirely SVG-based within a React 18 application using D3 v7.

Feb 23, 2023

Loading thumbnail…

Fork of Fork of Let's Make a Face Part I

This React-based visualization displays a stylized, cartoon-like face built entirely from SVG shapes. The composition centers on a gradient-filled circle with asymmetrical eyes—one rendered as an ellipse and the other as a circle—along with a mouth and teeth created using D3’s `arc` generator. The `FaceContainer` component defines the SVG canvas and a linear gradient, while modular components for eyes, mouth, and teeth accept numerous numeric props to control positioning and sizing. The final result, a half-completed smiley face, is assembled in `index.js` using ReactDOM rendering with D3 v7 and React 18.

Feb 23, 2023