Tejaswicmandava

@Tejaswicmandava·26 public vizzes

Line Chart

This example shows world population trends as a line chart, plotting year on the x-axis against percentage on the y-axis. The chart uses D3 v5 with an SVG rendering approach, employing `scaleTime` and `scaleLinear` for the axes and `line` to generate the path. Data is loaded from a CSV file via `csv`, with axes labeled and styled using `axisBottom`, `axisLeft`, and CSS. The line is drawn with a pink stroke, and the chart includes a title and axis labels.

Mar 25, 2023

Loading thumbnail…

Fork of Fork of line chart section 3

This visualization displays car sales data from 2013 to 2021, using a line chart to show the trend in total sales over time. The x-axis represents years, while the y-axis shows total sales figures. The chart is rendered as an SVG using D3 v5, with scales including `scaleTime` and `scaleLinear`, and axes created via `axisBottom` and `axisLeft`. The line is drawn using the `line` generator, and the data is loaded from a CSV file hosted on GitHub, with dates parsed using `d3.timeParse`.

Mar 25, 2023

Loading thumbnail…

Fork of Fork of line chart section 3

This visualization displays car sales data from 2013 to 2021 as a red line chart. It uses d3.scaleTime and d3.scaleLinear for the x and y axes, with d3.line generating the path. The axes are rendered with d3.axisLeft and d3.axisBottom, including grid lines via tickSize. Data is loaded from a remote CSV file using d3.csv, with dates parsed via d3.timeParse. The line path is styled with a red stroke and no fill, set within an SVG canvas.

Mar 25, 2023

Loading thumbnail…

Fork of ICE 7 Area Chart

This fork of d3.v5 visualizes car sales percentages in India from 2009 to 2019 as a smooth, basis-curved area chart. The SVG rendering combines an orange filled area with a black line stroke, using `d3.scaleTime` and `d3.scaleLinear` for axes and `d3.line` and `d3.area` generators. Data is parsed from a CSV via `d3.csv`, with year values formatted through `d3.timeParse`.

Mar 25, 2023

Loading thumbnail…

Line Chart

This line chart visualizes one week of temperature data in San Francisco using a smooth, red curved line plotted over a Cartesian grid. The SVG rendering is built with D3 v5, using `scaleTime` and `scaleLinear` for the axes, `line` with `curveBasis` for the path, and `axisBottom` and `axisLeft` for ticks. Data is loaded from a CSV of timestamp-temperature pairs, with annotations for “Time” and “Temperature” and a title.

Mar 25, 2023

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This visualization shows the top 10 countries with the highest deaths from air pollution in 2020, displaying each country’s death count as a labeled slice of a pie chart with a legend. The code fetches CSV data with d3.csv, uses the d3.pie and d3.arc layouts to generate SVG paths, and applies a d3.scaleOrdinal for slice colors. Text labels and a legend are rendered via SVG text elements, with death values formatted in thousands using d3.format.

Mar 25, 2023

Loading thumbnail…

Pie Chart

This pie chart visualizes the premium monthly cost of Netflix subscriptions across ten countries, with each slice colored by cost and accompanied by a legend listing country names and prices in US dollars. The visualization uses D3 v5 APIs including `pie()` for angle generation, `arc()` for path construction, `scaleOrdinal` with `schemeCategory10` for colors, and `csv()` to load data from a GitHub gist. The chart renders as SVG within a React application, displaying values sorted in descending order and updating interactively on mouseover.

Mar 25, 2023

Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart shows Netflix subscription prices across different countries, plotting the number of movies available in each country against a horizontal axis. The visualization is rendered as an SVG using React components that leverage D3's `scaleBand` for the categorical country axis, `scaleLinear` for the continuous movie-count axis, and `csv` to load data from a GitHub-hosted CSV file. The code manually constructs axis ticks and gridlines, and uses `rect` elements to draw the bars.

Mar 25, 2023

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width and sepal length to x and y positions with a linear scale. The code uses D3 v6 APIs including d3.scaleLinear, d3.axisLeft, and d3.axisBottom to render axes and circles. An animation cycles through different data columns every two seconds, updating the x-axis domain and repositioning points via setInterval. The reusable chart pattern, inspired by Mike Bostock’s “Towards Reusable Charts,” encapsulates custom getter and setter methods for width, height, data, and margin, while loading data asynchronously with d3.csv.

Mar 25, 2023

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the number of movies available on Netflix across different countries, using a horizontal bar chart rendered as SVG. The React app loads CSV data from a GitHub gist and uses D3’s `csv` parser, `scaleBand` for the categorical country axis, and `scaleLinear` for the numeric movie count. Bars are drawn as `rect` elements, with D3-generated tick marks and labels for both axes. The chart is limited to the top 15 countries by movie count, providing a quick comparison of content library sizes.

Mar 12, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays the text "Hello HTML!" in large, centered styling within a web page. It demonstrates a minimal setup using plain HTML, CSS, and JavaScript, with no external libraries or frameworks. The rendering relies on the browser’s native layout engine, and the styling is applied through a CSS class defining an extremely large font size with center alignment. The page’s content and presentation are entirely defined within a single `index.html` file, which is a common basis for more complex interactive visualizations.

Mar 12, 2023

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example shows the Netflix basic subscription price across 15 countries using a horizontal bar chart rendered with React and D3 v5. The visualization encodes price as bar length on a linear scale, with country names on a band scale. Data loads from a CSV file via `d3.csv`, while React manages state through the `useState` and `useEffect` hooks. D3’s `scaleBand`, `scaleLinear`, and `max` functions compute the scales, and React maps the data to SVG `<rect>` and `<text>` elements.

Mar 12, 2023

Loading thumbnail…

Penguin Data set scatter Plot

This scatter plot visualizes the relationship between flipper length and body mass for three penguin species, with each species distinguished by color. The code uses D3 v5 with SVG rendering in a React context, loading data from a CSV file hosted on GitHub. It employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the plot, positioning circles via `cx`, `cy`, and `fill` attributes. Axis labels and a title are added as SVG text elements, and the visualization fills the entire browser window by using `window.innerWidth` and `window.innerHeight`.

Mar 12, 2023

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example renders a horizontal bar chart of Netflix subscription costs across 15 countries using React and D3 v5. It shows the relative pricing differences by encoding the cost values as bar lengths, with country names on the y-axis and a linear cost scale on the x-axis. The code loads CSV data via `d3.csv`, uses `scaleBand` and `scaleLinear` for positioning, and generates SVG rectangles for the bars. Custom tick labels and grid lines are drawn manually using the scale ticks, while React manages the component state and rendering lifecycle.

Mar 11, 2023

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

A bar chart shows the basic monthly cost of Netflix in 15 countries, sorted by dataset order. The visualization uses React components to render an SVG with D3 scales and axes, mapping country names to the y-axis and basic cost to bar widths. Data is loaded from a CSV file via D3’s `csv` function, and the chart draws gridlines, tick labels, and rectangles using D3’s `scaleBand` and `scaleLinear` APIs.

Mar 11, 2023

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example shows the top 15 movies by metascore as a horizontal bar chart, with each bar’s length encoding the numeric score and the movie title on the y-axis. The visualization uses React’s `useState` and `useEffect` hooks to load CSV data via `d3.csv`, then renders SVG marks with `scaleBand` and `scaleLinear` for positions. Grid lines and tick labels are drawn manually from `xScale.ticks()`, while D3’s `max` and `format` handle scaling and number display. The code imports D3 v5 utilities like `select`, `axisLeft`, and `axisBottom` but does not use them in the final render.

Mar 11, 2023

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example displays a horizontal bar chart of the top 15 movies by their Metascore, using React to manage the component state and D3 version 5 for data processing and scales. It loads a CSV file from a GitHub Gist, parses the numeric score values, and renders the bars as SVG rectangles. The code uses `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.max` to handle data loading, axis positioning, and scaling, with React’s `useState` and `useEffect` to fetch and store the data before rendering.

Mar 11, 2023

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example displays a horizontal bar chart of the top 15 movies by Meta_score, sourced from a CSV file of population-by-country data loaded via D3’s `csv` function. Using React with hooks (`useState` and `useEffect`) and D3 scales (`scaleBand`, `scaleLinear`), the SVG renders rectangles for each movie, with axes drawn manually from `xScale.ticks()` and the band domain. The chart demonstrates mark (rect) and channel (length) mapping, with all visualization elements generated in JSX.

Mar 11, 2023

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the simplest possible D3 version 7 usage: it selects the `body` element and renders the static text "Hello D3 version 7" at a massive font size of 13em. The visualization shows how to initialize a D3 project with a minimal HTML page that loads the library from `unpkg.com` and calls the `select` method from `d3` to set the text content directly. The code relies solely on the core `d3.select` API, with no data source, chart, or interaction involved.

Mar 11, 2023

Loading thumbnail…

ICE5

This example displays metadata about a sales department dataset, showing the file size in kilobytes, row count, and column count as plain text on a page. The data is fetched from a CSV file using the `d3.csv` method, and the output is formatted with `d3.csvFormat` to calculate the file size. The page presents the information within a pre-styled container, alongside headers and a link to the source dataset. The visualization relies on the D3.js library, version 7.3.0, loaded via a CDN.

Mar 3, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A D3.js smiley face demonstrates animated SVG construction, with eyebrows that repeatedly translate upward and back over two-second transitions. The example builds the face from geometric primitives—circles, rectangles, and an arc path for the mouth—using d3.select to target the SVG element and d3.arc to define the mouth’s curved shape. The code explicitly manages a group hierarchy, translating components like eyes and eyebrows relative to the face’s center. This serves as a foundational exercise in DOM manipulation and chained transition methods within the D3 v5 API.

Feb 25, 2023

Loading thumbnail…

Fork of Fork of Fork of Let's make a face with D3.js!

A smiling face made of sky-blue SVG shapes demonstrates basic D3.js DOM manipulation. The code uses `d3.select` to append a circle for the head, two circles for eyes, and an arc-generated path for the mouth. Eyebrows are rectangles that animate vertically through chained `transition().duration()` calls, moving down and back up. The example relies on D3 v5's `select`, `arc`, and transition methods, rendering entirely in SVG with no external data.

Feb 25, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This animated smiley face demonstrates how D3.js can manipulate SVG elements over time. The visualization builds a face from basic shapes, including a sky-blue circle, eyes, eyebrows, and a mouth, with the eyebrows animating up and down using the `transition` API. The code relies on D3 v5's `select`, `append`, and `arc` methods to construct and position the geometry within an SVG canvas. The example specifically highlights declarative DOM manipulation and chained transitions to create a simple, looping facial expression.

Feb 25, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of Let's make a face with D3.js!

This example shows an animated smiley face with moving eyebrows, created entirely in SVG using D3.js v5. It demonstrates fundamental DOM manipulation by appending and styling circles, rectangles, and paths for facial features, with eyebrow transitions that repeat via chained `transition` calls. The face is centered in a 960x500 SVG canvas, and the code relies on D3's `select`, `arc`, and transition APIs to build the static features and animate the eyebrows over four-second cycles.

Feb 25, 2023

Loading thumbnail…

Fork of Let's make a face with D3.js

This example shows a simple animated face built with SVG, featuring yellow circular head, white eyes with black pupils, and a mouth drawn as an arc path. The code uses d3-selection to append elements and d3-shape’s `arc` generator to create the mouth. Eyebrows are rectangles that animate by chaining `transition().duration(2000)` calls, moving their group up and down via `attr('transform')`. The face is centered using a `g` element translated to the SVG’s midpoint, with coordinates derived from the SVG’s height and width attributes.

Feb 25, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example demonstrates how to create an animated smiley face using D3.js selections and SVG elements. The face consists of a green circle, two eyes, a mouth drawn with `d3.arc`, and rectangular eyebrows that translate vertically through chained `transition.duration` calls. The code uses D3 v5's `select`, `arc`, and `.attr` methods to manipulate the DOM. By appending SVG shapes to a centered group and applying coordinate transforms, the animation shows eyebrows moving independently while the rest of the face remains static.

Feb 21, 2023