S

Sagar Malviya

@sMalviya·30 public vizzes

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The visualization is rendered as an SVG using D3 v5, employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` for smoothing. The chart includes labeled axes, a title, and grid lines created via tick marks. Data is loaded as CSV from the Data Canvas - Sense Your City dataset, with timestamps parsed as dates and temperatures converted to numbers.

Loading thumbnail…

Temp in San Fran Line chart

This line chart displays a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The chart uses a smooth curved line to connect the data points, with grid lines and labeled axes for clarity. The visualization is built with D3 v5, using `d3.csv` to load the data, `d3.scaleTime` and `d3.scaleLinear` for scales, and `d3.line` with `curveBasis` to generate the path. The SVG rendering includes custom axis labels and a title, with styles defined in an external stylesheet.

Loading thumbnail…

Line Chart with Multiple Lines

This visualization shows one week of temperature data in degrees Celsius for cities around the world, with each city represented by a colored line. The chart uses d3.scaleTime for the time axis, d3.scaleLinear for temperature, and d3.scaleOrdinal with schemeCategory10 for city colors. Lines are generated with d3.line and curveBasis, while d3.nest groups measurements by city. A color legend is rendered using a custom component, and the data comes from the Data Canvas - Sense Your City project.

Loading thumbnail…

Temp in multiple city

This visualization tracks temperature readings across multiple cities over the course of a week, using a multi-line chart where each line represents a different city's temperature fluctuations. The data is sourced from a CSV file and rendered as SVG paths. The code leverages D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal` with `schemeCategory10` for color mapping, `line` with `curveBasis` for smooth curves, and a custom `colorLegend` component. Axes are generated using `axisBottom` and `axisLeft` with grid lines and labels.

Loading thumbnail…

BJP price chart

This chart shows the change in petrol prices across Indian election years from 2004 to 2018, overlaid as both a red line and bars on the same axes. The visualization combines a line series with a bar series using dimple.js, built on top of d3.v4, with data loaded from a CSV file via `d3.csv`. The SVG chart is rendered with a fixed width and height, and the red line color is assigned both through the chart’s `assignColor` method and a CSS class selector.

Loading thumbnail…

ScatterPlot

A scatterplot displays the population of the ten most populous countries, with each circle’s position encoding population on the x-axis and country on the y-axis. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scalePoint for scaling, and d3.axisBottom and d3.axisLeft with grid lines. Circles are appended as SVG elements with a fixed radius, while axis labels and a title are added via d3 selections. The chart renders population values in thousands, formatted with d3.format.

Loading thumbnail…

Color and size legends

A standalone SVG legend demonstrates how to encode categorical and quantitative data through color and size. The color legend maps fruit names (apple, lemon, lime, orange) to distinct hues using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to map a numeric domain from 0 to 10 to circle radii. Both legends are rendered as reusable components via the `colorLegend` and `sizeLegend` functions, positioned with appended SVG groups and `d3.select`. The example relies on D3 v5 and custom tick formatting.

Loading thumbnail…

D3.js in action!

This example shows a red square with a thick black border rendered inside an SVG canvas, demonstrating basic D3.js DOM manipulation. The code uses `d3.selectAll('svg')` to target the SVG element and appends a `rect` with attributes for position, size, stroke, and fill. It relies on the D3 v5 library loaded from a CDN, and renders the shape as pure SVG geometry without any data binding or interaction. The result is a static visual, illustrating how D3 can directly create and style SVG elements.

Loading thumbnail…

Untitled

This example renders a single red square with a black border onto a 300-by-300 SVG canvas. It uses D3 version 5’s `selectAll` and `append` to create the `rect` element, setting its position, size, stroke, and fill through chained attribute assignments. The page also loads D3 from a CDN, includes a separate bundle.js, and demonstrates basic SVG manipulation without any external data source.

Loading thumbnail…

Cars Report

This example demonstrates a loading state that transitions into a text-based report of cars priced under $2,500. It uses an asynchronous `getCars` promise to simulate a two-second delay, then filters and formats car data with `generateReport` and `formatCar`. The report is rendered as plain text into an HTML element via `textContent`, showing a simple data-processing pipeline from JSON to user-facing output.

Loading thumbnail…

Circles on a map

This visualization displays a world map with circles sized by population estimates for 2018, using a square-root scale to encode magnitude. Countries without data appear in red, while those with values are green. The code uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to render country boundaries, and `d3.geoCentroid` to position circles. A size legend and a color legend are generated with custom D3 functions, while zoom interaction is implemented via `d3.zoom`. Population data comes from a CSV of UN estimates, merged with TopoJSON world atlas geometry.

Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot displays relationships between pairs of variables from the auto-mpg dataset. Users select which columns to compare on the x and y axes via HTML dropdown menus, which trigger the plot's update. The visualization uses d3 v5's `scaleLinear`, `axisLeft`, and `axisBottom` to create the axes, with a 2-second animated transition on each circle via D3's transition system. Dropdown menus are built using D3 selection and DOM manipulation, re-rendering the SVG on each change.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set. Red semi-transparent circles represent each car, positioned using linear scales for both axes. The visualization is built with D3 v5, using `scaleLinear`, `axisBottom`, and `axisLeft` to render axes and grid lines, while SVG elements handle the circles and labels. The code loads remote CSV data, converts numeric fields, and appends a title and axis labels within a margin-based layout.

Loading thumbnail…

Choropleth map interactive filtering

This example presents a choropleth map of the world, where countries are colored according to their economy using a spectral color scale. The map supports interactive filtering: hovering highlights a country, and clicking a legend item dims all countries except those matching the selected economy category. The visualization is rendered as SVG using d3.geoPath with a geoNaturalEarth1 projection, while the color legend is built with d3.scaleOrdinal and d3.schemeSpectral. Country data comes from the world-atlas TopoJSON dataset, merged with TSV metadata. The zoom and pan interaction is enabled through d3.zoom, applying event.transform to the map group.

Loading thumbnail…

Choropleth map

This choropleth map colors world countries by economy type using a spectral color scale, with a hover effect highlighting individual countries and a legend showing the ordinal categories. It renders GeoJSON country outlines as SVG paths via d3.geoPath with a Natural Earth projection, and loads country boundaries from the world-atlas TopoJSON dataset. The map supports zoom and pan through d3.zoom, and the color legend is built with a custom reusable component in d3.

Loading thumbnail…

Let's make a interactive map

This interactive map displays world countries in a natural Earth projection atop a blue sphere, with geographic features rendered as SVG paths. The visualization uses d3.geoPath, d3.geoNaturalEarth1, and the topojson library to convert TopoJSON data into clickable country shapes. Country names are overlaid as tooltips, sourced from a tab-separated values file. The map supports zoom and pan interactions through d3.zoom, making it an explorable representation of global geography.

Loading thumbnail…

Bowl of Fruit- General Update pattern

This example demonstrates the D3.js general update pattern by animating a bowl of fruit, where apples are eaten, replaced with lemons, and removed over time. It uses D3 selections with enter, merge, and exit methods to manage dynamic data binding, rendering SVG circles and text elements via a reusable `fruitBowl` function. The visualization employs `d3.scaleOrdinal` to map fruit types to colors and radii, with the data driven by timed `setTimeout` callbacks that modify a hardcoded fruits array.

Loading thumbnail…

World countries Tree

This visualization presents a hierarchical tree of world countries, organized by continent and subregion, with the country names displayed as text nodes. The layout uses a horizontal tree structure where the depth of each node is reflected by its font size in the SVG rendering. The visualization leverages D3 v5's `hierarchy`, `tree`, `linkHorizontal`, and `zoom` modules to position and connect the nodes, reading the data from a local `data.json` file. It renders as an interactive SVG that supports zooming and panning.

Loading thumbnail…

Art

This example shows a hierarchical tree visualization of world regions and countries, with the data organized by continent and subregion. The layout uses a horizontal tree structure, rendering nodes as links from parent to child. The visualization is built with D3 v5, using the `tree` and `hierarchy` layouts to compute positions and `linkHorizontal` to generate path curves. Data comes from a local JSON file, and the SVG output fills the entire browser window.

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map with countries filled in light green and oceans rendered in blue, using the Natural Earth 110m dataset loaded from the `world-atlas` package. It projects geographic coordinates with `d3.geoNaturalEarth1` and draws the sphere and country boundaries via `d3.geoPath`. The code uses the `topojson` library’s `feature` function to convert TopoJSON into GeoJSON features, then appends SVG paths to the canvas. Three.js is not used; all rendering occurs through SVG elements.

Loading thumbnail…

Bowl of Fruit-hover to select

Five pieces of fruit (apples and a lemon) are rendered in an SVG bowl. Hovering over a fruit selects it, highlighting it with a black outline. The bowl uses D3 v5's data join to update the scene across timed changes: one apple is removed, another is replaced by a lemon, and a third is filtered out. Color and radius are mapped by ordinal scales, while fruit positions are computed from their array index.

Loading thumbnail…

Bowl of Fruit-interaction

A small set of fruit circles sits in a bowl, highlighting an active fruit with a black stroke when clicked. The code uses d3 data joins to update the scene, removing a fruit, replacing one apple with a lemon, and re-rendering at timed intervals. The fruitBowl function applies d3 scaleOrdinal for color and radius, and SVG groups translate each circle and label into position. Click events trigger a state update that re-renders with the new selection highlighted.

Loading thumbnail…

Bowl of Fruit- General Update pattern

A bowl of fruit rendered as SVG circles demonstrates D3.js's general update pattern, managing enter, update, and exit selections as apples are eaten, replaced, and removed over timed intervals. The code uses `d3.select`, `selection.data` with key functions, and chained `.transition()` calls to animate radius changes, while `scaleOrdinal` maps fruit types to colors and sizes. Apples appear red, lemons yellow, and each fruit’s unique `id` key tracks individual elements during updates.

Loading thumbnail…

World Population Area chart

This area chart visualizes world population by year using a dataset from VizHub’s world-population-by-year-2015 CSV. It renders an SVG with D3 v5, using `scaleTime` and `scaleLinear` to map years and population values, and `d3.area()` with `curveBasis` to draw the smoothed filled region. Axes are generated via `axisBottom` and `axisLeft`, with tick labels formatted to abbreviate billions as "B". The chart includes axis labels and a title, all styled via external CSS.

Loading thumbnail…

Customizing Axes

This example demonstrates how to customize axes in a bar chart displaying the top 10 most populous countries, using population data loaded from a CSV file. The chart applies a linear scale for the x-axis and a band scale for the y-axis, with custom tick formatting that converts large numbers to abbreviations. The code leverages D3.js v5 APIs such as `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, while removing default axis domains and styling grid lines and labels through CSS.

Loading thumbnail…

Temp in San Fran Area chart

This area chart visualizes temperature in San Francisco over a week, with time on the x-axis and temperature on the y-axis. The chart uses a smooth curve to fill the area beneath the temperature line, with gridlines and labeled axes. It renders as SVG using D3 v5, leveraging `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the path. Data is loaded from a CSV file on VizHub and parsed with `new Date()` and unary plus operators.

Loading thumbnail…

Temp in San Fran

This scatter plot displays temperature readings over a one-week period in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses d3’s `scaleTime` and `scaleLinear` to map the data, and `axisBottom` and `axisLeft` to render the axes. Circles are added to the SVG canvas using `selectAll` and `append`, with the data sourced from a CSV file of San Francisco temperatures. The chart includes labeled axes and a title, styled via CSS.

Loading thumbnail…

Cars ScatterPlot

This scatterplot visualizes the relationship between horsepower and weight for a dataset of cars, with each red circle representing a vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while `csv` loads the auto-mpg dataset from a remote URL. SVG circles are positioned via the scales, and gridlines are drawn using tick sizes that span the plot’s inner dimensions.

Loading thumbnail…

Making a Bar Chart

This example displays the population of the top 10 most populous countries using a horizontal bar chart. It loads data from a CSV file containing 2018 United Nations population estimates, with each bar’s length scaled by population. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` for positioning, along with `axisLeft` and `axisBottom` for tick marks. The code reads the CSV via `d3.csv`, converts population values to thousands, and renders SVG rectangles in a single group with margins.

Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face is rendered as SVG shapes within a 960×500 viewport. Yellow circles form the head and eyes, while an arc path creates the mouth. The eyebrows, drawn as rectangles, animate automatically, moving upward and returning to their original position over a two-second cycle. The code demonstrates fundamental DOM manipulation using D3’s `select`, `append`, `attr`, and `transition` APIs.