saikrishnabussa

@saikrishnabussa·55 public vizzes

Bar Graph with sub-cats with D3.js

This example shows a bar graph that groups sales data by Sub-Category, with each bar colored by its parent Category (Furniture, Office Supplies, Technology) using a D3 ordinal color scale. It loads a CSV of sample store orders and aggregates total sales per sub-category with `d3.csv`, `d3.sum`, and nested data arrays, then renders the chart as SVG rectangles with `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` for axes and labels. The code runs in a React-compatible plain HTML page using D3 v5.

Jul 27, 2023

Loading thumbnail…

Scatter Plot group4

This scatter plot visualizes the relationship between sales and profit from a sample dataset. The SVG chart is rendered using the D3.js library, specifically leveraging `d3.csv` to load data, `d3.scaleLinear` to map values, and `d3.axisBottom`/`d3.axisLeft` for the axes. Each data point is drawn as a steelblue circle with a radius of five, positioned according to its sales and profit coordinates. The chart title and axis labels are added as SVG text elements.

Jul 27, 2023

Loading thumbnail…

sales distribution (group4)

This visualization shows the distribution of sales across product categories using a pie chart, with each slice labeled by category name. The chart is rendered as an SVG in a React framework, with D3 v6 loading data from a CSV file and grouping it by the Category column using `d3.group` and `d3.sum`. The pie layout (`d3.pie`) and arc generator (`d3.arc`) create the slices, while `d3.scaleOrdinal` with `d3.schemeCategory10` assigns colors, and labels are positioned using `labelArc.centroid`.

Jul 27, 2023

Loading thumbnail…

Group4(Line Graph)

A line graph displays sales over time, plotting each order's date against its sales value. The chart uses a time-scaled x-axis and a linear y-axis, with a single steelblue path connecting the data points. Built with D3.js v6, the visualization loads CSV data and converts sales and date fields to numbers and Date objects for the scales.

Jul 27, 2023

Loading thumbnail…

Sales by Category

This bar chart compares total sales across product categories. The visualization uses aggregated sales data from a CSV file, displaying each category as a steel-blue bar. The chart is built with D3 version 5, using `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. The SVG rendering includes axis labels and a title, with the x-axis labels rotated for readability.

Jul 27, 2023

Loading thumbnail…

BMI by Age

This chart displays the average body mass index across ages as orange bars, with axes labeled for both variables. It loads CSV data from a GitHub gist, computes BMI from height and weight, and bins the ages using `d3.bin`. The visualization uses D3 v7 APIs including `scaleLinear`, `axisBottom`, `axisLeft`, and `area`, rendering SVG elements with `select` and `join` for the rectangles. Axes are customized by removing domains and adding text labels.

Jul 27, 2023

Loading thumbnail…

Activity 7

This interactive network graph visualizes a small social network of ten people and their friendship connections. Built with D3.js v6 and rendered as SVG, it uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes. Circles represent people, with arrows between them indicating directed relationships, and the link thickness reflects the friendship value stored in the graph.json data. Users can drag nodes to rearrange the layout, and hovering highlights individual circles via CSS class changes.

Jul 20, 2023

Loading thumbnail…

Activity 6

This visualization displays a hierarchical tree of muscle car manufacturers and models, starting with the root "Muscle Cars" and branching into Ford and Dodge, then into specific vehicles like Mustang, Torino, Charger, and Challenger, with further subtypes such as Hellcat and SRT. Each node is color-coded by its type, and the tree uses a collapsible layout with animated transitions on click. Built with D3 v3, the SVG-based rendering uses `d3.layout.tree` for positioning, `d3.behavior.zoom` for pan and zoom, and custom arrow markers and drop shadows defined in SVG `defs`. The data comes from a JSON file, and the implementation includes collision detection to prevent overlapping nodes.

Jul 20, 2023

Loading thumbnail…

Fork of MuscleCars tree

This visualization displays a hierarchical tree of muscle cars grouped by manufacturer, showing nodes for Ford, Dodge, and their specific models like Mustang and Charger, with color-coded node types. Built with D3 v3 and SVG, the layout uses `d3.layout.tree()` to compute node positions, while interaction includes click-to-expand/collapse nodes, zoom and drag via `d3.behavior.zoom`, and hover tooltips. The tree data is loaded from a JSON file, and animated transitions update node positions when the hierarchy changes.

Jul 20, 2023

Loading thumbnail…

Activity 8 Country

This example displays a standalone SVG map of India, rendered using a Mercator projection fitted to the country’s boundaries. It loads world country geometries from the `world-atlas` TopoJSON dataset via `d3.json`, extracts the India feature with `topojson.feature`, and draws it using `d3.geoPath`. The map is centered using `projection.fitSize` and appended to the page as a single path element.

Jul 20, 2023

Loading thumbnail…

Activity 8 Map

This example displays an interactive world map using a geographic projection, with countries rendered as colored SVG paths and a sphere background. Users can pan and zoom the map through a zoom behavior applied to the SVG element. The visualization loads GeoJSON data from the world-atlas TopoJSON dataset, using d3.geoEquirectangular and d3.geoPath for projection and path generation, and the topojson feature method to extract country boundaries. Hovering highlights individual countries by changing their fill color.

Jul 20, 2023

Loading thumbnail…

Area Chart Activity 8

This area chart visualizes the cost of sales from 2000 to 2013, using a smooth curve to show trends over time. Built with React and D3 v5, the SVG renders both a line path and a shaded area beneath it. The code uses `scaleTime`, `scaleLinear`, `line`, `area`, and `curveBasis` to generate the shapes, while `axisBottom` and `axisLeft` add labeled axes. Data comes from a CSV file, parsed with `csv`, and each year is converted to a Date object for temporal scaling.

Jul 20, 2023

Loading thumbnail…

Pie Chart

This pie chart visualizes the count of students from each major at UNT, with each slice colored and labeled with the student count in thousands. The data is loaded from a CSV file via `d3.csv`. The chart is rendered using React with D3 v5, employing `d3.pie` and `d3.arc` to generate the paths, `d3.scaleOrdinal` for colors, and SVG groups for the chart and legends.

Jul 20, 2023

Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot visualizes the Iris dataset, initially displaying petal width against sepal length. The visualization cycles through different attribute pairings every few seconds, with each species (setosa, versicolor, virginica) represented by a distinct color. Built with React and D3, it uses `select()` for SVG rendering and custom scales for axes, while a `setInterval` timer triggers re-rendering with new data mappings.

Jul 20, 2023

Loading thumbnail…

Fork of Scatter Plot with Shape

This scatter plot visualizes Iris flower measurements, mapping sepal length on the x-axis and petal length on the y-axis. Each point is shaped according to species, with a shape legend positioned on the right. The visualization is built using D3 v7, employing `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for categorical shapes, and `symbol()` to generate the point paths. Data loads asynchronously from a CSV file fetched via HTTP, parsed with `csvParse`, and rendered within a React framework using declarative joins for SVG elements.

Jul 20, 2023

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width for each sample while coloring points by species (setosa, versicolor, virginica) with distinct hues. The visualization loads CSV data via `d3.csv`, scales axes using `scaleLinear` and `extent`, and renders circles as SVG elements with `selectAll`/`join`. Axis labels and ticks are generated with `axisLeft` and `axisBottom`. The code also attaches computed sepal dimensions to each point via `rx` and `ry` attributes, though circles render with a fixed `radius`.

Jul 20, 2023

Loading thumbnail…

Activity 7

This example shows the 20 most populous countries in 2020 as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The bars are rendered as SVG rectangles using React components, with scales created via `d3.scaleBand` and `d3.scaleLinear`. Axis ticks are formatted using `d3.format` to convert values to billions. The data is loaded from a CSV file using `d3.csv`, and the chart includes tooltips via SVG `<title>` elements.

Jul 20, 2023

Loading thumbnail…

Activity8_Task3

This visualization presents the cost of sales from 2000 to 2013 using a line chart rendered as an SVG. The code loads data from a CSV file and employs D3’s scaleBand for the x-axis and scaleLinear for the y-axis, drawing the line with d3.line. The chart includes axes, labels, and a thick light-green stroke to highlight the trend over time.

Jul 20, 2023

Loading thumbnail…

Activity8_Task3

This visualization shows the cost of sales from 2000 to 2013 using a line chart rendered as an SVG. The code loads data from a CSV file using `d3.csv` and maps the cost values to numeric format. It uses `d3.scaleBand` for the year axis and `d3.scaleLinear` for the cost axis, with the line drawn using the `d3.line` path generator. Axis labels are styled in red with large font sizes, and the chart includes a light green stroke for the line.

Jul 20, 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) using D3.js. The visualization cycles through four variable pairings on the x-axis—petal width, sepal width, petal length, and sepal length—while the y-axis remains fixed on sepal length, updating via setInterval. It uses d3.scaleLinear, d3.axisLeft, and d3.axisBottom within a reusable scatterPlot function, rendering SVG circles with animations. The interface includes a title, axis labels, and a color legend, all styled with CSS.

Jul 20, 2023

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across various car makes, using colored and sized circles to represent each make. The chart is built with React and D3 v7, rendering SVG elements that animate on hover through tooltip interactions. Data from a CSV file drives the x-axis (horsepower), y-axis (torque), bubble size (MPG), and color scale via `d3.scaleOrdinal` with `d3.interpolateTurbo`. A legend maps bubble sizes to MPG values and color-coded makes.

Jul 20, 2023

Loading thumbnail…

Fork of Activity7_Task3

This example displays a static web page with the message “Hello HTML!” centered and styled with a massive 13em font size. The page is built using plain HTML and internal CSS within an `index.html` file, with no external JavaScript libraries or data processing involved. The visualization serves as a minimal demonstration of how CSS can control typography and layout, showcasing a simple text-based output within a React-based project structure.

Jul 20, 2023

Loading thumbnail…

Activity7_Task3

This example demonstrates static HTML and CSS rendering, displaying a single centered message reading “Hello HTML!” in extremely large text. The page uses no JavaScript libraries or external frameworks, relying solely on a plain HTML `<div>` element with CSS styling for typography and alignment. The code includes a minimal document structure with inline styles defining a 13em font size and center text alignment, calling no data or interactive functionality beyond the static output.

Jul 20, 2023

Loading thumbnail…

IMDb Movie ratings

This visualization presents a horizontal stacked bar chart showing the distribution of IMDb ratings across six movie genres, where each bar segment represents the proportion of movies within a rating bracket (below 5.0, 5.0–6.5, 6.5–7.5, 7.5–8.5, above 8.5). The chart uses `d3.stack()` to build the stacked structure and `d3.scaleOrdinal` for color encoding. Data comes from `data.csv` via `d3.csv()`. A hover tooltip, implemented with D3 DOM selection and event handlers, displays the exact percentage for each rating category within a genre. The SVG output is rendered using D3 v7 and React.

Jul 20, 2023

Loading thumbnail…

Activity7_Task2

A simple static web page displays the message “Hello HTML!” in a large, centered font. Built with a minimal HTML document, it uses a CSS class to set the font size and text alignment. The page contains no interactive elements or data visualization, relying solely on standard HTML and CSS for its rendering. It serves as a basic starter template for a React-based project.

Jul 20, 2023

Loading thumbnail…

Fork of Activity7_Task2

This visualization displays the text "Hello D3 version 7" centered on the page using the D3.js library, version 7. The code selects the `body` element via `d3.select` and sets its text content with `.text()`. The page includes a linked stylesheet configuration and loads D3 from a CDN, while the actual rendering logic resides in a separate `bundle.js` file. The example demonstrates a minimal setup for D3 v7, building on an earlier version 6 tutorial.

Jul 20, 2023

Loading thumbnail…

Activity7_Task2

This example displays a minimal D3 version 7 setup that renders the text “Hello D3 version 7” in the center of the page. Built on an HTML file that references the d3.v7 library from unpkg, it uses the `select` API to target the body element and the `text` method to set its content. The page’s CSS styles the body with a font-size of 13em and text-align center, producing a large, centered message. The visualization demonstrates a basic D3 workflow without any data loading or complex rendering, relying on the `bundle.js` script to execute the JavaScript logic.

Jul 20, 2023

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 version 7 setup, rendering the text “Hello D3 version 7” in the page body using the `select` method from the `d3` module. The HTML file loads D3 from a CDN and includes an external `bundle.js` script, while the CSS styles the body with 13em font size and centered text alignment. The code highlights the basic workflow of importing `select` from D3 and chaining the `.text()` method to set content, with no data source or interactive features involved.

Jul 20, 2023

Loading thumbnail…

Activity 7

This bar chart displays the 2020 population for 20 countries, with horizontal green bars sorted by country name. Built with React and D3 v5, it uses `d3.scaleBand` and `d3.scaleLinear` for axes, and formats tick labels with `d3.format`. Data is loaded from a remote CSV via `d3.csv`, and SVG rectangles render each mark with a tooltip.

Jul 19, 2023

Loading thumbnail…

USA Map

This interactive map of the United States uses a linear color scale to visualize state-level data values, with states shaded from light blue to dark blue based on their associated values. The visualization loads CSV data containing state IDs and their corresponding quantitative values, then merges this with US state boundaries from a GeoJSON source. Built with D3 v6 and React, the map renders as an SVG using the `d3.geoPath` generator to draw state outlines, while the `topojson.feature` API extracts state features from the geographic data. States without matching CSV entries appear in gray.

Jul 18, 2023

Loading thumbnail…

World Map Visualization

This example displays a choropleth world map where countries are colored by population using a blue sequential color scale. The visualization loads geographic boundaries from Natural Earth GeoJSON and joins them with population data from a CSV file. It leverages D3 v6 APIs including `d3.csv`, `d3.json`, `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.scaleQuantize` with `d3.schemeBlues`. Countries without matching data appear black, while the SVG rendering uses a 800x500 viewport.

Jul 18, 2023

Loading thumbnail…

Social Network Graph

This social network graph visualizes 19 nodes connected by 14 links, with each node colored by its assigned group using D3's `d3.scaleOrdinal` and `d3.schemeCategory10`. The nodes and links are rendered as SVG circles and lines, with node labels displayed via text elements. The layout is computed dynamically using `d3.forceSimulation`, combining `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position the network. As the simulation runs, each tick updates the coordinates of the circles, lines, and labels within the SVG container.

Jul 17, 2023

Loading thumbnail…

Untitled

This example visualizes a small social network of five people, showing how individuals like Alice and Charlie connect through direct relationships. The rendering uses NetworkX and Matplotlib to create the graph, with nodes drawn as light blue circles and labels displayed inside them. The `nx.Graph` object stores the nodes and edges, while `nx.draw` handles positioning and visual output, resulting in a static diagram of connected names. The data consists of hardcoded person names and their pairwise relationships.

Jul 17, 2023

Loading thumbnail…

Three-Layer Tree Visualization

This visualization displays a hierarchical tree with three labeled layers beneath a root node, covering categories like Animals, Vehicles, Countries, and Continents. It uses a left-to-right layout implemented with D3.js v7, employing `d3.tree` and `d3.hierarchy` to compute node positions. The SVG rendering draws gray curved links via `d3.linkHorizontal`, while circular nodes are color-coded by depth—red for the root, blue, green, and orange for subsequent levels—with text labels positioned based on whether each node has children. The interactive hover tooltips show each node’s name.

Jul 17, 2023

Loading thumbnail…

Untitled

This example presents a static scatter plot that visualizes the relationship between engine horsepower and fuel efficiency (MPG) for a small set of car brands, including Ford and BMW. Built with React and D3.js (v7), the SVG visualization uses `d3.scaleLinear` to map data to axes and `d3.schemeCategory10` for color coding, with a legend identifying each brand. Mouse interactions trigger a tooltip that displays the brand, horsepower, and MPG values. The chart includes labeled axes and a title, all rendered through SVG elements.

Jul 17, 2023

Loading thumbnail…

Bubble Chart with D3.js

This example visualizes a static bubble chart of fruit data, mapping each fruit’s x and y coordinates to scaled positions and its radius to a scaled circle size. It renders circles as steel-blue SVG elements with white fruit labels overlaid at each point’s center. The chart includes linear scales (`d3.scaleLinear`) for positioning and sizing, along with a title, axis labels, and `d3.axisBottom` and `d3.axisLeft` for the axes. The code uses D3.js v7 to append SVG circles and text directly to the DOM.

Jul 17, 2023

Loading thumbnail…

Stacked Bar Chart with D3.js

This stacked bar chart visualizes monthly sales data for ten products, with each bar segmented by month. The example uses D3.js v7 to generate random data, render SVG rectangles for the bars, and apply `d3.scaleBand` and `d3.scaleLinear` for positioning. Color encoding via `d3.scaleOrdinal` with `d3.schemeCategory10` distinguishes months, while axes, labels, and a legend are added using `d3.axisBottom` and `d3.axisLeft`.

Jul 17, 2023

Loading thumbnail…

Activity 7

This bar chart displays population figures for 20 countries in 2020, using horizontal bars sorted by country name. The visualization loads CSV data from a GitHub gist, parses the population values, and renders SVG rectangles scaled by a d3.scaleLinear x-axis with a d3.scaleBand y-axis. Custom React components for axes and marks handle ticks and tooltips, while formatting converts raw values to billions using d3.format.

Jul 17, 2023

Loading thumbnail…

Activity 7

This example demonstrates how to build a simple D3.js application that displays a custom message in the browser. It shows a single text element, "Hello VizHub!", centered on the page using CSS styling, and serves as a minimal template for setting up a VizHub project. The code loads D3 v5 from a CDN and uses the `select` API to target a div element by ID, setting its text content from a locally imported ES6 module. The example highlights basic module imports, DOM manipulation, and integration of external libraries.

Jul 17, 2023

Loading thumbnail…

Stacked Bar Graph with D3.js

This stacked bar graph visualizes yearly sales, expenses, and profit data from 2015 through 2033 using D3.js v7. The chart employs `d3.stack()` to layer the three categories, with `d3.scaleBand()` for the x-axis and `d3.scaleLinear()` for the y-axis. Each bar segment is rendered as an SVG `rect`, colored via `d3.scaleOrdinal()`, with axes generated by `d3.axisBottom()` and `d3.axisLeft()`. The data is embedded as CSV strings, parsed with `d3.csvParse()`, and displayed within a React framework using SVG rendering.

Jul 17, 2023

Loading thumbnail…

Scatter Plot

This scatter plot displays department scores across ten categories, with each circle’s position encoding its value on a linear y-axis and a categorical x-axis. The visualization uses a band scale for departments and a linear scale for scores, rendering circles as SVG elements. It relies on D3 v6’s `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs, with the data hardcoded as an array of department–score pairs. Axis labels are rotated for readability, and the chart includes a title and styled axes.

Jul 17, 2023

Loading thumbnail…

Scatter Plot

Jul 17, 2023

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays visitor counts for five countries across the years 1995–2000 from the CSV file dataQ2.csv. The chart uses D3 v7 within an HTML page, rendering SVG rectangles positioned by a band scale on the x-axis and a linear scale on the y-axis. Each bar is colored by country using a categorical color scheme, with a legend added to distinguish series. The chart orders bars by year and stacks them side by side rather than accumulating values, revealing per-country trends over time.

Jul 17, 2023

Loading thumbnail…

Tourism Stacked Bar Chart

This example shows a stacked bar chart of tourist visitor numbers by year, with each bar segment representing a different country’s contribution. The chart uses D3 v7 to load CSV data via `d3.csv`, then renders an SVG with `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `scaleOrdinal` with `schemeCategory10` for colors. Bars are constructed by grouping data per year and stacking segments for each country. The visualization includes axes labels, a title, and a legend, with the y-axis measuring visitors and the x-axis showing years from 1995.

Jul 17, 2023

Loading thumbnail…

Handloom Business Bar Chart

This bar chart visualizes handloom business sales figures for different regions, using a dataset that includes year, region, segment, and sales columns. Each region’s total sales is represented as a vertical steelblue bar. The visualization is built with D3.js v7 within a React environment, rendering to an SVG canvas. The chart employs `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis, with axes drawn using `d3.axisBottom` and `d3.axisLeft`.

Jul 16, 2023

Loading thumbnail…

Bar Chart with D3.js

This bar chart visualizes shopping methods by gender, displaying the percentage of males and females who shop Online, In-store, and Mobile. The chart uses stacked bars with different colors for each gender category, alongside a legend and labeled axes. Built with React and D3.js v6, it relies on `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the percentage y-axis, and `d3.axisBottom` and `d3.axisLeft` for ticks. The data is hardcoded as an array of objects, rendered as SVG elements within a 600x400 viewport.

Jul 14, 2023

Loading thumbnail…

Bar Chart with D3.js

This bar chart visualizes the relationship between five named categories and their numeric values using D3.js v6. The visualization renders as an SVG with steelblue rectangular bars, a chart title, and no axis labels drawn. The code demonstrates D3’s `scaleBand` and `scaleLinear` for positioning and sizing bars, along with data binding via `selectAll` and `enter`. The input data is a hardcoded JavaScript array containing category-value pairs, and the chart is embedded in a basic HTML page without a framework.

Jul 14, 2023

Loading thumbnail…

Transforming Data

This example demonstrates a data transformation pipeline using D3.js v7. It loads the classic Iris dataset from a CSV file, parses it with D3's `csvParse` function, then computes the average sepal length grouped by species using `flatRollup` and `sum`. The resulting summary is displayed as formatted JSON text in a `<pre>` element. It showcases how D3's functional API can be used for data aggregation and transformation, with the visualization updating asynchronously via a state management pattern and local ES6 module imports.

Jul 10, 2023

Loading thumbnail…

activity 6

This example demonstrates how D3.js can be used to update the text content of an HTML element. It imports the `select` function from D3 and a custom ES6 module, then applies the module’s exported message string to a div with the ID `message`. The visualization loads D3 v5 from a CDN via UNPKG and styles the text using CSS, resulting in a centered, large-font display of the message "Hello VizHub!".

Jul 10, 2023

Loading thumbnail…

Activity 6

This example demonstrates CSV data loading and display using D3 v5 within a Vue application. It fetches a remote CSV file from a GitHub gist, converts the data to JSON, and renders the first ten rows into a styled HTML `<pre>` element. The code uses D3’s `csv` and `csvFormat` functions, along with DOM selection via `select` from the `d3` module. The page also embeds a large SVG background image, though the primary focus is the textual data output.

Jul 10, 2023

Loading thumbnail…

My Webpage

This example presents a personal webpage for Sai Krishna Bussa, featuring an embedded SVG logo, navigation, and an automatically generated table of car sales data. It demonstrates how HTML, CSS, and JavaScript work together in a React-less setup. The page loads a CSV file from a GitHub gist using D3 v5’s `d3.csv` method, then dynamically constructs the table by inserting header cells (`th`) and data cells (`td`) into the DOM. The SVG logo and styling are defined inline within the HTML and external `styles.css`.

Jun 30, 2023

Loading thumbnail…

My Webpage

This personal webpage presents a survey of scientific data visualization through custom HTML, CSS, and JavaScript, featuring an embedded SVG illustration and a data table. The page displays a CSV dataset rendered as an HTML table, with JavaScript calculating and displaying column sums, averages, and overall summary statistics. The interface includes a header, navigation menu, and footer, styled through an external stylesheet. The SVG logo and data summary demonstrate basic web technologies for presenting structured information, using native JavaScript functions for parsing and computation rather than external libraries.

Jun 29, 2023

Loading thumbnail…

My Webpage

This webpage displays a personal profile for a data science student, featuring an embedded SVG star emblem with text and a table of car sales data fetched from a GitHub gist. The page uses React and renders the SVG graphic inline, while JavaScript employs the Fetch API to retrieve the CSV content and dynamically populate an HTML table. Styling is handled with CSS, and the page includes a header, navigation bar, and footer sections.

Jun 29, 2023

Loading thumbnail…

Activity 6

This example demonstrates how to load D3 via UNPKG and use ES6 module imports in a Vue framework environment. The visualization displays a large background image rendered as an SVG pattern using WebGL, alongside a text message set through D3’s `select` function. The code imports `select` from `d3` and a local `message` module, then updates the DOM element with the ID `message`. Both SVG and WebGL rendering approaches are visible, with the image embedded as a base64-encoded JPEG.

Jun 28, 2023

Loading thumbnail…

5 Buddhas

The visualization displays a chaotic, generative field of hundreds of semi-transparent, random-colored polygons, layered on top of a single large, static path depicting a Buddha figure. It uses React to render an SVG canvas, where a nested loop generates a grid of triangles. Each polygon’s position, color, and rotation are determined by random values and the variable `a`, which is derived from an array. The Buddha image is drawn using a predefined SVG path, scaled and translated, while the background is set to black.

Jun 14, 2023