Narayana Reddy

Fork of Fork of Gender Distribution Chart

This interactive stacked bar chart displays the gender count for each university module, with a radio-button toggle to switch between absolute counts and percentage proportions. Built with D3.js (version 3.5.6), the visualization uses `d3.layout.stack` to aggregate the male and female data from a CSV file, and animates transitions between the two modes using D3's `.transition()` method. The chart renders as an SVG with rotated x-axis labels, a legend, and hover effects that reduce rectangle opacity.

May 6, 2021

Fork of Fork of Filterable Cocktail Ingredient Bar Chart

This fork of a D3 bar chart displays the top 50 university modules by student count, with a dropdown filter to subset results by department values CSIS, CAM, or GAV. The visualization uses React to manage state and render SVG elements, while d3’s `scaleBand`, `scaleLinear`, and `nest` functions aggregate and sort the CSV data for display. Department filtering applies a case-insensitive string match on the dataset, and the chart updates the y-axis accordingly. Axes and marks are built as React components, with native SVG `<title>` elements providing hover tooltips.

May 5, 2021

Fork of Filterable Cocktail Ingredient Bar Chart

This bar chart displays the top 50 modules by student count, filterable by department (CSIS, CAM, or GAV). The visualization uses D3.js (v5) within a React framework to render the SVG, employing `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Data is loaded from a CSV via d3 `csv`, nested and rolled up by module code to calculate counts. A dropdown menu, built with ReactDropdown, allows users to filter departments, dynamically updating the bars. Tooltips show exact counts via SVG `<title>` elements.

May 5, 2021

Fork of A Bar Chart(Platform)

This interactive bar chart displays total video game sales across platforms, with a dropdown menu to switch between global, EU, JP, NA, and other regional sales figures. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position SVG rectangles, with axes rendered through custom `AxisBottom` and `AxisLeft` components. Data comes from a Kaggle dataset of the top 500 games, loaded via D3's `csv` method. A tooltip appears on hover, showing the exact sales value for each bar.

May 5, 2021

Fork of Number of Space Missions by Company/Country/Status Rocket

This interactive stacked bar chart visualizes the number of space missions, segmented by mission status and grouped by a selectable attribute (Company Name, Country, or Rocket Status) via a dropdown. Users can hover over bars to see exact mission counts. The visualization is built using React, the Vega-Lite API (vl) with D3 for data loading, and uses a CSV file from a GitHub gist as its data source. The chart's appearance is customized through a config object.

May 4, 2021

Fork of Number of Space Missions by Company/Country/Status Rocket

This interactive stacked bar chart visualizes the number of space missions, segmented by mission status and grouped by a selectable attribute (Company Name, Country, or Rocket Status) via a dropdown. Users can hover over bars to see exact mission counts. The visualization is built using React, the Vega-Lite API (vl) with D3 for data loading, and uses a CSV file from a GitHub gist as its data source. The chart's appearance is customized through a config object.

May 4, 2021

Fork of Gender Distribution Chart

This chart compares the distribution of male and female cases across Chinese provinces using stacked bar charts, with radio buttons to toggle between raw counts and percentage of total illness. The visualization uses D3.js v3, including d3.layout.stack for stacking, d3.svg.axis for axes, and D3 transitions to animate the re-scaling of bars when switching modes. Data is loaded from a CSV file, and the color scale uses d3.scale.category20 to distinguish between genders. The chart includes an interactive legend and hover effects on the SVG rectangles.

May 4, 2021

Fork of Gender Distribution Chart

This visualization displays the gender distribution of students across university modules using stacked bar charts, with each bar representing a module’s female and male enrollments. It supports toggling between absolute counts and percentage views via radio buttons, triggering animated transitions that rescale the bars. The chart uses D3.js v3’s ordinal and linear scales, stacked layout, and SVG rendering, with data loaded from a CSV file. Tooltips and a categorical color legend enhance interactivity, while axis labels and rotated module names aid readability.

May 2, 2021

Fork of Infection Type Chart

This fork of the Infection Type Chart visualizes stacked bar counts of infection types—Unknown, Social, Relative, Travel—across Chinese provinces, with an animated toggle between absolute case numbers and percentage shares. Using D3 v3 with SVG, it employs `d3.layout.stack` to arrange the series and transitions to update bar geometry and axes on user input. The chart sorts provinces alphabetically, rotates x-axis labels, and includes a hand-built legend and hover tooltip styling from `styles.css`.

May 1, 2021

Fork of Interactive Bar Chat

This interactive bar chart displays survey data on programming language popularity, with each language ranked by its percentage value. Built with D3 v5, the visualization renders as an SVG graphic, using `scaleBand` for the categorical x-axis and `scaleLinear` for the numeric y-axis. Bars are colored per data entry, and value labels appear above each bar. The chart includes gridlines created via `axisLeft`, with a dark background from the container styling, and is accompanied by axes rendered through `axisBottom`. The data comes from a static JSON array parsed in `data.js`.

Apr 21, 2021

Fork of Untitled

This example shows a stacked bar chart of sales quantities by city for a selected customer segment, with a dropdown to switch segments and a checkbox to toggle sorting by total quantity. Built with D3 v5, it uses `d3.stack` to layer the data, `d3.scaleBand` and `d3.scaleLinear` for axes, and ordinal colors. Transitions animate updates via `transition.duration`, while the data comes from a CSV file of sales orders. The visualization is rendered as SVG.

Fork of Student Perfomance

This bar chart shows the distribution of students by race/ethnicity and test preparation course completion, with the y-axis counting total students and color encoding whether the course was completed. The visualization uses the Vega-Lite API with D3.js, retrieving data from a CSV hosted on GitHub Gist. A bar chart is rendered by grouping records by race/ethnicity and test preparation status, with tooltips revealing exact counts for each group. The chart’s appearance is customized through a config file that adjusts axis styles and label colors.

Fork of Fork of Locations of Datavis 2020 Students By Date

This map visualizes the geographic distribution of Datavis 2020 students, with each circle representing a student’s approximate location and colored by the week they joined. The visualization uses D3.js’s `geoNaturalEarth1` projection and `geoPath` to render the world map, graticules, and country interiors from TopoJSON data. Student coordinates, manually geocoded into a CSV, are plotted as SVG circles using React, with a sequential Viridis color scale for the join date and a legend showing the date range.

Fork of Locations of Datavis 2020 Students By Date

A world map visualizes the global distribution of students who joined Datavis 2020, with each dot colored by the week they joined. It uses d3.geoNaturalEarth1 and d3.geoPath for map projection, topojson for world atlas data, and React with SVG rendering. A sequential color legend shows the date range. Data comes from manually geocoded student locations in Slack.

Fork of Fork of Project 10/31

This interactive scatter plot displays the relationship between college majors and the male workforce share, with each circle representing a major. Users can toggle between earning and labor force attributes via a dropdown menu, while a categorical color legend filters the data by major category. The visualization animates circle positions using D3 transitions and includes a tooltip for on-hover details. Built with D3 v5, the SVG uses `scalePoint` and `scaleLinear` for axes, and `scaleOrdinal` for color mapping. Data comes from a CSV file summarizing FiveThirtyEight’s college-majors dataset.

Fork of Gender Distribution Chart

This visualization displays the gender distribution of students across university modules using stacked bar charts, with each bar representing a module’s female and male enrollments. It supports toggling between absolute counts and percentage views via radio buttons, triggering animated transitions that rescale the bars. The chart uses D3.js v3’s ordinal and linear scales, stacked layout, and SVG rendering, with data loaded from a CSV file. Tooltips and a categorical color legend enhance interactivity, while axis labels and rotated module names aid readability.

Apr 19, 2021

Fork of Fork of Fork of Gender Distribution Chart

A stacked bar chart displays the gender distribution of students across university modules, with each bar segmented into male and female counts. Radio buttons allow toggling between absolute counts and percentage proportions, animating the bar segments and y-axis scale via transitions. Built with D3.js version 3, the SVG chart uses `d3.layout.stack` for stacking, `d3.svg.axis` for axes, and form inputs to trigger transitions between count and percentage modes. Data comes from a CSV file containing module names and gender counts.

Fork of Gender Distribution Chart

This visualization displays the gender distribution of students across university modules using stacked bar charts, with each bar representing a module’s female and male enrollments. It supports toggling between absolute counts and percentage views via radio buttons, triggering animated transitions that rescale the bars. The chart uses D3.js v3’s ordinal and linear scales, stacked layout, and SVG rendering, with data loaded from a CSV file. Tooltips and a categorical color legend enhance interactivity, while axis labels and rotated module names aid readability.

Fork of Untitled

This radial bar chart compares data across Chinese provinces, plotting two series per category as concentric arcs. The green outer bars show “OurData” values, while red inner bars represent “ActualData” for each province, with labels rotated around the circle for readability. Built with D3 v4, it uses `d3.scaleBand` for the angular axis, `d3.scaleRadial` for the radius, and `d3.arc` to generate the SVG paths. The data originates from a local file with province names and paired value/rate fields.

Fork of Sea Turtle Survival (mock data)

This stacked area chart visualizes mock sea turtle survival data for three species—Green, Loggerhead, and Hawksbill—over time, with each colored layer representing population counts. The chart uses D3 v4’s `d3.stack()`, `d3.area()`, and `d3.scaleTime()` to render the SVG paths, while `d3-area-label` positions the species labels inside each region. Axis ticks and gridlines are styled with CSS, and the y-axis title labels the population metric. Data is loaded from a CSV file, filtered to post-1900 dates, and the chart redraws responsively on window resize.

Untitled

This chart shows the market share of web browsers across a two-month period in 2015, using stacked areas to display each browser's percentage over time. It is built with D3.v4, using `d3.stack` and `d3.area` to create the stacked layers, and `d3.timeParse` to convert the date column. The data is loaded from a TSV file, with a legend labeling each layer near the right edge, and the y-axis is formatted to show percent values.

Mar 25, 2021

Visualization with D3.js

This pie chart visualizes operating system market share percentages for Android, Windows, Linux, and iOS. The visualization uses D3.js version 5 to bind the dataset to SVG elements, computing arc paths with `d3.pie()` and `d3.arc()`. A `d3.scaleOrdinal` with `schemeCategory10` assigns colors to each slice, and labels are positioned using `label.centroid()`. The example demonstrates basic pie chart construction with a small, hardcoded dataset in a single SVG container.

Mar 25, 2021

teractive Pie Charteew

An interactive donut chart visualizes the distribution of income categories from a CSV dataset, with each slice labeled and colored by category. Hovering over a slice displays a tooltip showing the percentage of the total that slice represents. The chart is rendered as an SVG using D3 v5, employing `d3.pie()`, `d3.arc()`, and `d3.scaleOrdinal()` for layout and color encoding, with mouse events to update the tooltip’s opacity and position.

nteractive Pie Charteew

This interactive donut chart visualizes income sources (Sales, Dividends, Interest) with their corresponding amounts. The chart uses D3 v5’s `pie` and `arc` generators to create the donut slices, with `scaleOrdinal` mapping category colors. Hovering over a slice increases opacity and displays a tooltip showing the percentage of total income. Data is loaded from a CSV using `csv`, and the tooltip follows the mouse position, with the percentage computed via `sum`.

Fork of Fork of Fork of Student count for Each department1

This scatter plot visualizes student counts across departments by plotting Female counts on the x-axis and Male counts on the y-axis, with color encoding for Major_category and tooltips for Module. The visualization loads data from a remote CSV using d3.csv and renders through the vega-lite-api library, which registers with vega and vega-lite. Circle marks are configured with a fixed size of 150, and the chart fills the browser window using the width and height properties. The data source is fetched from a GitHub-hosted final3.csv file, and the visualization includes custom axis styling and grey-tinted titles from the config object.

Fork of Fork of Making an Interactive Pie Chart

This donut chart displays income categories (Sales, Dividends, Interest) with each slice’s percentage revealed via an interactive tooltip on mouseover. Built with D3 v5, it loads data from data.csv, scales colors with `scaleOrdinal`, and computes slice geometry using `pie` and `arc` functions. Hovering highlights each slice’s opacity change and shows a tooltip positioned at the cursor, while labeled text sits inside each arc segment. The SVG rendering includes a padded, rounded arc style with corner radius.

Fork of Gender - Version 1.2

A sunburst chart visualizes the sequential career paths of male and female participants after high school, with each arc representing a transition between Military, School, Work, or NA categories. A dropdown menu switches between two JSON datasets, and hovering over a segment highlights its ancestor chain while displaying the percentage and raw count of participants following that exact path. The visualization uses d3.partition and d3.arc for the sunburst layout, with breadcrumb trails and mouseover transitions for interactive exploration.

Fork of Making an Interactive Pie Chart

This donut chart displays the proportional breakdown of income sources, with three colored segments labeled Sales, Dividends, and Interest. Hovering over a slice reveals a tooltip showing its percentage of the total amount. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.sum` to calculate and render the arcs. Data is loaded from a CSV file, and the SVG elements are manipulated directly to create the chart and interactive tooltip.

Fork of Making an Interactive Pie Chart

This donut chart displays the proportional breakdown of income sources, with three colored segments labeled Sales, Dividends, and Interest. Hovering over a slice reveals a tooltip showing its percentage of the total amount. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.sum` to calculate and render the arcs. Data is loaded from a CSV file, and the SVG elements are manipulated directly to create the chart and interactive tooltip.

Fork of CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions from 1790 onward, segmented by fossil fuel types—Gas, Liquids, Solids, Cement Production, and Gas Flaring—measured in gigatons per year. The y-axis is labeled accordingly, with a time-based x-axis. Built with D3 v4, it uses `d3.stack()` and `d3.area()` to render SVG paths, with `d3.areaLabel` positioning white labels within each segment. The `d3.scaleOrdinal` and `d3.schemeDark2` assign colors, while axis ticks are formatted with `d3.timeFormat`. Data comes from a CSV file loaded via `d3.csv`.

Fork of Gender Distribution Chart

This chart compares the distribution of male and female cases across Chinese provinces using stacked bar charts, with radio buttons to toggle between raw counts and percentage of total illness. The visualization uses D3.js v3, including d3.layout.stack for stacking, d3.svg.axis for axes, and D3 transitions to animate the re-scaling of bars when switching modes. Data is loaded from a CSV file, and the color scale uses d3.scale.category20 to distinguish between genders. The chart includes an interactive legend and hover effects on the SVG rectangles.

Fork of Gender - Version 1.2

A sunburst chart visualizes the sequential career paths of male and female participants after high school, with each arc representing a transition between Military, School, Work, or NA categories. A dropdown menu switches between two JSON datasets, and hovering over a segment highlights its ancestor chain while displaying the percentage and raw count of participants following that exact path. The visualization uses d3.partition and d3.arc for the sunburst layout, with breadcrumb trails and mouseover transitions for interactive exploration.

Mar 23, 2021

Fork of Fork of Fork of Student count for Each department

This scatter plot visualizes the relationship between the number of female and male students in different academic departments, using data from a CSV file accessed via a URL. Each circle represents a department, with its position determined by the female and male student counts, while the color encodes the major category and a tooltip reveals the department name. The visualization is built using the Vega-Lite API, with data loading handled by D3's `csv` function, and features custom styling for the axes and labels. The chart is rendered as an SVG that fits the full browser window.

Fork of Fork of Student count for Each department

This scatter plot displays the relationship between Female and Male student counts across different departments, with each point representing a department and its major category encoded by color. The data is loaded from a CSV file using D3’s `csv` function, and the visualization is rendered with the Vega-Lite API, configured via `vl.markCircle` for size, `vl.x` and `vl.y` for quantitative axes, and `vl.color` for categorical grouping. Tooltips show the module name, and the chart auto-fits the window using Vega-Lite’s `autosize` method.

Fork of Fork of Student count for Each department

This scatter plot visualizes the relationship between female and male student counts across academic departments, with each point colored by major category and tooltips revealing the specific module name. The visualization uses the Vega-Lite API with D3.js to load CSV data from a GitHub repository, and renders the chart as an SVG. Circle size is fixed rather than data-driven, and the plot employs a custom dark-themed configuration for axis styling and label readability.

Fork of Student count for Each department

This scatter plot visualizes the relationship between the number of female and male students across academic departments, with each circle representing a department and color encoding its major category. The visualization uses data loaded from a CSV file via D3’s `csv` function, and is rendered with the Vega-Lite API, which registers with Vega and Vega-Lite to create an SVG output. Tooltips are enabled through the vega-tooltip handler, while the chart’s axes and labels are styled using a custom configuration object. The plot is displayed full-screen with automatic resizing to fit the viewport.

Fork of Bar chart

A horizontal bar chart displays the average grade achieved for a list of university module codes, sorted by grading scale. The visualization emphasizes the distribution of marks across many modules, using a color gradient from steelblue to grey to represent low to high scores. Built with D3 v5, it uses `scaleLinear` for the x-axis and color scale, `scaleBand` for y-axis categories, and `axisBottom` with custom tick formatting. SVG rectangles render the bars with `transition` animation over a duration of 1000ms, transitioning their width and fill. The data is loaded from a CSV file via `csv` and parsed for numeric marks.

Mar 21, 2021

Fork of

A horizontal bar chart displays average marks for courses, with bars colored on a gradient from steelblue to grey based on value. The visualization supports hover tooltips and click alerts, and includes axis labels and gridlines. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG elements, with data loaded from a CSV file.

Mar 21, 2021