A

ashpradhan01123

@ashpradhan01123·18 public vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This line chart visualizes the cumulative and daily COVID-19 case counts for ten countries up to July 28, with buttons to toggle between total and daily cases. Lines are drawn with an animated stroke-dashoffset transition using D3’s `transition()` method, and SVG paths are generated via `d3.line()`. The chart includes a color legend mapping countries to a categorical scheme, axis labels, and annotations marking notable events. Data is loaded from a CSV file, and the visualization is built with React and D3 v5, rendered as SVG with animation.

Loading thumbnail…

Untitled

This interactive line chart visualizes COE (Certificate of Entitlement) prices in Singapore from 2010 to 2018, distinguishing between two monthly bidding exercises via radio buttons that toggle between the two series. The chart displays premiums for five vehicle categories (A through E) across time, with each category assigned a distinct color from a categorical scale. The visualization uses D3 v4 to parse CSV data, render SVG axes with gridlines, and apply time-based scaling. A legend with colored markers helps identify each category, while the responsive design incorporates Bootstrap for layout.

Loading thumbnail…

Line Chart with Multiple Lines

A line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. Multiple colored lines represent different cities, with a color legend and axes labeled "Time" and "Temperature." The visualization uses D3 v5's `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest()`, and `line()` with `curveBasis` to draw smooth paths. It renders to SVG, includes gridlines via `axisLeft` and `axisBottom`, and employs `mix-blend-mode: multiply` for overlapping lines.

Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays the cumulative COVID-19 case counts for the top 10 countries from January to July 2020, using multiple animated line paths over a time-based x-axis and a linear y-axis. Each country’s line is color-coded via a d3.scaleOrdinal with a category scheme, and a legend is rendered with d3’s select/enter/merge pattern. The lines animate using `transition.attrTween`-like path drawing with `stroke-dasharray` and `stroke-dashoffset`, while axes are built with d3.axisBottom and d3.axisLeft. Data comes from a CSV file, loaded without visible d3.csv (assumed external).

Loading thumbnail…

Untitled

This line chart visualizes the daily count of global COVID-19 cases across multiple countries from January to April 2020. The code uses d3.csv to load the data and d3.time.scale and d3.scale.linear for the axes, with d3.svg.line and an interpolate("basis") curve for the paths. It animates the drawing of each country’s line using transition and stroke-dasharray. The line for Brazil is highlighted in green, while all other countries are drawn in black. Data originates from a global cases CSV file.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes the cumulative confirmed COVID-19 cases in the US from January to July 2020, with dates on the x-axis and case counts on the y-axis. The chart animates the line drawing using `d3.timer` and an easing function, with the line path calculated by `d3.line` and `curveBasis`. The visualization uses D3 v5 scales, axes, and SVG rendering, with data loaded from a CSV file. Axis lines and labels are styled via CSS.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays the cumulative number of COVID-19 cases in the United States over several months, from January to July 2020, using data from the Data Canvas - Sense Your City project. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a line generator with `curveBasis` to render the smooth maroon path on an SVG canvas. The chart includes labeled axes for time and temperature, though the data actually tracks case counts, with a title noting “A Week in San Francisco.” The code loads the CSV data with `csv()` and applies the D3 margin convention for layout.

Loading thumbnail…

HTML Starter

This example animates the drawing of a line chart, transitioning each data point from the bottom of the plot to its correct position over time using a staggered delay. The visualization uses Apple’s stock closing price data, rendered with a custom easing function and a line path. Built with React, the code leverages Observable’s `d3.select`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.line`, and a timer to orchestrate the animation, with axes and a styled steelblue stroke.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays daily COVID-19 cases in the United States from January to July 2020, with time on the x-axis and case counts on the y-axis. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for scaling, and d3.line with a curveBasis interpolation to draw the maroon line path. Axis labels and titles are added using d3.axisBottom and d3.axisLeft, with gridlines generated via tickSize. The data originates from a public COVID-19 tracking dataset.

Loading thumbnail…

Covid Cases in the US

This visualization shows the geographic spread of confirmed COVID-19 cases across US counties over time, with each county filled according to case counts on a selected date. The map uses an Albers USA projection and renders counties as SVG paths via `d3.geoPath` and TopoJSON. A time slider and play button allow users to animate through the date range, with colors interpolated from a threshold scale using `d3.interpolateReds`. Data comes from a CSV file containing cumulative case counts per county from January to July 2020.

Loading thumbnail…

d3 choropleth map

This choropleth map visualizes the spread of COVID-19 cases over time, with an animating date slider and play/pause controls. The map uses d3.geoEckert5 projection, d3.geoPath, and TopoJSON, with color scales from colorbrewer and d3-scale-chromatic to shade regions by case counts. A draggable slider, built with d3.drag and d3.timeScale, shows daily case data from January to July 2020, while a legend and graticule provide spatial context.

Loading thumbnail…

slider

A playable slider scrubs through a date range from January to July 2020, with a draggable handle and animated play button. The time-based scale uses `d3.scaleTime` with `d3.drag` for interaction, and the handle position updates a text label showing the formatted date. The animation advances the slider via `setInterval`, incrementing the current value until it reaches the end. Data comes from `circles.csv`.

Loading thumbnail…

d3 choropleth map

An animated choropleth map shows the global spread of confirmed COVID-19 cases over time, with countries colored by case counts using the YlGnBu color scale and displayed on an Eckert5 projection. Play and reset buttons control the animation, which cycles through daily date columns from the confirmed_global.csv time series data. The visualization is built with React and D3 v4, using `d3.geoEckert5()`, `d3.geoPath()`, TopoJSON for world geometries, and `d3.legendColor()` to render the ordinal legend.

Loading thumbnail…

d3 choropleth map

This interactive choropleth map visualizes the spread of COVID-19 cases across countries over time, using an animated timeline that cycles through daily data from January to July 2020. The map renders world country boundaries as SVG paths using the Eckert5 projection, with each country’s fill color dynamically updated based on its reported case count for the currently displayed date. Built with D3 v3, it leverages `d3.geo.path`, `d3.geo.eckert5`, `d3.geo.graticule`, TopoJSON for geographic data, and a CSV dataset, while a play button and date label drive the sequential animation.

Loading thumbnail…

d3 choropleth map

This example displays a choropleth map of world countries using an Eckert5 projection, with colors representing numeric data values for each country across multiple years. A play button animates through yearly data from the CSV file, updating the map and a clock display to show the current year. The visualization uses d3.v3 with geo projection and path APIs, queue.js for loading the TopoJSON geometry and CSV data, and renders all elements as SVG. The code includes a graticule layer and country boundaries for geographic context.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays the daily cumulative death count from January to July 2020, using data from a CSV file. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` to render a smooth SVG path. The axes include grid lines and labeled titles, while the line itself is styled in maroon. The data is parsed by converting dates to `Date` objects and deaths to numbers before plotting.

Loading thumbnail…

Covid Deaths

This chart displays the cumulative number of COVID-19 deaths worldwide over time for each country. Each red, semi-transparent circle represents a country’s death count on a given date, revealing the global growth of the pandemic. The visualization uses D3.js (v5) with an SVG rendering, employing D3’s `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes and plot the data points from the `covid_19_globaldeath.csv` file. The chart emphasizes the rapid increase in deaths as the pandemic progressed.

Loading thumbnail…

Lets make a face

This example demonstrates a minimal SVG face-making exercise with a red background, showcasing the basic setup for a D3.js visualization within a React framework. The code selects an SVG element using `d3.select` and applies a CSS style directly to it. It includes an HTML file loading D3 v5 from a CDN and a separate stylesheet, providing a simple template for building custom visualizations. The visualization emphasizes foundational SVG manipulation and styling rather than complex data-driven graphics.