M

Mili Patel

@Milipatel3110·28 public vizzes

Loading thumbnail…

Activity7_task2

This example visualizes car sales data with two charts. The first is an area chart of selling price over time, using a time-based x-axis and a linear y-axis. The second is a smoothed line chart showing the average selling price aggregated by 10,000-mile odometer intervals. Both charts are rendered as SVG using D3’s `select`, `scaleTime`, `scaleLinear`, `area`, `line`, `curveBasis`, and `mean` APIs. The data is loaded from a remote CSV file.

Loading thumbnail…

activity7_task1

This visualization shows smartphone market share as a static pie chart, with each brand’s proportional slice colored and labeled in a side legend. It loads CSV data via `d3-fetch`’s `csv`, parses numeric `MarketShare` values, and generates arcs using `d3-shape`’s `arc` and `pie` generators. The SVG is rendered in a 500x500 viewport, with colors assigned through `d3-scale`’s `scaleOrdinal` and `schemeCategory10`. Legends are manually appended as grouped rectangles and text elements, while the code imports solely the necessary D3 modules rather than the full library.

Loading thumbnail…

Activity7_task1

This visualization displays a pie chart of the top 15 countries by happiness score, using data loaded from a local CSV file. Each slice represents a country’s overall happiness score, with the chart using d3.pie() and d3.arc() to compute and render the arcs in SVG. A color scale from d3.scaleOrdinal with the Tableau10 scheme fills each slice, and white text labels show country names at each arc’s centroid. A legend, also generated with D3, maps each country to its corresponding color.

Loading thumbnail…

Activity7_iris

This animated scatter plot cycles through different Iris dataset measurements, showing how petal width, sepal width, petal length, and sepal length correlate across species. The visualization dynamically updates the x-axis on a timer, while the y-axis remains fixed on sepal length. Built with D3.js, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, and an SVG `setInterval` loop to animate transitions. Species are color-coded via a custom marker function, and the chart includes a legend and dynamic axis labels.

Loading thumbnail…

Activity7_iris

This example visualizes the classic Iris dataset, displaying the flower measurements in a large, centered text message. The visualization uses D3.js version 6 to select the message div and set its text content, importing a custom message from a local ES6 module. The data is rendered as plain text rather than through a graphical chart, relying on D3's `select` API to manipulate the DOM and apply CSS styling for presentation.

Loading thumbnail…

Activity6_question9

This bubble chart shows the relationship between revenue and employee count for major tech companies, with bubble size representing market capitalization. The visualization uses D3 v7 with an SVG rendering approach, loading data from a local CSV file. It employs `d3.scaleLinear` for the x and y axes, `d3.scaleSqrt` for bubble radius, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding. Interactive tooltips display company details on hover, while custom legends show both color and size mappings.

Loading thumbnail…

act6_task4_q9

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 27 car makes. Each bubble's position encodes horsepower (x-axis) and torque (y-axis), while its radius represents highway MPG and its color distinguishes the car manufacturer. The visualization uses D3.js v7 with `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble sizing, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding. Interactive tooltips display the exact values on hover, and the chart includes both color and size legends. Data comes from the local `bubblechart.csv` file.

Loading thumbnail…

act6_task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes, with each car make represented by a uniquely colored bubble. The chart uses the D3.js library (v7) to render an SVG visualization, mapping horsepower on the x-axis, torque on the y-axis, and highway MPG to bubble size. The code leverages `d3.scaleLinear` for axes and bubble scaling, `d3.scaleOrdinal` for color mapping, and includes a legend for bubble size. Interactive tooltips display the car make on hover, and the visualization animates using D3's transition capabilities.

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for 31 car makes, with horsepower on the x-axis, torque on the y-axis, and MPG encoded by both bubble radius and color. The visualization uses d3.csv to load data, d3.scaleLinear for positioning and sizing, and d3.scaleOrdinal with d3.interpolateTurbo for color encoding. Interactive tooltips respond to mouse events, while SVG circles, axes, and a legend are rendered with d3.js v7, including animated opacity changes on hover.

Loading thumbnail…

activity6_question6_shape

This scatter plot shows the relationship between GDP per capita and life expectancy for ten countries, with each continent represented by a unique geometric shape. The D3.js visualization uses d3.scaleLinear for both axes and d3.scaleOrdinal to map continents to symbols like circles, triangles, and squares. The chart renders as an SVG with axes labeled and includes interactive tooltips that display country details on mouseover. Data comes from a local CSV file containing country statistics, encoded using the d3.symbol API within a path-based scatter plot.

Loading thumbnail…

activity6_question6

This scatterplot shows the relationship between GDP per capita and life expectancy across ten countries, with each point colored by continent and revealing a general trend where higher GDP aligns with longer lifespans. Built with D3 v7, the visualization uses `d3.scaleLinear` for both axes and `d3.scaleOrdinal` with `d3.schemeSet2` for continent colors. Data is loaded from `data.csv` via `d3.csv`, and interactive tooltips appear on hover using the `mousemove` event, displaying country name, GDP, and life expectancy.

Loading thumbnail…

activity6_tutorial3.2

This interactive scatter plot visualizes the classic Iris dataset, comparing sepal length against petal length across three iris species. Each flower is represented as a distinct symbol shape (circle, triangle, and square) using D3’s `symbol` generator, with a custom legend showing the species mapping. The chart is built with reusable D3 modules for axes, scatter plot rendering, and a shape legend, leveraging `scaleLinear`, `scaleOrdinal`, and `extent`. Data is loaded asynchronously from a CSV file and parsed with `csvParse`. The visualization responds dynamically to the browser window size.

Loading thumbnail…

activity6_task3.1

This scatter plot visualizes the Iris dataset, showing sepal length on the x-axis and petal length on the y-axis. Each flower species—setosa, versicolor, and virginica—is encoded with a distinct SVG symbol shape: circles, triangles, and diamonds. D3’s scaleOrdinal and symbol API handle the shape mapping, while d3.csv loads the data. A custom shape legend clarifies the species-to-symbol correspondence. Axes and labels are generated using d3.axisBottom and d3.axisLeft.

Loading thumbnail…

Activity6_task3.1

This interactive scatter plot visualizes the iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. Each of the three iris species is represented by a distinct symbol: circles for setosa, triangles for versicolor, and diamonds for virginica. The visualization uses D3.js version 7, employing `d3.scaleLinear` for axes, `d3.scaleOrdinal` for shape mapping, and `d3.symbol` for rendering the custom markers. A legend is drawn on the right to identify each species, and axis labels are included to clarify the measured variables.

Loading thumbnail…

Activity6_task3

This scatter plot visualizes the classic Iris dataset, showing sepal length and width measurements for three Iris species, each distinguished by color. The visualization uses D3.js v7 with SVG rendering, employing `d3.scaleLinear` for the x and y axes, `d3.scaleOrdinal` for color mapping, and `d3.csv` for data loading. Interactive tooltips appear on mouseover, displaying the species name and measurement values for each data point.

Loading thumbnail…

Activity6_Q5

This stacked bar chart shows the distribution of letter grades (A, B, C, D) across five school subjects, with each bar segment representing the percentage of students receiving that grade. The visualization uses D3 v7’s `d3.stack()` to aggregate the CSV data, `scaleBand` for the subject axis, and `scaleLinear` for the percentage axis. Hovering over a segment triggers a tooltip displaying the exact percentage via mouse events. The chart is rendered as SVG with color-coded segments, using `d3.axisLeft` and `d3.axisBottom` for axes.

Loading thumbnail…

Activity6_Q4

This stacked bar chart visualizes the distribution of letter grades (A, B, C, D) across five school subjects, using data from a CSV file. Built with D3 v7, it renders as an SVG with color-coded bars separated by subject. The visualization uses `d3.csv` for data loading, `d3.stack` to create the stacked segments, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the percentage x-axis. A tooltip displays the exact grade percentage when hovering over a segment.

Loading thumbnail…

Activity6_Q4

This stacked bar chart shows the percentage of students receiving grades A, B, C, or D across five school subjects. Each subject’s bar is segmented by grade, colored distinctly, and totals 100%. Built with D3 v7, it loads CSV data via `d3.csv` and stacks values using `d3.stack`. The SVG rendering uses `d3.axisLeft` and `d3.axisBottom` for axes, while a hover tooltip, driven by mouse events, displays each grade’s exact percentage.

Loading thumbnail…

Activity6_Q3

This stacked bar chart visualizes the percentage distribution of grades (A, B, C, D) across five school subjects, with each bar segment color-coded by grade category. The chart uses `d3.csv` to load the data, `d3.stack` to compute cumulative values, and `d3.scaleBand` with `d3.scaleLinear` to map subjects and percentages. Hovering over a segment reveals a tooltip showing the grade and its percentage. SVG rectangles are rendered using D3's `selectAll` and `join` operations, with axes and labels drawn via `d3.axisLeft` and `d3.axisBottom`.

Loading thumbnail…

Activity6_task2

This stacked bar chart shows the distribution of IMDb movie ratings across six genres, broken into five percentage-based rating bands from “below 5.0” to “above 8.5.” Each horizontal bar represents a genre, with colored segments proportional to the share of movies in each rating category. Built with D3 v7, the visualization uses `d3.stack` to compute stacked segments, `d3.scaleOrdinal` for color mapping, and SVG rendering for the final output. The chart reads data from a CSV file and includes interactive tooltips that display the precise percentage for each segment on mouseover.

Loading thumbnail…

activity6_q2

This horizontal bar chart displays the top 20 countries by population in 2010, using the d3.scaleBand and d3.scaleLinear API to map country names and population values to SVG rectangles. The data is loaded via d3.csv from a Gist, then sorted and filtered. The chart includes axes from AxisBottom and AxisLeft, with a lightgreen fill for each bar and dynamic tick formatting that converts large numbers to billions.

Loading thumbnail…

activity6_q1

A horizontal bar chart displays the ten most populous countries in the year 2000, with lightgreen rectangles whose lengths encode each country’s population value. The bars are sorted in descending order and labeled on the left axis. The visualization loads CSV data via d3.csv, maps and sorts the records in `useData`, then renders the chart using d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, with axes created by d3.axisBottom and d3.axisLeft. Numeric tick labels are formatted using d3.format.

Loading thumbnail…

Activity6_Q1

This example shows a horizontal bar chart ranking the top 10 countries by population in the year 2000, drawn as an SVG using D3 v7. The chart uses `d3.scaleLinear` for the x-axis (population) and `d3.scaleBand` for the categorical y-axis (countries), with data loaded from a CSV via `d3.csv`. Green rectangles encode each value, and the axes are generated with `d3.axisBottom` and `d3.axisLeft`. The data is pre-sorted in descending order before slicing to the first 10 entries.

Loading thumbnail…

Activity6_task1

This horizontal bar chart displays the 2020 populations of 30 countries, sourced from a CSV file. The visualization uses D3.js (v7) and renders through SVG. A linear scale maps population values to bar widths, while a band scale positions countries along the vertical axis. The code explicitly creates light green bars via `Marks.js` and formats the population labels in billions using `d3.format` within `AxisBottom.js`.

Loading thumbnail…

activity 6

This horizontal bar chart displays the 2020 population estimates for 30 countries, with bars sorted by country name along the Y-axis and population values on the X-axis. The visualization uses D3 v7’s `scaleBand` and `scaleLinear` to map data, while `d3.axisBottom` and `d3.axisLeft` generate the axes. SVG rectangles are rendered via a custom `Marks` component, and data is loaded asynchronously from a CSV using `d3.csv` with `autoType` parsing. The chart has a fixed 960×600 viewport with a left margin accommodating country labels.

Loading thumbnail…

Fork of 6 Reflections of Budhha

This SVG visualization renders six semi-transparent Buddha figures in violet, overlapping and offset across a flower-background canvas. Built with React and ReactDOM, the code applies SVG `<g>` transformations to scale and translate each copy of the same path data, which traces the Buddha silhouette. The visualization layers the identical vector shape at different positions and sizes, creating a patterned, repeating composition rather than a data-driven graphic.

Loading thumbnail…

Fork of 5 Buddhas

A collection of five overlapping Buddha figures rendered as SVG paths, with a background of green flowers. The visualization uses React and ReactDOM to generate a grid of randomly placed, semi-transparent polygons whose coordinates and colors are determined by the built-in `Math.random()` function, creating a layered, textured effect. The Buddha shapes themselves are drawn from path data, likely sourced from a vector image.

Loading thumbnail…

Fork of 5 Buddhas

A dark canvas displays twenty overlapping Buddha silhouettes, rendered in violet, green, blue, yellow, and orange at varying sizes and positions to create a layered, spiritual composition. The visualization uses React and ReactDOM to generate and position the silhouettes from a predefined SVG path, with the code constructing a numerical array to control the repetition and scale of each figure against a black background.