Swapna1915

@Swapna1915·63 public vizzes

Fork of ICE 8 - Family Tree

This example shows a hierarchical tree of mobile phone brands, styled as a family tree with colored nodes and labeled connections. It uses D3 v5’s `d3.stratify` to convert flat parent-child data into a hierarchy, then `d3.tree` to compute node positions. The SVG renders circles for nodes, curved paths for links, and text labels, with node colors determined by depth level. The embedded YouTube video likely documents the original ICE 8 project, though the code itself runs independently.

Jul 26, 2023

Loading thumbnail…

Vega-Lite API Scatter Plot

This example displays a scatter plot of product brands against their costs, with tooltips revealing product names and size and opacity encoding additional data dimensions. Built with the Vega-Lite API, it uses the `vl` wrapper to define the visualization, registering Vega and Vega-Lite under the hood. The code loads D3 via UNPKG, fetches CSV data using `d3.csv`, and renders the chart as an SVG. The visualization integrates a custom tooltip handler and a configuration object that adjusts tick colors, font sizes, and removes axis domain lines for a cleaner appearance.

Jul 26, 2023

Loading thumbnail…

line chart

This line chart shows total mobile brand sales over time from 2013 to 2021, using a red stroke to trace the trend across dated points. The visualization loads CSV data from a GitHub gist, parses dates with `d3.timeParse`, and applies `d3.scaleTime` and `d3.scaleLinear` for the axes. It uses `d3.axisBottom` and `d3.axisLeft` with gridlines, and renders the line via `d3.line` into an SVG. The axes include rotated labels, and the chart is styled with custom CSS for tick colors and fonts.

Jul 26, 2023

Loading thumbnail…

brand sales for area chart

This area chart displays total mobile brand sales from 2013 to 2021, with dates on the x-axis and sales totals on the y-axis. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to generate a smooth path within an SVG. The data is loaded from a remote CSV file via `csv()`, and date strings are parsed using `d3.timeParse`. Grid lines extend across the plot area from tick marks, with blue axis labels for clarity.

Jul 26, 2023

Loading thumbnail…

Line Chart Representation for brands and their ratings

This visualization displays brand ratings over time using a filled area chart with curved interpolation. The x-axis represents rating values across a time scale, while the y-axis maps numeric brand identifiers, with both axes formatted as gridlines. Built with D3 v5, the code uses `d3.csv` to load external data, `d3.scaleTime` and `d3.scaleLinear` for scales, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.area` with `d3.curveBasis` to generate the smooth filled path. The SVG renders with labeled axes and a title.

Jul 26, 2023

Loading thumbnail…

Pie Chart for top brands and their prices

A pie chart displays the relative prices of top brands, with each slice labeled by its price in thousands and a corresponding legend listing brand names and values. The chart uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate segments and assign colors, while `d3.csv` loads the dataset from a GitHub Gist. Text labels are positioned via `arc.centroid`, and the SVG renders the chart and legend interactively.

Jul 26, 2023

Loading thumbnail…

Mobiles brand Rating

This chart displays the distribution of mobile phone ratings for six brands, showing the percentage of reviews falling into five rating categories from "below 5.0" to "above 8.5". Each brand is represented as a horizontal stacked bar, with colored segments corresponding to each rating band. The visualization uses D3.js v7 with an SVG rendering approach, employing `d3.stack` to create stacked data, `d3.scaleLinear` for the percentage axis, and `d3.scaleBand` for the categorical brand axis. Interactive tooltips display exact percentages on hover, with the data loaded from a local CSV file.

Jul 26, 2023

Loading thumbnail…

linechart

This line chart displays the relationship between ratings and total reviews, with the rating plotted on the x-axis and the total reviews on the y-axis. Built with D3 v7, it uses `d3.csv` to load the data, `d3.scaleBand` for the x-axis, and `d3.axisBottom` and `d3.axisLeft` to render the axes. The line is drawn using `d3.line` with green strokes and is rendered as an SVG path within a 960x400 chart area, complete with red axis labels.

Jul 26, 2023

Loading thumbnail…

Fork of Making a Bar Chart

This example displays a horizontal bar chart of brand ratings from a CSV dataset, with each bar’s length proportional to the rating value. It uses D3 v5’s `scaleLinear` and `scaleBand` for positioning, along with `axisLeft` and `axisBottom` for axes. The SVG is rendered via D3 selections, with margins and labels for the axes. Data is loaded asynchronously with `csv`, and ratings are converted to numbers before rendering. The chart highlights brand comparison, with blue bars and a clean layout.

Jul 26, 2023

Loading thumbnail…

Fork of Making a Bar Chart

This chart displays the population of the world’s ten most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It uses a horizontal bar chart layout, with each bar’s length proportional to population in thousands. The visualization is built with d3.v5, leveraging d3.csv to load the data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom for axes. Bars are rendered as SVG rectangles, with the axis line and ticks removed for a cleaner presentation.

Jul 25, 2023

Loading thumbnail…

Fork of Stylized Bar Chart

This example displays the top 10 most populated countries as horizontal bars, sorted by population density. The visualization uses React for component structure and D3 v5 scales (scaleBand, scaleLinear) to map data values to screen coordinates. The SVG rendering relies on D3’s max, format, and CSV parsing utilities to load and prepare the data from an Amazon products dataset. Tooltips appear on hover via native SVG title elements, while axis ticks and labels are styled with CSS classes.

Jul 25, 2023

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart visualizes the ratings of various mobile phone brands, including Motorola, Nokia, Samsung, HUAWEI, Apple, and Sony. It shows the distribution of numeric rating values across brands using horizontal bars, with the highest rating value determining the linear scale domain. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG chart, with data loaded from a CSV file. The chart also customizes the axes by removing default domain lines and adding an axis label for the brands.

Jul 25, 2023

Loading thumbnail…

Barchart

This bar chart displays the distribution of brand ratings from a CSV dataset, with each bar’s length representing the rating value and brands ordered along the vertical axis. Using d3.csv to load the data, d3.scaleLinear and d3.scaleBand map ratings and brands to screen coordinates, while d3.axisLeft and d3.axisBottom render the axes. The SVG rectangles are appended and sized via the scales, with a fixed margin and teal fill defined in CSS.

Jul 25, 2023

Loading thumbnail…

World Map

This world map uses D3 v5 to render country boundaries as SVG paths. The code imports `geoEquirectangular`, `geoPath`, and `zoom` from D3, plus the `feature` function from TopoJSON, and loads country data from the world-atlas package. Countries are filled in pink with black borders and turn green on hover, while the underlying sphere is teal. The map also supports zooming through D3's zoom behavior.

Jul 21, 2023

Loading thumbnail…

USA Country Map

This example displays a choropleth-style map of the 50 U.S. states, with each state filled in sky blue and separated by black borders. The visualization shows the geographic boundaries of the states, and hovering over a state highlights it in a warm orange color. The map is rendered as an SVG using React, with D3’s `d3.geoPath` and the `geoAlbersUsaTerritories` projection to convert TopoJSON data from the `us-atlas` package into drawable paths. The geometric data is loaded via `d3.json`, and state boundaries are computed using TopoJSON’s `feature` and `mesh` functions.

Jul 21, 2023

Loading thumbnail…

Worldmap

This example displays a map of South Korea using a Mercator projection fitted to the country’s geographic bounds. It loads world country boundaries from a TopoJSON file via `d3.json`, extracts the South Korea feature with `topojson.feature`, and renders it as an SVG path using `d3.geoPath`. The visualization also demonstrates VizHub’s ES6 module imports and D3 loading through UNPKG.

Jul 21, 2023

Loading thumbnail…

Social Network Graph

This social network graph visualizes friendships among eight people, with nodes representing individuals and arrows indicating directed connections. The graph uses a force-directed layout via `d3.forceSimulation` with link, charge, collision, and center forces to position nodes dynamically. Rendering as SVG, the code assigns green circles, labels each node, and decorates links with arrow markers. Hovering over a node highlights it via CSS class changes, and users can drag nodes to rearrange the network, with link thickness reflecting a numeric value from the JSON data source.

Jul 20, 2023

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

This example visualizes a social network graph, showing friendships among eight people with red circular nodes and directed black links. It uses force simulation via `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to position nodes, while dragging is enabled through `d3.drag`. The SVG renders from JSON data containing nodes and links with relationship attributes. Hovering a node triggers the CSS class `nodeHover`, which thickens the node’s green stroke.

Jul 20, 2023

Loading thumbnail…

Network Graph

This network graph visualizes social connections between friends, with nodes representing individuals and links showing relationships where thicker lines indicate stronger ties. The visualization uses a D3.js force simulation (d3.forceSimulation, d3.forceLink, d3.forceManyBody) to position nodes and manage collisions, while drag interactions allow users to manually reposition nodes. Data is loaded from a local graph.json file, and the SVG rendering includes green arrow markers on links, color-coded nodes, and hover effects that highlight selected connections.

Jul 20, 2023

Loading thumbnail…

Tree Example with worlds and their countries

This interactive tree diagram displays a hierarchical view of the world’s continents and selected countries, with nodes that expand and collapse on click. Built with React and D3.js (v3), it uses `d3.layout.tree` for positioning and `d3.svg.diagonal` for curved links, all rendered as animated SVG transitions. The visualization starts with a root node for “world” and branches into continents like Asia, Europe, and Africa, with Asia further detailed into subregions and specific countries such as India, Austria, and Belgium. Node colors and stroke styles are defined via CSS classes.

Jul 20, 2023

Loading thumbnail…

Tree Map for countries and states

This example presents a tree diagram mapping countries to their respective states, using a hierarchical dataset structured with parent-child relationships. The visualization uses D3 v5’s `d3.stratify` to convert the flat data into a hierarchy, then applies `d3.tree()` to compute the layout. Nodes are rendered as circles colored by depth (purple, dark red, and magenta), connected by red cubic Bézier curves, with labels placed next to each node. The implementation is based on code adapted from a Crypters Infotech tutorial.

Jul 20, 2023

Loading thumbnail…

Reuablescatterplot

This interactive scatterplot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. Users select which numerical attributes to compare via two dropdown menus, which re-render the chart. Built with D3 v5, the visualization uses `scaleLinear`, `axisLeft`, `axisBottom`, and animated circle transitions. SVG rendering displays data points for attributes like horsepower, weight, and acceleration, with labeled axes and gridlines. The code structures reusable dropdown and scatterplot components, enabling dynamic exploration of relationships between any two selected data columns.

Jul 20, 2023

Loading thumbnail…

Bubble Chart Creation

A bubble chart compares beverage manufacturers by plotting glucose levels on the x-axis against ratings on the y-axis, with bubble size encoding calories and color distinguishing beverage types. The visualization uses D3 v7 to load CSV data, apply linear scales for axes and bubble radius, and an ordinal color scale with `d3.schemeSet1`. SVG circles are rendered with opacity and red strokes, accompanied by legends for calorie size and brand colors.

Jul 20, 2023

Loading thumbnail…

Vehicle Scatterplot

This scatterplot visualizes the relationship between vehicle horsepower and weight, using red axis labels to highlight each variable. The visualization loads CSV data from a GitHub gist and uses D3 v5's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to map the data points. Each vehicle is rendered as a semi-transparent lime circle on an SVG canvas, with gridlines extending from both axes for easier comparison. The chart includes a title and custom tick styling defined in a separate stylesheet.

Jul 20, 2023

Loading thumbnail…

Stacked Bar Chart Creation

This example shows a stacked bar chart of tourist counts by region across years, using a color-encoded legend and tooltips for interactivity. The visualization is built programmatically with the Vega-Lite API (`vl.markBar`, `vl.x`, `vl.y`, `vl.color`, `vl.tooltip`), which is registered with Vega and Vega-Lite via `vl.register`. Data is loaded asynchronously from a CSV file using D3's `csv` function, and the chart is rendered as an SVG within the body of the page. Appearance is customized through a config object that sets axis, tick, and label colors.

Jul 19, 2023

Loading thumbnail…

Untitled

This example shows a bar chart of XYZ Foods stock prices from 2011 to 2020, with pink bars and axes labeled in dollars. It uses D3 v4 (loaded via UNPKG) with SVG rendering, a band scale for years, and a linear scale for values, decorated with axis labels and a title. The code loads data from a CSV file and demonstrates local ES6 module imports.

Jul 19, 2023

Loading thumbnail…

Barchart

This bar chart visualizes the yearly stock prices of XYZ Foods from 2011 to 2020, loaded from a local CSV file. It uses D3 v4 to create an SVG with pink bars, positioning them with a band scale and a linear scale. The chart includes labeled axes with a rotated y-axis title and currency-formatted ticks, plus custom CSS styling.

Jul 19, 2023

Loading thumbnail…

world map

This example visualizes the country of South Korea as a shaded map on a blank SVG canvas. It loads geographic data from the world-atlas TopoJSON dataset and uses the `topojson.feature` method to extract the country’s geometry. A `d3.geoMercator` projection fits the map to a 960×500 viewport via `fitSize`, and `d3.geoPath` renders the resulting polygon as a single dark path. The code demonstrates both external library imports via script tags and the basic D3 data-join pattern for drawing SVG shapes.

Jul 19, 2023

Loading thumbnail…

Tree Map Representation

This tree map shows a hierarchy of movie genres and example titles, with nodes represented as colored circles and connections drawn as straight lines. The visualization uses D3 v6’s `d3.stratify` to convert the flat parent-child dataset into a hierarchy and `d3.tree` to compute the layout, which aligns nodes at the same depth vertically. Circles are color-coded by generation level (root, genre, and title) and animate their radius and link paths on load via `.transition().duration()`. The SVG is rendered with a centered HTML heading and black strokes on the circles.

Jul 17, 2023

Loading thumbnail…

Familytree

A family tree diagram visualizes hierarchical relationships among named nodes, with generations distinguished by color (yellow, pink, skyblue, orange). The example uses D3 v6’s `d3.stratify()` to build the hierarchy from flat parent-child data, then `d3.tree()` to compute node positions. SVG circles and text labels render each entry, while paths between nodes animate in with `transition()`, drawing lime-colored connections over one second.

Jul 17, 2023

Loading thumbnail…

Familytree

This example displays a family tree as a static SVG with animated, color-coded generations. It uses `d3.stratify()` to build the tree structure from parent-child links, `d3.tree()` to compute layout positions, and D3 transitions to animate the drawing of lime-green paths and the appearance of circles. The data is a hard-coded array of family relationships. Node and edge styling is applied through SVG attributes, with node fill colors assigned by generation depth and black text labels added directly to the SVG.

Jul 17, 2023

Loading thumbnail…

Fork of Family Tree

A fork of a family tree displays the hierarchy of blood types, from the root "BloodGroup" through the four main groups (A, B, AB, O) down to their positive and negative variants. The visualization uses an animated SVG tree layout, with circles connected by transitioning paths that grow from each parent node to its children. The code relies on D3 v6's `d3.stratify()` to convert flat data into a hierarchy, `d3.tree()` for layout, and `transition().duration()` to animate the link paths. Circle fill colors are assigned by generation depth, and each node is labeled with white, bold text.

Jul 17, 2023

Loading thumbnail…

Treemaps

This treemap visualizes a hierarchy of movie genres and individual film titles, with color-coded circles representing different generations of the data. The dataset defines a root "MovieGroup" with subcategories like Action, Romantic, and Mythology, each containing specific movies. Built with d3.stratify and d3.tree, the visualization uses SVG elements, including animated paths for connections and circles that transition to a fixed radius. Text labels display the names of each genre and movie, rendered in bold white text over the circles.

Jul 17, 2023

Loading thumbnail…

Fork of Scatter plot with menus

This interactive scatterplot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying relationships between different car attributes. Users can choose which two numeric columns to compare using dropdown menus built with the custom `dropdownmenu` function. The D3 v5 code uses `scaleLinear`, `axisBottom`, and `axisLeft` to render the plot, with animated circle transitions via `transition().duration(1000)`. Data is loaded with `csv`, and all numeric fields are converted to numbers before plotting.

Jul 17, 2023

Loading thumbnail…

Fork of Scatterplot with menus

This interactive scatterplot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying relationships between car attributes like horsepower and weight. Users select different columns for both the x and y axes from dropdown menus, triggering animated transitions where circles move to new positions. The visualization uses d3.csv for data loading, d3.scaleLinear for scaling, d3.axisBottom and d3.axisLeft for axes, and d3.transition with delays to animate the scatterplot points rendered as SVG circles.

Jul 17, 2023

Loading thumbnail…

Reusable scatterplot

This interactive scatterplot compares pairs of attributes from the UCI Auto MPG dataset, letting users select any two columns from the uploaded CSV to plot against each other via dropdown menus. Built with D3 v5, the visualization uses `scaleLinear` and `extent` for axes, plus `axisLeft` and `axisBottom` for ticks. Points animate into place with staggered transitions, while the reusable `scatterPlot` and `dropdownmenu` modules manage the SVG rendering and menu selection. Data is parsed from a remote CSV file, with numeric columns coerced to numbers.

Jul 17, 2023

Loading thumbnail…

Bubble Chart

This bubble chart compares beverage types (sprite, pepsi, maaza, thumsup, fanta, coke, dew) across three quantitative variables: glucose (x-axis), rating (y-axis), and calorie content (bubble size). Color encodes beverage type. The visualization is rendered as an SVG using d3.v7, loading data from a CSV file. It employs d3.scaleLinear for axes and bubble sizing, d3.scaleOrdinal with d3.schemeSet1 for colors, and includes custom legends for both size and color.

Jul 17, 2023

Loading thumbnail…

Bubble Chart

This bubble chart compares beverage types by rating, glucose, and calorie content using d3.csv to load the data and d3.scaleLinear for the x, y, and bubble-size scales. It renders SVG circles with d3.schemeSet1 for color encoding by beverage brand, and includes manual legends for calorie size and brand colors. The code uses d3.axisBottom and d3.axisLeft for the axes.

Jul 17, 2023

Loading thumbnail…

Untitled

A stacked bar chart displays earthquake magnitudes across U.S. states for selectable years, with each bar segmented by magnitude range (7.0+, 6–6.9, 5–5.9) and annotated with the total count. Users choose a year from a dropdown menu, triggering a 750ms transition that updates bar positions, heights, and axis scales. The visualization uses D3 v5, leveraging `d3.csv` for data loading, `d3.stack` for layering, `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG transitions to animate changes.

Jul 17, 2023

Loading thumbnail…

Untitled

This bar chart displays XYZ Foods stock prices from 2011 to 2020, with dollar values on the y-axis and years on the x-axis. It is built with D3 v4, rendering as SVG. The visualization uses `d3.scaleLinear` for the value axis, `d3.scaleBand` for the categorical year axis, and `d3.axisBottom` and `d3.axisLeft` for tick marks. Data is loaded from the local `data.csv` file, with bars styled in steelblue via CSS.

Jul 16, 2023

Loading thumbnail…

IMDb Movie ratings

This stacked bar chart shows the distribution of IMDb ratings across five score categories for six movie genres using percentage shares. The chart uses D3 v7 with SVG rendering, applying `d3.stack()` to process the CSV data and `d3.scaleOrdinal()` for color mapping. Hovering over any segment reveals a tooltip with the exact rating percentage, while the legend identifies each rating band, and axes display the percentage scale.

Jul 13, 2023

Loading thumbnail…

Car price

This example displays the distribution of movie ratings (below 5.0, 5.0-6.5, etc.) as a horizontal stacked bar chart across different genres. Each bar segment represents the percentage of ratings for that genre, with interactive tooltips revealing exact values on hover. The visualization is built using D3.js v7, leveraging `d3.stack`, `d3.scaleOrdinal`, and `d3.axisBottom` to process and render the data from a local CSV file. Color-coded legends identify each rating category, and the chart is rendered as SVG within a fixed canvas.

Jul 13, 2023

Loading thumbnail…

Activity 7

This bar chart displays the top 10 items from a diamonds prices dataset, plotting each item's title against its release year on a linear scale. The visualization uses React with D3 v5 scaleLinear and scaleBand to position SVG rectangles, with axis components rendering tick marks and labels. Data loads asynchronously via d3.csv from a GitHub-hosted CSV file, and the chart includes hover tooltips using SVG title elements. The x-axis labels are formatted with d3.format, while the y-axis shows categorical values with a light green mark color.

Jul 13, 2023

Loading thumbnail…

Activity 7

This horizontal bar chart displays the population of ten countries in 2020, with bars extending from left to right in descending order. Built with React and D3 v5, it uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and renders SVG rectangles. Country names appear on the y-axis, while population values are formatted in SI units (e.g., "1.2B") on the x-axis. Data loads asynchronously from a CSV file and displays a "Loading..." message until ready.

Jul 10, 2023

Loading thumbnail…

MuscleCars tree

This example presents a hierarchical tree visualization of Muscle Cars, showing the relationships between brands like Ford and Dodge and their models such as Mustang and Charger. The tree is rendered as an SVG with rectangular nodes, colored by type level, and connected by labeled links with directional arrows. The visualization uses the D3.js v3 layout API (`d3.layout.tree`) and includes interactive features like zooming, dragging, and node click-to-collapse. Data is loaded from a local JSON file, and animation transitions are applied when the tree updates.

Jul 5, 2023

Loading thumbnail…

Activity 8 Country

This example displays a map of Russia using geographic data from the world-atlas TopoJSON dataset. It uses D3 v5 and the topojson-client library to extract the Russia geometry, then applies a Mercator projection with `d3.geoMercator` and `fitSize` to center the country within a 960×500 SVG canvas. The map is rendered as a single SVG path via `d3.geoPath`, with no additional styling or interactivity.

Jul 5, 2023

Loading thumbnail…

Untitled

This example demonstrates the basic setup of a D3.js version 6 project, displaying the text "Hello VizHub!" prominently in the center of the page. The visualization uses the D3 `select` API to target the HTML element with the ID `message` and sets its text content to a string imported from a local ES6 module. The styling is handled via a separate CSS file, which sizes the text at 12em, while the JavaScript imports the `select` function directly from the 'd3' package.

Jul 5, 2023

Loading thumbnail…

Area Chart Activity 8

This area chart displays the cost of sales from 2000 to 2013. The visualization uses D3 v5 to load CSV data and render an SVG with smoothed lines and a filled area beneath the curve. It employs `scaleTime` and `scaleLinear` for axes, `area` and `line` generators with `curveBasis`, and custom tick formatting via `format`. The chart includes labeled axes, gridlines, and a styled title.

Jul 5, 2023

Loading thumbnail…

Pie Chart

This pie chart visualizes the distribution of students across university majors, highlighting each segment’s count both inside the slice and in an accompanying legend. The visualization is built with D3 v5, using `d3.arc()` to generate the pie segments and `d3.scaleOrdinal` for categorical colors. Data is loaded asynchronously from a CSV via `d3.csv()`, and SVG elements are created and positioned with `select` and `attr`. The chart uses a red title and custom styling for ticks and text, presenting a clear, colorful overview of enrollment data.

Jul 5, 2023

Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot visualizes the Iris flower dataset, with points colored by species (setosa, versicolor, virginica). The code uses D3 v6 modules including `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` loading from a GitHub gist. An animated interval cycles through four different attribute pairings on the x-axis while the y-axis remains fixed, with the scatter plot rendered as SVG circles. The example demonstrates a reusable scatter plot function defined as an ES6 module, alongside manual point rendering and custom legend elements.

Jul 5, 2023

Loading thumbnail…

Fork of Activity 7

This example shows a horizontal bar chart comparing the 2020 estimated populations of 20 countries, with each bar’s length encoded by population value and labeled along the left axis. The visualization is built with React and D3 v5, using `scaleBand` for the categorical country axis, `scaleLinear` for the population scale, and `format('.2s')` to abbreviate tick labels (e.g., “B” for billions). Data is loaded as CSV via `csv()` from a remote GitHub URL, with numeric values multiplied by 1000, and rendered as SVG `<rect>` elements with tooltips.

Jul 5, 2023

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, plotting petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica) using red, skyblue, or pink fills. The SVG rendering uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select` to map the data, with circular marks sized at a fixed radius. Data is loaded from a remote CSV URL via `d3.csv`, and the axes are labeled with petal and sepal dimensions.

Jul 3, 2023

Loading thumbnail…

Bubble chart

This bubble chart displays the correlation between average horsepower, torque, and highway MPG across different car makes. Each circle's x-position maps to horsepower, its y-position to torque, and its size represents highway MPG, while color encodes the vehicle manufacturer. The visualization uses D3.js v7 with SVG rendering and includes interactive tooltips that appear on mouseover, showing the car make. A legend explains the bubble size scale for highway MPG values, and data is loaded from a local CSV file using `d3.csv`.

Jul 3, 2023

Loading thumbnail…

Bubble chart

A bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for car makes, with bubble size encoding MPG and color distinguishing brands. It uses D3 v7 to load CSV data, render SVG axes and circles, and includes interactive tooltips on hover. A legend maps bubble sizes and colors to MPG values and make names, while animated transitions enhance the tooltip interactions.

Jul 3, 2023

Loading thumbnail…

Activity4_Task5

This example demonstrates a minimal D3.js setup that renders a static message on a webpage. It shows how to load D3 v5 via UNPKG, import the `select` API function, and use an ES6 module for a local string constant. The code selects a `div` element by its ID and sets its text content to "Hello VizHub!", with the text styled using a CSS rule. The visualization relies on D3’s DOM selection method rather than any data binding or scales.

Jul 3, 2023

Loading thumbnail…

Fork of Scatter Plot with Shape

This scatter plot visualizes the Iris dataset, mapping sepal length and petal length on the x- and y-axes. Each point’s shape encodes the flower species, with a legend explaining the symbol mapping. Built with D3 v7, it uses `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbolsFill` to render marks, while custom modules handle axes and an interactive shape legend.

Jul 3, 2023

Loading thumbnail…

Activity 6

This example uses D3 v5 to display a large, static SVG image with a checkerboard pattern of colorful rectangles. The code imports the `select` function from D3 and a local ES6 module to set the text of a message element. It demonstrates basic D3 selection and text manipulation within an SVG rendering, using a pre-defined image pattern from an embedded XML namespace. The visualization is minimal, focusing on module imports and D3’s DOM selection API rather than dynamic data.

Jun 26, 2023

Loading thumbnail…

Transforming Data

This example demonstrates the power of D3’s data transformation APIs by loading the classic Iris dataset from a local CSV. Using `d3.flatRollup` and `d3.sum`, it groups the records by species to compute the average sepal length, then renders the aggregated results as JSON text in a `<pre>` element. The visualization also highlights asynchronous data loading with `fetch` and `d3.csvParse`, alongside ES6 module imports. The output is a clear, tabular summary of the transformed data, showcasing D3 v7’s streamlining of grouping and aggregation workflows.

Jun 14, 2023

Loading thumbnail…

Histograms

A scatterplot-like histogram visualizes average Body Mass Index by age, using binned rectangles to group individuals and display the mean BMI per age bracket. The chart loads CSV health data from GitHub and uses D3 v7 APIs including `d3.bin` for histogram generation, `d3.scaleLinear` for both axes, and `d3.axisLeft`/`d3.axisBottom` for labeled tick marks. SVG rendering applies a green fill to rectangles with white strokes, while axis labels and a title clarify the data relationship.

Jun 14, 2023

Loading thumbnail…

ActivityHelloVizhub

This example demonstrates how to set up a minimal D3.js project in VizHub, showing a centered text message. It loads D3 v5 from UNPKG and uses ES6 module imports, including `select` from the `d3` package and a local `message` constant from `myMessage.js`. The code applies the message to a `#message` div, with CSS styling controlling its centered, large font appearance.

Jun 12, 2023

Loading thumbnail…

Activity6

This example displays a static full-screen SVG visualization composed of a large embedded JPEG image loaded via a data URI, framed by a pattern-fill background. The code imports D3’s `select` function and a local ES6 module to set a text message into the DOM. It relies on D3 v5 and Vue, with a mix of SVG and WebGL rendering.

Jun 12, 2023

Loading thumbnail…

HelloVizhub

This example demonstrates how to set up a minimal D3.js visualization within VizHub, rendering the text “Hello VizHub!” in a centered, large-font message. It loads D3 v5 from a CDN and uses the `select` API from the `d3` module to target a `div` element by ID and set its text content. The project also showcases ES6 module imports, pulling a message string from a separate local file, `myMessage.js`, and linking a local stylesheet for styling.

Jun 12, 2023

Loading thumbnail…

Buddhaas

Buddhaas renders a decorative Buddha silhouette composed of hundreds of randomly positioned, rotated polygons. The image is constructed inside an SVG element using React’s map function to generate nested polygon layers. Each polygon receives random coordinates, fill colors, and a 45-degree rotation transform, creating a shimmering, colorful mosaic effect over the black background. The drawing includes a detailed path data string that outlines the Buddha figure, while the code relies on React and ReactDOM for rendering.

Jun 9, 2023