M

Manideeprenikindi

@Manideeprenikindi·64 public vizzes

Loading thumbnail…

Web page

This web page presents a scientific data visualization narrative focused on online customer sales, using a structured layout with headline, bylines, and chart sections. The page uses Open Sans and Lora fonts from Google Fonts, with CSS defining light and dark theme classes that can be toggled on the body element. The styling includes responsive chart rows that collapse into a single column on mobile devices, plus photo sections with captions. The HTML structure references creating chart sections with titles, subheads, and source attributions for the data visualizations.

Loading thumbnail…

Online Sales for Purchase value

This horizontal bar chart displays the number of purchases made for various purchase value categories, limited to the top 15 categories from a CSV of online customer sales. The chart uses React to manage state and render the SVG, while D3 v5 functions like `scaleBand`, `scaleLinear`, `max`, and `csv` handle data loading, scaling, and axis generation. Axes are drawn with D3's `ticks` and custom grid lines, with the x-axis representing purchase counts and the y-axis listing purchase values. The visualization highlights an inverse relationship, where lower purchase values correspond to higher purchase counts.

Loading thumbnail…

Online Sales for Purchase Value Bar Chart

This bar chart displays total online sales revenue by year for a customer dataset, with a fixed y-axis scale of 0 to 90 and red bars representing revenue values. The visualization uses D3.js v4 to parse CSV data from a GitHub repository, scale the categorical year values on the x-axis via `d3.scaleBand`, and map revenue to a linear scale on the y-axis. SVG rectangles are drawn for each bar, while `d3.axisBottom` and `d3.axisLeft` generate the labeled axes, with rotated x-axis text for readability.

Loading thumbnail…

Online Sales for Purchases Line chart

This example shows a line chart of online sales purchases over time, plotting the number of purchases against the year. The visualization uses a D3 v5 SVG render, with a time-scaled X-axis and a linear Y-axis. It loads CSV data from a GitHub gist, parsing the year with `d3.timeParse` and scaling the line with `d3.line`. Styled with a purple stroke and custom tick formatting, the chart includes axis labels for "Year" and "N_Purchases," with gridlines. The code demonstrates modular D3 imports and axis construction.

Loading thumbnail…

Online Sales Bar Chart

This bar chart displays student scores from a local CSV file, with each student's name on the y-axis and their score as the bar length on a linear scale from 0 to 100. The visualization uses D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `axisBottom` and `axisLeft` to render the axes. The purple bars are drawn as SVG `<rect>` elements appended to the chart, and hovering over a bar triggers a CSS opacity change.

Loading thumbnail…

Online Sales Bar Chart

This interactive stacked bar chart visualizes the estimated 2010 religion breakdown of the world’s 20 most populous countries, using data from the Pew Research Global Religious Landscape. Hovering over the bars displays tooltips, while hovering over the color legend highlights specific religions by fading the base bars. Built with D3.js, the visualization employs d3.layout.stack for stacking, d3.svg.axis for axes, d3-tip for tooltips, and d3-legend for the interactive legend, rendered as animated SVG.

Loading thumbnail…

Online Sales Bar Chart

This bar chart visualizes online customer sales, plotting the number of purchases against total revenue for each category. It uses D3.js v4 with an SVG rendering approach, leveraging `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis. Data is loaded asynchronously from a CSV file via `d3.csv`. The chart positions rectangular bars with a fixed blue fill, rotating the x-axis labels for readability.

Loading thumbnail…

Online Sales Line chart

This example shows online sales revenue over time as a line chart, with the x-axis representing years and the y-axis representing total revenue. It uses D3 v5 to load CSV data, parse dates with `d3.timeParse`, and render the visualization in SVG. The code employs `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to construct the chart, with gridlines styled via tick marks and a styled purple stroke for the data path.

Loading thumbnail…

Online sales Revenue yearwise

An interactive area chart displays total online sales revenue by year, with a smooth line and shaded region that highlight revenue trends over time. The visualization loads CSV data and parses dates using D3’s time parsing, then scales the axes with `scaleTime` and `scaleLinear`. It renders an SVG with an axis-left and axis-bottom, and generates the line and area paths using `line()` and `area()` with `curveBasis`. The styling, including gridlines and color, is applied via CSS.

Loading thumbnail…

Online Sales Pie Chart

This example shows the distribution of online customer sales revenue as a pie chart, with each slice colored by revenue amount and accompanied by a legend displaying the age group, percentage of total revenue, and absolute revenue in thousands. The chart uses D3 v5 to load CSV data from a GitHub gist via `d3.csv`, transform it with `d3.pie()`, and render SVG paths using `d3.arc()`. Colors are assigned with `d3.scaleOrdinal()`, and legend text is formatted with `d3.format()` for compact tick labels.

Loading thumbnail…

Online Sales based on Age

A scatter plot displays online customer sales, mapping customer age on the x-axis against purchase value on the y-axis. Each circle’s fill color encodes the number of purchases, while the Time_Spent and Revenue_Total fields are bound to the circle’s rx and ry attributes, though the standard radius remains constant. The visualization uses D3 v5 with scaleLinear, extent, axisLeft, and axisBottom, loading CSV data from a GitHub gist and rendering as SVG circles.

Loading thumbnail…

Online Sales

This visualization displays the number of purchases for the top fifteen revenue-generating brands in an online sales dataset, using a horizontal bar chart. The revenue totals appear on the y-axis, while purchase counts are mapped on the x-axis. Built with React and D3 v5, the chart uses `scaleBand` and `scaleLinear` for positioning, with SVG `rect` elements for bars and custom tick rendering. Data is loaded asynchronously from a CSV file via `d3.csv`, and the visualization includes blue grid lines to aid value comparison.

Loading thumbnail…

Car Sales Bar Chart

This visualization displays car sales figures as a bar chart, with each brand represented by a vertical bar showing its last-year sales count on a linear scale. The chart includes rotated x-axis labels for readability and uses a teal color scheme for the bars. Built with D3.js v4 and React, the visualization creates an SVG graphic, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for tick marks. Data is loaded from a CSV file containing brand and sales information.

Loading thumbnail…

Untitled

This bar chart visualizes total car sales across different locations, with each location represented by a vertical bar scaled against a fixed y-axis range of 0 to 13. The chart uses D3.js v4 to fetch data from a CSV file hosted on GitHub, then renders the visualization as an SVG. The code employs `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to generate the axes. Bars are drawn as SVG rectangles with a teal fill color, and x-axis labels are rotated 45 degrees for readability.

Loading thumbnail…

Car Sales

This interactive stacked bar chart visualizes the estimated 2010 religion breakdown of the world's 20 most populous countries, using D3.js version 3.5.5 to render SVG graphics with animation. The chart displays layered bars across countries, with hover tooltips powered by the D3-tip library revealing specific religion populations, while hovering over the color legend highlights individual religions by fading the other bars. The x-axis uses a custom tick format that converts large numbers to abbreviated forms like "B" for billions. Data originates from Pew Research's Global Religious Landscape, processed through a custom script.

Loading thumbnail…

Car Sales

This bar chart visualizes carbon emissions by car make year from 2013 to 2022, with values displayed above each bar. Hovering over a bar highlights it and displays the numeric difference from the selected year’s value. The visualization uses D3.js v5 with SVG rendering and transitions. It scales the y-axis for CO2 emissions in g/km, and incorporates `d3.scaleBand`, `d3.scaleLinear`, and axis functions for grid lines and labels.

Loading thumbnail…

Car Sales Donut Graph

This donut chart visualizes car sales by brand, showing the proportion of total vehicles sold for each manufacturer. The chart uses a categorical color scale with distinct hues for each brand, displays sales counts directly on larger segments, and includes an interactive legend listing brand names with corresponding color swatches. Built with D3 v7, the visualization loads car sales data from a CSV file and uses `d3.flatRollup`, `d3.pie`, and `d3.arc` to generate the donut geometry. Only brands with sales exceeding 1,000 units display their counts on the chart.

Loading thumbnail…

Car Sales

This stacked bar chart displays the percentage of movie ratings across six genres, showing how rating distributions differ by genre. Each horizontal bar is segmented by five rating categories from “below 5.0” to “above 8.5,” with hovering revealing exact percentages via a tooltip. The visualization uses D3 v7’s `d3.stack()` and `d3.scaleOrdinal()` to generate SVG rectangles, with axes created through `d3.axisLeft()` and `d3.axisBottom()`. Data is loaded from a CSV file, and the dark theme is styled via external CSS.

Loading thumbnail…

Car Sales data Pie chart

This pie chart visualizes year-to-date car sales across multiple brands, displaying each brand’s proportional share and a corresponding legend with sales totals. The chart uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate SVG paths and text labels positioned via `arc.centroid`. Data is loaded asynchronously from a CSV file using `d3.csv`, with values parsed and aggregated before rendering. The example demonstrates standard D3 data-binding patterns for entering paths and legend elements.

Loading thumbnail…

Country and Implementation Rank

A donut chart displays the top cuisine types by number of orders from the Foodhub NYC food delivery dataset. The visualization uses D3 v7 with `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to create colored arcs with a centered hole, while a legend identifies each cuisine. Interactive labels show order counts for cuisines exceeding 100 orders. Data loads from a CSV via `fetch` and `d3.csvParse`, processed with `d3.flatRollup` to aggregate counts per cuisine.

Loading thumbnail…

Country and Implementation_Rank

This bar chart displays carbon emissions by car model year from 2013 to 2022, using data from a CSV file. It uses d3.scaleBand and d3.scaleLinear to map years and CO2 values, with SVG rectangles rendered from the sample array. Hovering a bar triggers a transition that highlights it, shows a dashed limit line, and displays divergence text indicating the difference from the hovered value, while d3.axisLeft and d3.axisBottom provide the axes and grid lines.

Loading thumbnail…

Countries and their Implementation-Rank Area Chart

This visualization shows an area chart of Rice Production in the US from 1991 to 2021, plotting Implementation Rank over time. It uses D3 v5 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.area` with `curveBasis` smoothing. The data is loaded from a CSV source, parsed with `d3.timeParse`, and rendered with custom axes, gridlines, and styled path elements for the line and filled area.

Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot visualizes the Iris dataset, cycling through four different measurement pairings on the x-axis every few seconds. Circles represent individual flowers, colored by species (setosa, versicolor, virginica), while sepal dimensions control the ellipses' rx and ry radii alongside petal-based x-y positions. Built with D3 v6, it uses `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, and `setInterval` to trigger animation. Data loads via `d3.csv` from a GitHub-hosted CSV file, with SVG rendering and custom color legend.

Loading thumbnail…

Pie Chart

This pie chart displays the count of students in each major at UNT, with a legend identifying each major and its corresponding value. It is built with D3 v5, loading data from a CSV file via `d3.csv`, and renders the visualization using SVG. The pie chart is constructed with `d3.pie` and `d3.arc` to generate the segments, while `d3.scaleOrdinal` assigns colors to the sections. The chart includes labels showing formatted values (e.g., "50K") and a legend with colored squares and text labels for each major.

Loading thumbnail…

Pie Chart

This pie chart visualizes the distribution of student counts across academic majors at UNT, with each slice’s value labeled in thousands and a color-coded legend listing majors and their corresponding counts. The chart is built with D3 v5, using the `pie` and `arc` generators to compute slice geometry, `scaleOrdinal` for color assignment, and SVG elements for rendering paths, text labels, and legends. Data is loaded asynchronously from a CSV file via `d3.csv`.

Loading thumbnail…

Activity 7

This example shows the populations of the top 20 countries in 2020 as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The chart displays green bars and includes axis labels and tick marks. The code uses React with D3 v5 APIs such as `scaleBand`, `scaleLinear`, `max`, and `format` to position and label the bars, and the data is loaded from a CSV file using `csv`. The visualization is rendered as SVG elements within a React component.

Loading thumbnail…

Fork of Scatter Plot with Shape

This example visualizes the classic Iris dataset as a scatter plot, encoding sepal length on the x-axis and petal length on the y-axis. The species of each flower is distinguished by shape using D3’s `symbol` generator with `symbolsFill`, and a custom legend displays the shape-to-species mapping. Axes are rendered with `axisLeft` and `axisBottom`, while scales are created via `scaleLinear` and `scaleOrdinal`. Data is loaded asynchronously from a GitHub-hosted CSV and parsed with `csvParse`, with the visualization updating reactively through a state-based render cycle.

Loading thumbnail…

Pie Chart

This pie chart visualizes the distribution of students across academic majors at the University of North Texas, with each slice sized by student count. The chart renders as an SVG using D3 v5, employing `d3.pie` for arc generation and `d3.arc` for the donut geometry. Slices are colored via a categorical `scaleOrdinal` palette, with labels and a legend displaying each major’s student population in thousands. Data is fetched as CSV from a GitHub gist and processed asynchronously before rendering.

Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot displays the Iris dataset, animating through different feature pairs on the x-axis every few seconds. It uses the D3.js library (version 6.7.0) to create an SVG visualization, with a custom `scatterPlot` export that builds the plot using `scaleLinear`, `axisLeft`, and `axisBottom` for axes. The animation cycles through four measurement columns, updating the x-axis while keeping the y-axis fixed on sepal length. Data is fetched from a GitHub gist CSV, and points are colored by species (setosa, versicolor, virginica), with a legend and title rendered as SVG text elements.

Loading thumbnail…

Activity 8 Map

This visualization displays an interactive world map using an equirectangular projection, with countries rendered as light green shapes with indigo borders on a skyblue sphere background. The map supports zooming and panning via d3.zoom, while hovering over a country turns it maroon. Built with D3 v5 and TopoJSON, the code uses d3.geoPath and d3.geoEquirectangular to project geographic data from the world-atlas countries-110m.json dataset, which is loaded and converted into GeoJSON features using the topojson feature method.

Loading thumbnail…

MuscleCars tree

An interactive tree diagram maps the hierarchy of muscle car models under their manufacturers, showing Ford with Mustang and Torino, and Dodge with Charger and Challenger variants. The visualization uses D3.js v3 layout and SVG rendering with zoom, drag, and click-to-collapse interactions. Nodes are color-coded by hierarchy level, and the code includes custom tooltip elements and arrow markers for links, animated transitions, and collision detection between nodes.

Loading thumbnail…

Activity 7

This example displays a horizontal bar chart of 2020 population data by country, with green bars and blue axis ticks styled via CSS. It uses React for component structure, rendering SVG elements like `rect`, `text`, and `line` directly. D3 v5 utilities such as `scaleBand`, `scaleLinear`, `max`, and `format` handle scaling and tick formatting, with custom `AxisBottom` and `AxisLeft` components defining the axes via JSX. The chart loads data through a custom `useData` hook and includes tooltips via SVG `<title>` elements.

Loading thumbnail…

Network Graph

A network graph shows social connections among ten individuals, with nodes representing people and lines indicating friend relationships. The graph uses a force-directed layout powered by d3.forceSimulation, with collision detection and charge forces to position the nodes. Nodes are rendered as circles with labels, and links include arrow markers. The visualization is built with D3 v6 and renders to SVG, reading data from a JSON file. Users can drag nodes to reposition them, and hovering over a node triggers a CSS class change for visual feedback.

Loading thumbnail…

Activity 8 Country

This example shows a map of India generated from TopoJSON world atlas data. It filters the countries-50m dataset for the geometry with the name "India" and uses d3.geoMercator with fitSize to project it onto a 960×500 SVG canvas. The code draws the country boundary using d3.geoPath, styled simply as a black outline. It uses D3 v5 and the topojson-client library to convert the TopoJSON feature into a GeoJSON object for rendering.

Loading thumbnail…

Area Chart Activity 8

This area chart displays the cost of sales from 2000 to 2013, with a smooth curved line and a light green filled area beneath it. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `line`, and `area` with `curveBasis` to generate the SVG paths. Axis labels are highlighted in orange, tick values in red, and gridlines in gray. The data is loaded and parsed from a CSV file hosted on GitHub using `d3.csv`, with year values converted to JavaScript `Date` objects for the time scale.

Loading thumbnail…

linechart

A line chart displays the cost of sales from 2000 to 2013 using data from a CSV file. The SVG visualization, built with D3 v7, maps years on a band scale and costs on a linear scale, drawing a light green path via `d3.line()`. Both axes are generated with `d3.axisBottom` and `d3.axisLeft`, accompanied by red axis labels. The chart highlights annual cost fluctuations, peaking in 2007 and showing notable variability across the period.

Loading thumbnail…

Pie Chart

This pie chart displays the distribution of students across different majors at UNT, presenting each major as a colored slice with a numeric label and a matching legend. Built with D3 v5, the visualization uses `d3.pie` to compute arc segments and `d3.scaleOrdinal` for color assignment, while the SVG output is generated through `d3.arc` for geometric shapes and `d3.format` for tick labels. Data is loaded from a CSV file fetched via `d3.csv`, and the chart is centered within an SVG canvas with legends positioned to the right.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup that renders a static text message centered on the page. It shows how to load D3 via a CDN and use ES6 module imports, including a local module (`myMessage.js`) that exports the displayed string. The code uses `select` to target the `#message` div and sets its content, with styling from `styles.css` controlling the large font size and alignment. It serves as a template for understanding module structure and basic DOM manipulation with D3 v5.

Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot displays the Iris flower dataset, encoding sepal and petal measurements along the axes for up to four variable comparisons. Users observe the plot’s axes and data points cycling automatically at intervals, with species represented by distinct colors (skyblue, lightgreen, orange) via a custom marker function. The example demonstrates reusable chart architecture: a modular `scatterPlot` function built with D3 scales (`scaleLinear`), axes (`axisLeft`, `axisBottom`), and SVG circle selections, while `setInterval` drives the dynamic axis-value updates. Data loads as CSV from a GitHub gist, and the rendering includes an animated legend and axis labels.

Loading thumbnail…

Untitled

This example visualizes the classic Iris dataset as an animated scatterplot that cycles through four different feature pairings on the axes every few seconds. The plot maps petal width and sepal length initially, with points colored by species using custom color markers for setosa, versicolor, and virginica. It uses D3’s `csv` loader to fetch data from a GitHub gist, `select` and `join` to manage SVG circles, and a `setInterval` to update axis values dynamically. The visualization includes a legend, axis labels, and a title, all rendered as SVG elements.

Loading thumbnail…

Transforming Data

This example demonstrates data transformation by loading the Iris flower dataset from a CSV file and computing the average sepal length for each species. The code uses D3 v7 APIs including `csvParse`, `flatRollup`, and `sum` to process the data, then displays the resulting summary as formatted JSON text in a `<pre>` element. It showcases D3’s data-loading and aggregation capabilities, along with ES6 module imports for modular code organization. The visualization updates dynamically when data is fetched asynchronously.

Loading thumbnail…

Fork of Activity 7

This example visualizes population data for 20 countries in 2020 using horizontal bars, with country names on the y-axis and population values on the x-axis, formatted in billions. The visualization reads data from a CSV file via D3’s `csv` function, applies a `scaleBand` for country categories, and a `scaleLinear` for population values. React components render SVG elements, with `AxisBottom` and `AxisLeft` generating ticks, and `Marks` producing rectangles with `<title>` tooltips. The code uses D3 v5 and React 16.9.

Loading thumbnail…

Untitled

This example presents an animated scatterplot of the Iris dataset, cycling through different flower measurements on the x-axis while maintaining sepal length on the y-axis. Points are colored by species (setosa, versicolor, virginica) with a corresponding legend and title. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the plot, updating the x-scale via `setInterval`. The data is loaded from a CSV using `d3.csv` and rendered as SVG circles with transitions.

Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This scatter plot animates through the Iris dataset, cycling the x-axis through different flower measurements while the y-axis remains fixed. Colored circles represent individual flowers, categorized by species with a legend. The visualization uses the D3.js library (v6.7.0) with custom functions like `scatterPlot()` and `scaleLinear` to manage the chart. Animated transitions occur via `setInterval`, and the display is rendered as an SVG.

Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This scatter plot visualizes Iris flower measurements, mapping sepal length to the x-axis and petal length to the y-axis, with species encoded by distinct shapes. The chart uses d3.scaleLinear for position scales and d3.scaleOrdinal with d3.symbolsFill to assign geometric symbols to each species. A custom shape legend explains the species-to-symbol mapping, while d3.axisLeft and d3.axisBottom render the labeled axes. Data is loaded from a remote CSV and parsed with d3.csvParse before being plotted.

Loading thumbnail…

Fork of Scatter Plot with Shape

This example visualizes the Iris dataset as a scatter plot of sepal length against petal length, with three iris species distinguished by different D3 symbol shapes (circles, crosses, and diamonds) via `d3.scaleOrdinal` and `d3.symbol`. A custom shape legend renders the species labels. The code demonstrates modular ES6 imports, including local modules for axes and legend rendering, and loads data with `d3.csvParse` from a remote CSV file.

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis. Data points are colored by species—setosa in skyblue, versicolor in lightgreen, and virginica in orange—using D3 v6’s scaleLinear and axis functions. The visualization renders circles with d3.select and join, loaded from a remote CSV via d3.csv. Axis labels are added as SVG text elements, with the plot filling the full browser window.

Loading thumbnail…

IMDb Movie ratings

A stacked bar chart displays the percentage distribution of IMDb ratings across six movie genres, highlighting how genres like Documentary skew toward higher ratings while Action skews lower. Hovering over a bar segment reveals an exact percentage via a tooltip. The visualization uses D3 v7’s `d3.stack` and `d3.scaleOrdinal` for color encoding, scales like `d3.scaleBand` and `d3.scaleLinear`, and SVG rendering with load data from a CSV file.

Loading thumbnail…

Fork of Bubble chart

This bubble chart explores the relationship between average horsepower and torque for various car makes, while using bubble size to represent highway fuel efficiency (MPG). Each bubble is colored according to its manufacturer, with the visualization built using the D3.js v7 library and rendered as an SVG with interactive tooltips. The chart includes a legend explaining the bubble size scale and color categories, and it also incorporates smooth hover animations to enhance data exploration.

Loading thumbnail…

Fork of Activity 7

A horizontal bar chart displays the populations of twenty countries in 2020, loaded from a CSV file. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles. Axes are generated with custom React components, and a tooltip using SVG `<title>` elements reveals precise values. The chart is formatted with D3's `format` function to abbreviate large numbers.

Loading thumbnail…

Fork of Activity 7

This example visualizes population data for 20 countries in 2020 using horizontal bars, with country names on the y-axis and population values on the x-axis, formatted in billions. The visualization reads data from a CSV file via D3’s `csv` function, applies a `scaleBand` for country categories, and a `scaleLinear` for population values. React components render SVG elements, with `AxisBottom` and `AxisLeft` generating ticks, and `Marks` producing rectangles with `<title>` tooltips. The code uses D3 v5 and React 16.9.

Loading thumbnail…

Activity 7

This interactive bar chart displays the population of 20 countries in 2020, sorted alphabetically along the vertical axis with population values on the horizontal axis. The visualization uses React components to render SVG elements, with D3 v5 functions like `scaleBand`, `scaleLinear`, and `format` handling the scales and number formatting. Data is loaded asynchronously from a CSV file hosted on GitHub, and hovering over a bar reveals a tooltip with the formatted population value. The chart includes labeled axes with blue tick marks and styled green bars.

Loading thumbnail…

Fork of Fork of Activity 7

This is a horizontal bar chart showing the population of 20 countries in 2020, rendered as SVG elements within a React application. The chart uses D3 version 5 scales (`d3.scaleBand` and `d3.scaleLinear`) to map country names and population values to positions and lengths. Data is loaded from a CSV file via a custom `useData` hook, with tick marks styled blue and a green fill for each bar. Tooltips display the formatted population value on hover.

Loading thumbnail…

Fork of Activity 7

This visualization displays a horizontal bar chart of population data for 20 countries as of 2020, sourced from a GitHub-hosted CSV file. Using d3.scaleBand and d3.scaleLinear, the chart renders as an SVG, with blue tick lines for the y-axis and a population axis formatted with d3.format to abbreviate large numbers with 'B' for billions. Rectangles serve as marks, each with a tooltip showing the exact population value via an SVG title element. The visualization integrates D3 v5 with React, using hooks like useState and useEffect to load and manage data.

Loading thumbnail…

Activity 7

A horizontal bar chart displays population figures for 2020, with country names on the y-axis and numerical values on the x-axis. Built with React and D3 v5, the visualization uses `d3.scaleBand` for the categorical axis, `d3.scaleLinear` for the quantitative axis, and SVG rendering. Data is loaded asynchronously via a custom `useData` hook, and tick labels are formatted using `d3.format`. Axis components and marks are separated into modular React components for clarity.

Loading thumbnail…

Activity 6

Activity 6 loads a remote CSV file using D3's `csv()` function and displays the first ten rows as formatted JSON in a black `<pre>` block with aqua text. The page also embeds an SVG that contains a base64-encoded JPEG image set as a pattern fill, rendered via an `<image>` element. The example demonstrates basic D3 data fetching and DOM manipulation within an HTML page.

Loading thumbnail…

BMI by Age

This chart displays average body mass index across different ages using data from a CSV file. It bins the dataset by age and computes each bin’s mean BMI, rendering the results as orange SVG rectangles with white strokes. The visualization uses D3 v7’s `scaleLinear`, `bin`, `area`, `curveBasis`, and `axisBottom`/`axisLeft` APIs, with axes drawn using D3’s axis components. The data is imported via `d3.csv`, and BMI is calculated from height and weight fields before rendering.

Loading thumbnail…

BMI by Age

This example demonstrates how to compute and display the average sepal length for each iris species using D3. It loads data from a CSV file via a fetch request and parses it with the `csvParse` API. The visualization uses D3's `flatRollup` and `sum` functions to aggregate the data, then renders the resulting summary as a JSON string in a `<pre>` element. The code demonstrates loading D3 from UNPKG and using local ES6 modules.

Loading thumbnail…

Fork of BMI by Age

This fork of the BMI by Age visualization displays a scatterplot of Body Mass Index values from a CDC dataset. The chart separates data points by gender, illustrating the distribution of BMI across different ages. The code imports data from a CSV file and uses D3's `csvParse` function to process it, while the rendering is handled through SVG elements. The visualization relies on D3.js v7 for data manipulation, including the `flatRollup` and `sum` functions to calculate average values for display alongside the plot.

Loading thumbnail…

Fork of Fork of BMI by Age

This visualization displays average sepal length by iris species, computed from the classic Iris dataset. The code uses D3 v7 to parse the CSV data, group observations by species with `flatRollup`, and calculate group means using `sum`. It renders the resulting summary as JSON text via D3 selections. The visualization is a fork titled "Fork of Fork of BMI by Age," though it analyzes flower measurements rather than body mass data.

Loading thumbnail…

BMI by Age

A scatterplot of Body Mass Index by gender from the CDC Dataset, plotted against age. The chart uses circle glyphs to represent individuals, with color encoding gender, and displays data points across the age axis. The implementation relies on D3 v7 for data parsing, aggregation, and SVG rendering. It computes average sepal length per species using `flatRollup` and `sum` from d3, though the visualization itself focuses on BMI distribution. The data is loaded asynchronously via `fetch`, parsed with `csvParse`, and rendered within an SVG container.

Loading thumbnail…

Activity 6

This example renders a static, high-resolution JPEG image as a WebGL-backed SVG pattern on a canvas, displaying a stylized illustration or graphic. The page then loads a remote CSV dataset from a GitHub gist and prints the first ten rows as formatted JSON text below the image. The code demonstrates importing D3 functions like `select`, `csv`, and `csvFormat` via UNPKG, alongside a local ES6 module, within a Vue-driven layout, showing how to combine image rendering with data fetching and display.

Loading thumbnail…

My Webpage

This example demonstrates a webpage about cricket legend MS Dhoni, featuring a custom-designed SVG logo of a face and embedded text content. The page loads D3 v5 via UNPKG and uses the `d3.csv` function to fetch a remote CSV dataset from a Gist URL, displaying file size, row count, and column count in a message container. The visualization also imports `select`, `csv`, and `csvFormat` from D3 in the `index.js` file to append the first 10 data rows as formatted JSON text to the page body.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

Built with React and rendered as SVG, this piece layers hundreds of randomly generated polygons over a single, detailed vector path of Buddha. The code uses nested array maps to produce chaotic, semi-transparent forms atop the religious figure, with each polygon's fill color and rotation driven by random values. The static, overlapping geometry creates an abstract, colorful reinterpretation of the original black-and-white vector artwork.