Skip to main content
Log in
K

karingusathwika@gmail.com

@sathwika456·19 public vizzes

Loading thumbnail…

task 9

This pie chart visualizes total sales by item category, using data loaded from a remote CSV file. The chart.js library renders the pie on an HTML canvas element, with labels drawn from the category column and values from the sales column. Six distinct color slices represent each category, and a title displays above the chart. The visualization fetches the Walmart dataset asynchronously, parses the CSV text into rows, and constructs the chart once the data is ready.

Apr 25, 2024
Loading thumbnail…

task 9 q2

This area chart displays temperature readings for various cities, with city names along the x-axis and temperature values in degrees Celsius on the y-axis. The visualization uses D3.js v7 to fetch and parse CSV data from a remote GitHub gist, then renders an SVG area path using the d3.area generator with a band scale for city positioning. Axis labels are added for both axes, with rotated city labels and a linear scale defining the temperature range.

Apr 25, 2024
Loading thumbnail…

Activity3.2

This scatter plot displays the relationship between sepal length and petal length for Iris flowers, with each species represented by a distinct symbol shape. The visualization includes labeled axes and a legend identifying the three species. Built with D3 v7, the code uses `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and custom axis and legend modules to render the marks. Data is loaded from a remote CSV file containing the classic Iris dataset.

Apr 15, 2024
Loading thumbnail…

Activity6_Tutorial3-1

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). The visualization uses d3.scaleLinear for axis scaling, d3.extent to compute data domains, and d3.axisLeft/d3.axisBottom for tick rendering. Circles are drawn as SVG elements with a fixed radius, while the code also calculates sepal dimensions for each point but does not apply them to the mark size. Data is loaded asynchronously from a CSV via d3.csv, and the chart resizes to the browser window.

Apr 15, 2024
Loading thumbnail…

Activity_3

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica) using skyblue, lightgreen, and orange. The code loads CSV data via `d3.csv`, scales the axes with `d3.scaleLinear`, and renders circles as SVG elements using `d3.select` and `d3.join`. Axis labels are added with `d3.axisBottom` and `d3.axisLeft`, though the y-axis label incorrectly reads "Petal_Length" while the x-axis label says "sepal_Length".

Apr 15, 2024
Loading thumbnail…

act 6 q7

This interactive bubble chart visualizes global population data by country, with circles sized proportionally to population and colored by continent. Users can toggle between four grouping modes—combine all countries, group by continent, place circles at country center coordinates, or scale by population—and switch between solid colors and country flag patterns. Built with D3 v4, the visualization uses `d3.forceSimulation` with custom force configurations for each layout, while transitions animate the bubbles when switching groupings. Hovering reveals country names and population counts, and a color-coded continent legend slides into view when relevant.

Apr 15, 2024
Loading thumbnail…

act 6 tutorial 4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Circles are positioned by horsepower (x-axis) and torque (y-axis), with their radius and color encoding highway MPG using a linear scale and a turbo-interpolated ordinal color scale, respectively. Built with D3 v7, the SVG graphic includes interactive tooltips on hover and a legend for bubble sizes. Data is sourced from a local CSV file.

Apr 15, 2024
Loading thumbnail…

Activity6 tutorial 4

This bubble chart shows the relationship between average horsepower, torque, and highway miles-per-gallon for various car makes. Horsepower is plotted on the x-axis, torque on the y-axis, and the bubble’s radius encodes highway MPG, with a color scale distinguishing different manufacturers. The visualization uses D3.js v7 to render an SVG with animated tooltips that display the car make on hover. A legend explains the MPG bubble sizes, and a color-coded list identifies each make. The chart is built from the `bubblechart.csv` dataset, with axes labeled and a turbo color interpolation applied to the categorical color mapping.

Apr 15, 2024
Loading thumbnail…

Activity6_Task3 tuto

This scatterplot shows the relationship between calories and protein for 77 breakfast cereals, with each dot color-coded by manufacturer. Hovering over a dot reveals the cereal name and its exact values in a tooltip. The visualization uses D3 v3 with SVG rendering, d3.csv to load the data, d3.scale.linear for axes, and d3.svg.axis to draw them. A legend identifies the color categories.

Apr 15, 2024
Loading thumbnail…

Fork of Activity 6 tutorial 3-2

This example uses D3 v7 to render a scatter plot of the Iris dataset. It maps sepal length and petal length to the x and y axes, and encodes species using different shapes. The visualization includes labeled axes and a legend for the shape categories. The code demonstrates D3's `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs, with data fetched as CSV and parsed using `csvParse`.

Apr 15, 2024
Loading thumbnail…

Activity 6 tutorial 3-1

This scatter plot visualizes the Iris dataset, mapping petal length and width for each flower sample. Points are colored by species (setosa, versicolor, and virginica) using skyblue, lightgreen, and orange markers. The visualization loads CSV data from a GitHub gist, parses it, and builds a D3 v6 SVG chart with `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, `d3.axisBottom`, and `d3.select` for DOM manipulation. Axis labels are added for petal dimensions, while the viewport uses `window.innerWidth` and `window.innerHeight` for sizing.

Apr 15, 2024
Loading thumbnail…

Fork of Activity 6 q3

This example presents a stacked bar chart illustrating population distribution across age brackets for several U.S. states, with each bar segmented by age group and colored using a categorical scale. The visualization is rendered as an SVG using D3.js (v3.5), with population values loaded from a local CSV file. Users can hover over individual bar segments to see a tooltip displaying the specific age group and its population count. The chart sorts states by total population and includes axis labels, demonstrating D3's core APIs for data binding, scales, and SVG rendering.

Apr 15, 2024
Loading thumbnail…

Activity 6 tutorial 2

This stacked bar chart shows the distribution of IMDb movie ratings across five genres, with each bar representing the percentage of movies falling into categories from 'below 5.0' to 'above 8.5'. Hovering over a segment displays a tooltip with the exact percentage. Built with D3.js v7, the visualization uses `d3.stack` for horizontal stacking, `d3.scaleBand` for the y-axis, and `d3.axisBottom` for the x-axis, rendering as SVG. Tooltips are implemented as HTML divs positioned via mouse events.

Apr 15, 2024
Loading thumbnail…

activity 6_Task 1

This bar chart displays the population of 30 countries for the year 2020, ranked along the vertical axis. The chart uses a green horizontal bar for each country, with a tooltip showing the precise population value on hover. It loads data from a CSV file via D3's `csv` function, and constructs a band scale and linear scale for the axes. The React components render SVG elements for the axes and marks, while D3's `format` function converts large numbers into abbreviated strings.

Apr 15, 2024
Loading thumbnail…

act q1 2nd one

This example shows a horizontal bar chart comparing the 2010 populations of 20 countries, sorted by country name. The visualization loads CSV data from a GitHub gist and uses D3 v5’s `scaleBand` and `scaleLinear` to position bars, while React renders the SVG elements. Axes are drawn with custom `AxisBottom` and `AxisLeft` components, and each bar includes a native SVG `<title>` tooltip. The chart labels population values in billions using D3’s `format` function with SI prefixes.

Apr 15, 2024
Loading thumbnail…

act 6 q1

This example displays a horizontal bar chart of population estimates for ten countries in 2000, ranked by country name along the y-axis. The chart is rendered as an SVG using React components, with scales and formatting provided by D3 v5 methods such as `scaleBand`, `scaleLinear`, `max`, and `format`. Data is loaded asynchronously from a CSV via `csv` and the `useData` hook, with population values converted from thousands. Native SVG `<title>` elements supply tooltips, while D3 ticks are customized with blue grid lines and axis labels.

Apr 15, 2024
Loading thumbnail…

act 6 task 1

This example shows a horizontal bar chart of 2020 population data for 30 countries, with a green fill and blue tick lines. Population values are formatted with SI suffixes (e.g., “B” for billions) on the bottom axis. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `format` for tick labels. Data is loaded from a remote CSV via `d3.csv`.

Apr 15, 2024
Loading thumbnail…

Fork of Activity 6_Task 1

This visualization presents a horizontal bar chart comparing the populations of the top 30 countries in 2020, with each bar labeled by country name. Built with React and D3 v5, it uses `d3.scaleBand` and `d3.scaleLinear` to map the categorical and quantitative axes, while `d3.format` converts raw values into readable SI units. Custom React components for axes and marks render the SVG rects, and data is loaded asynchronously from a CSV file via `d3.csv`.

Apr 15, 2024
Loading thumbnail…

activity 6_Task 1

This bar chart displays the populations of 30 countries for the year 2020, sorted along the y-axis with horizontal bars extending from a zero baseline. It uses React with D3 v5 utilities such as `scaleBand`, `scaleLinear`, `max`, and `format` to compute scales and axis ticks. An SVG renders the visualization, with data loaded via D3’s `csv` from a GitHub gist. Native SVG `<title>` elements provide tooltips showing formatted population values, while the axes are built using custom `AxisBottom` and `AxisLeft` components.

Apr 14, 2024