aishwarya8615

Smiley Face Part II

This example shows a stylized smiley face built from basic SVG shapes in a React component. It uses a yellow circle with a thick black stroke for the head, two black circles for eyes, and a curved mouth generated with the D3 `arc` generator. The React app renders the SVG directly to the DOM via `ReactDOM.render`, while D3.js provides the `arc()` function to create the mouth path. The visualization demonstrates how React manages SVG elements and how D3’s geometric utilities can be integrated into a React rendering pipeline.

Dec 17, 2019

Top Drugs in each rating

This bar chart displays the top 80 drugs by rating, sorted in descending order, with each bar representing a drug and its corresponding rating value. The visualization uses a vertical bar layout where drug names appear on the x-axis and ratings on the y-axis, with tooltips revealing the medical condition associated with each drug. Built with Vega-Lite API and D3 v5, the chart loads CSV data from a GitHub gist, sorts the records using D3’s `descending` comparator, and renders interactive tooltips via the vega-tooltip handler.

Nov 9, 2019

Drug Vs Rating

The visualization is a scatterplot showing the relationship between drug names, their useful count, and user ratings. Each circle represents a drug, colored by its rating value (from 0 to 10). The x-axis shows drug names, the y-axis displays usefulCount, and tooltips reveal the condition being treated. The code uses vega-lite-api to construct the chart, with data loaded via d3.csv from a GitHub-hosted CSV file. Circles use `markCircle` with opacity and size settings, and color encodes the rating field, while axes are configured through the custom config.js.

Interactive Color Legend Scatterplot to determine Useful Count of rating per year

This interactive scatterplot visualizes drug ratings against useful counts, with each point colored by the year of the rating. A color legend allows users to hover over a year to highlight matching data points while fading the rest, easing comparison of temporal trends. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for categorical color mapping, and SVG circles rendered via custom React components. The data comes from a CSV file loaded through D3’s `csv` parser, with axes and legend built from reusable `AxisBottom`, `AxisLeft`, and `ColorLegend` components.

Drug Ratings Date Histogram

A date histogram displays the total Drug Ratings per month from a CSV dataset of drug reviews. The visualization aggregates individual ratings into monthly bins using D3's `d3.histogram`, `d3.timeMonths`, and `d3.sum`, then renders the result as SVG rectangles. The React-based app uses `d3.scaleTime` and `d3.scaleLinear` for axes, with custom `AxisBottom`, `AxisLeft`, and `Marks` components. Tooltips appear on hover via SVG `<title>` elements.

Happiness Factors Comparison by Country

This interactive scatterplot compares happiness factors across countries, using data from the World Happiness Report. Users select X and Y axes from dropdown menus to explore relationships between indicators like GDP, education, and employment, with each point colored by indicator category. A clickable legend filters the view to highlight specific factors, while tooltips reveal exact values. Built with D3 v4, it uses SVG animations, `scaleOrdinal` for coloring, and transition-based rendering to smoothly update positions when axes change.

Interactive Color Legend Scatterplot to determine Useful Count of rating per year

This interactive scatterplot visualizes the relationship between drug ratings and useful counts across years, with each point colored by year. A color legend allows users to hover over a year to highlight only that year's data points while dimming the rest, making it easy to compare temporal patterns. Built with React and D3 v5, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and SVG circles for marks. The data is loaded from a CSV file using the `d3.csv` parser, and the legend and axes are custom React components.

Excited face

A smiling face is drawn as a centered yellow circle with a black outline, white-ringed eyes, and a white mouth arc. The example demonstrates how to build static SVG graphics declaratively with React components while using D3’s `arc` generator to compute the curved mouth path. The face is positioned via a `translate` transform, with all dimensions and offsets defined as constants. The code renders directly to SVG elements inside a React `<g>` group, combining D3’s shape calculations with React’s component model.

Color CD with React & D3

This example renders all CSS named colors as a single multicolored CD using React and D3. The data comes from a CSV file of color names and hex values, which is loaded with `d3.csv`. Each color is represented as an arc segment of an annulus, positioned using the `pie` layout and drawn with the `arc` generator. The SVG output applies a skew and rotation transform to create the CD’s perspective, while React manages the component state and renders each `<path>` element.

Line Diagram of World Life Expectancy with respect to GDP

This interactive line chart explores the relationship between GDP and life expectancy across countries over time, with each line representing a year and the line’s thickness encoding average BMI. The visualization leverages the Vega-Lite API to specify the marks and encodings, running on D3.js for rendering. Data is sourced from a CSV file containing World Health Organization life expectancy statistics, and color encoding uses a threshold scale to group years into four distinct intervals.

Interactive Color Legend Bar chart with tooltip for Alcohol Vs Life Expectancy

The visualization displays per-year relationships between alcohol consumption and life expectancy as an interactive bar chart, colored by year. A color legend allows viewers to filter and highlight specific years, while a tooltip reports life expectancy and alcohol consumption for the hovered bar. Built with D3.js, the chart uses `d3.scale.linear` for the x-axis, `d3.scale.ordinal` for the y-axis, and `d3.legend.color` for the legend. The data comes from a CSV file containing life expectancy statistics across continents.

Interactive Legend Bar chart for Alcohol Vs Life Expectancy

This interactive bar chart displays the relationship between alcohol consumption and life expectancy across countries, color-coded by year. Built with D3.js and the d3-legend library, a hoverable color legend lets users isolate specific years from the dataset while other bars fade beneath a semi-transparent overlay. The chart uses stacked bar rendering with ordinal and linear scales, and includes tooltips via d3-tip to show detailed values. Data comes from a Life Expectancy CSV file, with SVG-based animated transitions supporting the visual filtering interaction.

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores ILINet flu surveillance data through three linked views: a line chart, a choropleth map, and a bar chart. Users can select different metrics from dropdown menus to compare trends across years and states. The chart uses D3.js scales and React components, with the map rendered via `geoAlbersUsa` and `geoPath` from TopoJSON data. Hovering or clicking a year in the line chart filters the map and bar chart, with opacity and color highlighting emphasizing selections.

Customizing Axes

This example visualizes the count of useful drug names using horizontal bars. It customizes the axes by removing tick lines and domains, applying a custom tick format that replaces 'G' with 'B', and styling tick labels, axis labels, and the title with CSS. D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` are used, with the chart drawn as SVG. The data comes from a CSV of drug statistics linked in the code.

Oct 29, 2019

Interactive Color Legend Scatter Plot for Life Expectancy Data with Menu for Mortality

This interactive scatter plot visualizes correlations between life expectancy, infant deaths, and adult mortality across continents. Using React and D3 v5, the visualization includes dropdown menus to switch the x- and y-axis attributes, while continent data drives the ordinal color scale for the legend. Circle sizes encode GDP, and tooltips display life expectancy values. The color legend supports hover interaction with fade effects for highlighting specific continents, and the data originates from a CSV file loaded via d3.csv.

Oct 23, 2019

Interactive Color Legends with informative Tooltips and dropdown menu

This interactive scatterplot visualizes life expectancy data, allowing users to explore correlations between variables such as HIV/AIDS, GDP, BMI, and adult mortality. A dropdown menu selects the X and Y axes, while a color legend differentiates data points by continent. Clicking a legend entry highlights that continent, and hovering over a data point reveals a tooltip with the country, year, and axis values. Built with d3.v5, it uses SVG and animated transitions, loading data from a CSV file.

Oct 23, 2019

Interactive Color Legend Scatter Plot for Life Expectancy Data with Menu

This interactive scatter plot visualizes life expectancy data, allowing users to explore correlations between different health and economic attributes across continents. A pair of dropdown menus controls which variables appear on the X and Y axes, while a color legend enables filtering by continent with hover highlighting. The visualization uses D3 scales and SVG rendering with React components, including custom axes, marks, and a color legend that responds to mouse events.

Oct 22, 2019

Interactive Color Legend Scatterplot to determine Alcohol consumption Vs Life Expectancy

This interactive scatterplot visualizes the relationship between alcohol consumption and life expectancy across continents using WHO life expectancy data. The visualization employs d3.scaleLinear for both axes and d3.scaleOrdinal for the color legend, which maps continents to distinct colors. Users can hover over legend items to highlight data points from specific continents while fading others to 20% opacity. The React-based SVG rendering includes custom axis components and color legend handling, with interactive hover states managed through React state and d3 event handlers.

Oct 22, 2019

Interactive Color Legend Scatter Plot for Health Expenditure Vs Life Expectancy

This interactive scatter plot visualizes the relationship between health expenditure and life expectancy across countries, with continents encoded by color. A dropdown menu allows users to switch which attribute maps to the X and Y axes, while hovering over the color legend highlights points from that continent and fades others. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG circles rendered via the `Marks` component. Data comes from a CSV file loaded with `d3.csv`.

Interactive Color Legend Scatterplot to determine Healthcare Expenditure per year

This interactive scatterplot visualizes healthcare expenditure against year for different continents. The visualization uses d3.scaleLinear for X and Y axes and d3.scaleOrdinal for color mapping. A color legend allows users to hover over continent names, filtering and highlighting corresponding data points while fading others. Built with React and d3.v5, the SVG rendering uses CSV data loaded via d3.csv.

Polished Scatter Plot with Menus_Life Expectancy Data

This interactive scatter plot explores relationships among four attributes—life expectancy, GDP, year, and schooling—from a CSV dataset loaded via d3.csv. Two dropdown menus, built with ReactDropdown, independently control the X and Y axes, allowing users to compare any pair of variables. The visualization uses React state to manage selections and renders SVG circles with d3.scaleLinear axes. Data points are colored teal and include SVG tooltips displaying formatted X values. The layout features labeled axes and a fixed width, with styling from the Poppins font.

Scatter Plot with Color Menu for Life Expectancy Data

This interactive scatter plot explores correlations in life expectancy data from a CSV file hosted on GitHub. Users select different attributes for the X and Y axes, as well as a color category, through three dropdown menus. The visualization uses D3 v5 with SVG rendering and animation, employing `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, `axisBottom` and `axisLeft` for ticks, and `.transition()` to animate point movement. A custom color legend displays category labels alongside the plot.

Area Chart with Life Expectancy, Adult and Infant Deaths

A stacked area chart visualizes life expectancy alongside adult and infant mortality rates over 15 years, using data from WHO Life Expectancy Data. The stacked series reveal potential correlations and collinearity between these metrics, with total deaths appearing to decrease alongside life expectancy changes. The visualization is built with React and D3 v4, using d3.stack, d3.area, and d3.area-label to position series labels, while d3.scaleTime and d3.scaleLinear handle axes. SVG rendering supports interactive hover effects that highlight individual area layers.

Sep 26, 2019

Scatter Plot of World Life Expectancy Yearwise

This interactive scatter plot visualizes life expectancy across the world over 15 years, with each circle representing a country. Color encodes continent, while circle size reflects average BMI, and a tooltip reveals the country name. The visualization is built using the Vega-Lite API, which compiles specifications to Vega, with data loaded via `d3.csv` from a WHO dataset hosted on GitHub. The plot reveals that Europe consistently has the highest average life expectancy, and global life expectancy generally increases each year.

Scatter Plot of World Life Expectancy considering Diphtheria vaccination administration

This scatter plot visualizes the relationship between life expectancy and Diphtheria vaccination rates across 15 years of WHO data, with each circle representing a country. Circle size encodes average BMI, while color distinguishes continents, and tooltips reveal country names. The visualization uses the Vega-Lite API with d3.csv for loading the dataset, rendering interactive SVG graphics through vega-tooltip. The design highlights Europe’s higher average life expectancy relative to other continents.

Scatter Plot of World Life Expectancy Data based on BMI

This scatter plot visualizes the relationship between average BMI and life expectancy across 15 years of WHO data, with each point representing a country. Continent membership is encoded through color, while point size and tooltips also convey BMI information and country names. Built using the Vega-Lite API with a thin wrapper around d3.v5, the visualization loads CSV data from a gist URL and renders as an SVG, configured with custom axis styling and a dark color palette for improved readability.

Multi Line Plot of Life Expectancy with respect to GDP

This multi-line plot visualizes life expectancy against GDP per capita over 15 years, with each line representing a year and color-coded via `d3.schemeCategory10`. It shows that higher GDP generally correlates with higher life expectancy following a logarithmic trend. The visualization is built using D3 v4 and the Metrics Graphics library, which renders the chart after parsing and nesting the data with `d3.csv` and `d3.nest`. Hovering over a line displays the corresponding year, GDP, and life expectancy. The dataset originates from WHO life expectancy data hosted on GitHub.

Scatter Plot of World Life Expectancy Data versus Education

This scatter plot visualizes the relationship between average years of schooling and life expectancy across countries, colored by continent and scaled by BMI, with tooltips revealing country names. The visualization, built with Vega-Lite and its JavaScript API on top of D3.js, reads data from a CSV file sourced from WHO Life Expectancy data. Users can observe a positive linear correlation between education and lifespan, with African nations clustered at lower schooling levels and European countries at higher ones. The code configures the chart using vl.markCircle, vl.encode, and custom axis styling to enhance readability.

Loading and Parsing Healthcare Dataset Stroke CSV Data

This example displays a summary of the parsed healthcare stroke dataset, showing its size in kilobytes, row count, and column count as large text. It uses d3.csv to fetch and parse the CSV file from a GitHub raw URL, then computes the file size with d3.csvFormat and reports the data's dimensions. The visualization serves as a preliminary loading step, verifying the data's structure before any further analysis.

Loading and Parsing US Minimum Wage by State from 1968 to 2017 and 2018 Equivalent Dollars CSV Data

This example demonstrates how to load and parse a CSV dataset containing US minimum wage by state from 1968 to 2017, including 2018-equivalent dollar values. It displays the file size in kilobytes, row count, and column count in a large text container. The code uses the `d3.csv` method from D3 v5 to fetch and parse the remote CSV file, with alternative implementations using `fetch` and `d3.csvParse` provided as annotations. The data comes from a GitHub gist hosted by aishwarya8615.

Loading and Parsing Life Expectancy CSV Data

This example loads a World Health Organization life expectancy dataset from a GitHub gist and parses it with `d3.csv` (D3 v5). It displays the resulting dataset’s size in kilobytes, the number of data rows, and the number of columns as large text in a `<pre>` element. The code also includes commented alternatives using `fetch` with `d3.csvParse` and an async/await pattern, though only the primary `d3.csv().then()` path is active. The visualization is purely informational, summarizing the CSV’s structure without drawing charts.

Changing Colors with Waves

Rows of circles ripple horizontally across a 960 by 500 pixel canvas, their horizontal positions perturbed by a sine wave and their sizes pulsing with time. Each circle is drawn using the Canvas `arc` and `fill` methods, with its color switching between red and blue depending on whether its current size exceeds a threshold. The animation runs via `requestAnimationFrame`, advancing a time variable `t` in increments of 0.1 to drive the motion.

Sep 24, 2019

Scatter plot showing Statewise Minimum Wage

This scatter plot visualizes the minimum wage across U.S. states from 1968 to 2017, with point size and y-axis position encoding the wage value and color mapping to the year. Using the Vega-Lite API with D3.js for data loading, the visualization reads from a CSV file and displays state names via tooltips, while the federal low wage is shown for comparison. The plot also includes custom axis and label styling for improved readability.

Area Plot displaying Stroke Prediction based on age

This area plot shows stroke prediction risk by age, with color encoding for gender (Female, Male, Other) and point size reflecting BMI. The visualization reveals that women are more prone to stroke than men, and that smoking status (smokes, formerly smoked, never smoked, or unknown) is linked to higher stroke incidence. Built with the Vega-Lite API and D3.js, it renders an SVG chart that reads data from a CSV file hosted on GitHub gist. The chart uses tooltips to display patient smoking status and customizes axis styling through a configuration object.

Loading and Parsing US Minimum Wage by State from 1968 to 2017 and 2018 Equivalent Dollars CSV Data

This example demonstrates loading and parsing a CSV dataset of US minimum wage values by state from 1968 to 2017, including 2018-equivalent dollar amounts. It displays the file’s size in kilobytes, row count, and column count in a large text element. The code uses `d3.csv` and `d3.csvFormat` from d3.v5 to fetch and analyze the data from a GitHub gist URL. A commented alternative shows `fetch` with `async`/`await` and `d3.csvParse` for the same task.

Line Plot of Life Expectancy Data_GDPVsLifeExpectancy

This line plot shows life expectancy versus GDP per capita across multiple years, with each line representing a year colored by a category scale and line thickness reflecting average BMI. The visualization reveals a logarithmic relationship where higher GDP correlates with increased life expectancy, though gains diminish at higher income levels. Built with D3 v4 and Metrics-Graphics, it loads CSV data from a GitHub gist and nests rows by year to generate separate series. Hovering over a line displays the exact year, GDP, and life expectancy values through the chart’s interactive tooltip.

Life Expectancy Vs GDP Chart

This visualization presents a multi-line chart tracking life expectancy against GDP across several countries over a 15-year period. The chart uses color to represent different years in five-year increments, while line thickness encodes the average BMI for each data series. The code loads a WHO life expectancy CSV dataset, parses the year column, and nests the data by GDP value using `d3.nest()`. It renders the chart through the Metrics Graphics library (MG), with `MG.data_graphic()` managing the axes, legend, and series styling, while D3 v4 handles custom number formatting for the y-axis.

Hello HTML

An excited face composed of SVG shapes renders in a React component, with a yellow circle as the head, white-ringed eyes, and a curved mouth path. The app uses D3’s `arc` generator to construct the mouth, while positions for eyes and head rely on fixed pixel offsets within a 960×500 viewport. React renders the SVG directly, with D3 handling only the path calculation.

Aug 25, 2019

Smiley Face Part II

This example uses React and D3 to draw an excited face as an SVG. A yellow circle forms the head, with two white-ringed eyes positioned symmetrically above the center. A D3 arc path creates a broad, open mouth, suggesting a joyful expression. The D3 `arc()` generator defines the mouth’s shape, while React’s `ReactDOM.render` outputs the SVG elements directly.

Aug 25, 2019

Smiley Face Part II

A React and D3.js visualization renders a smiling face from geometric primitives. The SVG canvas is 960 by 500 pixels, and the central coordinate system is translated to the canvas center. A yellow circle with a thick black stroke forms the head, while two smaller circles create the eyes. The mouth is drawn using D3's `arc` generator to create an annular sector path, defined by inner and outer radii and specific start and end angles. The code uses the ReactDOM library to render the SVG directly into the root element.

Aug 25, 2019

Smiley Face Part II

A stylized smiley face is rendered as a set of SVG shapes, with a yellow circular face, a thick black outline, and two black eyes. The mouth is created using a D3 arc path with specified inner and outer radii and angular range. The visualization is built with React, using explicit `React.createElement` calls, and dynamically generates the SVG elements. The D3 `d3.arc` API calculates the mouth’s path data, while React manages the component structure and rendering within the `#root` element.

Smiley Face Part II

A yellow smiley face constructed from SVG shapes appears centered on a dark background. React renders the face as two eye circles and a head circle, while a mouth is drawn using a D3 arc generator with specific inner and outer radii. The D3 arc path is passed to an SVG path element, with all shapes positioned relative to a central transform using pixel-based offsets and radii.

Smiley Face Part II

This example shows a yellow smiley face centered in an SVG canvas, composed of circular eyes and an arc-shaped mouth built with D3’s `arc` generator. The face is rendered using React, with D3 v5 providing the geometric path calculations. All shapes are drawn as SVG elements within a transformed group, using explicit radii and offsets for the eyes and mouth. The code uses `ReactDOM.render` to mount the component, and the `arc` function from `d3` defines the mouth’s start and end angles.

Smiley Face Part II

This example uses React and D3 to render a yellow smiley face in an SVG canvas. The face is composed of basic SVG shapes: three circles for the head and eyes, and a thick, dark, arc-shaped path for the mouth. The D3 arc generator (d3.arc) defines the mouth's geometry by setting inner and outer radii and start and end angles, which are then passed to the path element. React creates the SVG elements declaratively, while D3 provides the arc path data.

Smiley Face Part II

A smiley face built with React and D3 is rendered as an SVG graphic. The visualization shows a yellow circle face with two black eyes and a curved mouth, all centered on a 960 by 500 pixel canvas. The code uses D3's `arc()` generator to create the mouth path and React to manage the SVG elements, including the `circle` shapes and the `path` for the mouth. The face is drawn using a static set of coordinates and dimensions defined in the React component.

Aug 23, 2019

Smiley Face Part II

Aug 23, 2019