S

safdarawan

@safdarawan·43 public vizzes

Loading thumbnail…

Covid Cases Hover

This visualization displays daily COVID-19 case counts in New York City as a bar chart, with tooltips that reveal the exact case number and date on hover. The bars turn orange when the mouse passes over them. The chart uses D3 v5’s `scaleBand` and `scaleLinear` for axes, and renders as SVG. Tooltip functionality is provided by the `d3-tip` library, which appears on mouseover and hides on mouseout. Data comes from the included `data.csv` file, which contains date, case, hospitalization, and death counts.

Loading thumbnail…

Population over Time by Region

A line chart shows population over time by region, with a vertical marker indicating the currently selected year. A pie chart beside it displays the population distribution across regions for that same year. Hovering over the line chart updates the selected year and refreshes the pie chart. The visualization uses D3 v5 APIs including `d3.nest`, `d3.line`, `d3.scaleTime`, the `d3.pie` layout, and custom legend and chart modules, rendering in SVG. Data comes from UN population estimates and medium-variant projections.

Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This visualization combines a world map and a timeline to explore migrant deaths, with brushing linking the two views. The map displays circles sized by the total dead and missing per location using a square-root scale, while the histogram aggregates deaths by month. A brush on the histogram filters the map to show only data within the selected date range. The code uses React, D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `scaleTime`, `bin`, `brushX`, and TopoJSON for world atlas boundaries.

Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays temperature readings for multiple cities over a one-week period, with each city represented by a colored line. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for smooth paths, and `nest` to group data by city. A color legend, built from `scaleOrdinal` with `schemeCategory10`, identifies each line. The SVG rendering includes axis labels, a title, and grid lines. Data comes from a CSV file loaded via D3’s `csv` function, with timestamps parsed as dates.

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization presents ILINet flu surveillance data in a four-panel dashboard. It displays weekly trends across years, a choropleth map of state-level averages, a bar chart of top states, and state-specific yearly lines. Built with React and D3 v5, it uses d3.scaleBand, d3.scaleLinear, d3.geoAlbersUsa, and d3.line with curveCardinal. Data is loaded via d3.csv from CDC ILINet data, with interactions filtering views across panels.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from the Data Canvas - Sense Your City initiative. It plots timestamp on the x-axis against temperature in degrees Celsius on the y-axis, with a smooth curve fitted using D3's `line` and `curveBasis`. The visualization is rendered as an SVG, using D3 v5 APIs like `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `nest` to group data by city, with a categorical color scale from `SchemeCategory10` assigning distinct stroke colors to each series.

Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays temperature readings for multiple cities over a one-week period, with each city represented by a colored line. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for smooth paths, and `nest` to group data by city. A color legend, built from `scaleOrdinal` with `schemeCategory10`, identifies each line. The SVG rendering includes axis labels, a title, and grid lines. Data comes from a CSV file loaded via D3’s `csv` function, with timestamps parsed as dates.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data across multiple cities worldwide, with each city represented by a distinct colored line plotted over time. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperature values, while d3.line with curveBasis generates the smoothed paths. A nested data structure organizes measurements by city, and a custom colorLegend component renders the categorical scale using d3.scaleOrdinal with schemeCategory10. The chart includes gridlines, axis labels, and a title, with data loaded from a CSV file.

Loading thumbnail…

Tempraturer

This visualization displays hourly temperature readings over one week, with a blue line tracing the fluctuations and a maroon fill beneath it. The chart uses D3 v5’s scaleTime, scaleLinear, axisBottom, axisLeft, and line with curveBasis to render the data, while nest() groups the dataset by city to generate multiple series. Data is loaded via d3.csv from a remote dataset, and the SVG is appended with axes, gridlines, and labels. The visualization emphasizes the daily temperature cycles and overall weekly trend.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart visualizes temperature data from San Francisco over one week, using multiple colored lines to differentiate regions. The chart encodes profit values on the x-axis and segment categories on the y-axis, with color mapping to region through an ordinal scale. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, `axisLeft`, `line` with `curveBasis`, and `nest` to group data by region. A custom `colorLegend` component displays the color scale, while the SVG rendering includes gridlines, axis labels, and a title.

Loading thumbnail…

Melting Data for Multiple Lines

This example shows population trends over time by region, with multiple colored lines in an SVG chart. The data is processed by melting wide-format UN population estimates into tidy long-form rows using `range` and `timeParse`. The visualization uses `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis`, `nest`, and `axisLeft`/`axisBottom`. A custom color legend displays categorical regions, and lines are sorted by their final population value using `descending`.

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive dashboard presents ILINet influenza surveillance data across four linked views: weekly trends for multiple years, a choropleth map of state-level averages, a bar chart ranking top states, and a colored line chart of state-specific patterns. Users can select metrics and years via dropdowns, with brushing and fading to highlight hovered or selected items. Built with React and D3 v5, it uses `d3.geoAlbersUsa` and `geoPath` for the map, `d3.scaleBand` for bars, and `d3.line` with curve interpolation. Data is loaded from a CSV via `d3.csv` from the CDC FluView dataset.

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization presents ILINet flu surveillance data across four linked panels: a line chart of weekly annual averages, a choropleth map of state-level values, a bar chart of top states, and a multi-line trend chart. The d3.js and React-based application uses `geoAlbersUsa` and `geoPath` for map rendering, `scaleBand` and `scaleLinear` for charts, and supports hover/click interactions that highlight selections across panels. The CDC FluView dataset is loaded via `d3.csv` and filtered to exclude non-state regions.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart compares profit by sub-category for different customer segments and regions. It shows multiple colored lines, each representing a region, plotted across sub-categories with profit values on the y-axis. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleOrdinal`, `nest`, `line`, and `curveBasis` to aggregate and smooth the data. A color legend, built with `colorLegend`, identifies each region. The data, sourced from Data Canvas - Sense Your City, is loaded from a CSV and rendered as an SVG.

Loading thumbnail…

MULTILINE MOOD

This example shows three profit trends across time, one line for each customer segment, with an ordinal color scale distinguishing consumer, corporate, and home office data. A color legend at the right identifies each category. The visualization uses d3.csv to load the data, d3.nest to group records by segment, and d3.line with curveBasis to smooth the paths, while d3.scaleLinear and d3.axisBottom/axisLeft handle the axes.

Loading thumbnail…

ILINet Flu Surveillance Data

This chart displays annual influenza-like illness (ILI) total cases by week, comparing yearly curves from 2015 to 2019 using data from CDC FluView Interactive. Each line represents a year, encoded with an unordered color scale that complicates temporal reading. The visualization aggregates the original region-level CSV data with a Vega-Lite API pipeline, applying `vl.sum` and `groupby` transforms, then renders lines via `vl.markLine`. It uses vega-lite-api with vega and vega-tooltip for interactive hover details.

Loading thumbnail…

Line chart with multiple lines

A line chart displays a week of temperature readings for multiple cities, with each city represented by a colored line and a legend identifying its color. The visualization uses D3.js scales and axes (d3.scaleTime, d3.scaleLinear, d3.axisLeft, d3.axisBottom) with a d3.line generator and curveBasis for smoothing. Data comes from a CSV file loaded via d3.csv, and city colors are assigned using d3.scaleOrdinal with schemeCategory10. The chart is rendered as SVG with grid lines and labeled axes.

Loading thumbnail…

Melting Data for Multiple Lines

This example shows population over time by region for the world, displaying multiple smooth lines on a chart with a color legend to distinguish regions. The data is melted from a wide CSV format into tidy rows, combining historical estimates from 1950 to 2014 with medium-variant projections from 2015 to 2100 from the UN. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis`, `nest` for grouping by region, and custom axis and legend components. Lines are rendered as SVG paths with a multiply blend mode, and the axis labels use custom formatting for population values.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays US earthquake counts by region from 2011 to 2015, using data from the Data Canvas - Sense Your City project. Multiple colored lines represent different regions, with circles marking individual data points. The visualization uses d3.nest to aggregate and rollup data, d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.line with curveBasis for path generation. A color legend is rendered using a custom colorLegend module, and the chart includes interactive mouseover and mouseout events on the data circles.

Loading thumbnail…

Melting Data for Multiple Lines

This chart displays population estimates and projections from 1950 to 2100 for regions worldwide, using multiple lines colored by country and sorted by their final population values. The visualization relies on d3.csv to load UN data, d3.nest to group rows by region, and d3.line with curveBasis to generate smooth paths. A custom colorLegend module renders the categorical color scale, while axes are built with d3.axisLeft and d3.axisBottom, and the data is reshaped through a custom “melting” process that converts wide-format year columns into long-format rows.

Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes the number of confirmed COVID-19 cases over time for several countries, using animated multiple lines that appear to "melt" as they extend. The chart initially loads all data, then after a brief delay, it progressively renders lines day by day up to day 92, with each line colored and labeled for its country. The code uses D3 v5 APIs such as `nest()`, `line()`, `scaleLinear()`, and `transition()` to update the paths, while the `yValue` function adds random noise to China’s data after day 52, creating a melting effect. Data is loaded from CSV files and rendered as SVG.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays annual carbon dioxide emissions per capita for the top 10 countries, using multi-color lines to compare trends over time. The visualization reads data from a CSV file and renders it as SVG, with each line representing a country, a color legend for identification, and labeled axes for year and emissions. The implementation uses D3 v5 APIs including `d3.csv`, `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.nest`. A custom `colorLegend` function generates the legend, and gridlines and axis labels are styled for clarity.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays per-capita CO2 emissions from 1987 to 2017 for ten countries, with each colored line representing a nation and a legend on the right. The data is loaded from `annualco2.csv` and rendered as SVG paths using D3 v5’s `line` generator with `curveBasis` smoothing. Axes are drawn with `axisBottom` and `axisLeft`, while `scaleTime` and `scaleLinear` map years and emission values. A custom `colorLegend` component and `scaleOrdinal` with `schemeCategory10` assign distinct colors to each country.

Loading thumbnail…

Melting Data for Multiple Lines

This example shows four stacked line charts tracking cumulative counts of different infection sources—travel to Hubei, relatives, social contacts, and public transit—over time. The code uses d3.nest() to group the CSV data by category, then renders each category as a separate SVG path with d3.line(). A color legend is built using a custom colorLegend function with d3.scaleOrdinal. The x-axis uses d3.scaleTime for date parsing, while the y-axis uses d3.scaleLinear for counts.

Loading thumbnail…

ILINet Flu Surveillance Data

This visualization displays national ILI (influenza-like illness) total cases across the years 2015–2019, with each year’s weekly curve plotted as a distinct line. The chart uses a line mark with year encoded as color, revealing seasonal patterns and year-over-year comparisons, such as the peak in 2018 and the extended 2019 season. Built with the vega-lite-api, it aggregates weekly data by summing ILITOTAL per week and year, then renders via Vega-Lite and Vega. The color scale is unordered, making it harder to discern temporal ordering. Data originates from CDC FluView, fetched as CSV via d3.csv.

Loading thumbnail…

Temperature in San Francisco Line Charte

A line chart displays temperature measurements over a week in San Francisco, with time on the x-axis and temperature on the y-axis. The SVG visualization uses d3.scaleTime and d3.scaleLinear to map data, d3.line with curveBasis to generate the smoothed path, and d3.axisBottom and d3.axisLeft for labeled axes. Data is loaded via d3.csv from a remote dataset, with timestamps parsed as Date objects and temperatures converted to numbers.

Loading thumbnail…

Melting Data for Multiple Lines

This example shows population over time by region for the world, displaying multiple smooth lines on a chart with a color legend to distinguish regions. The data is melted from a wide CSV format into tidy rows, combining historical estimates from 1950 to 2014 with medium-variant projections from 2015 to 2100 from the UN. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis`, `nest` for grouping by region, and custom axis and legend components. Lines are rendered as SVG paths with a multiply blend mode, and the axis labels use custom formatting for population values.

Loading thumbnail…

Temperature in multiple cities

This example shows temperature trends over time for multiple cities, with each city represented as a colored line and sorted by its final value. The visualization uses d3.line with curveBasis for smooth paths, d3.scaleTime and d3.scaleLinear for axes, and d3.scaleOrdinal with schemeCategory10 for city colors. A custom colorLegend component renders the legend, while d3.nest groups the CSV data by city. The SVG rendering includes grid lines via axis tick sizing and a mix-blend-mode for overlapping lines.

Loading thumbnail…

Algorithm Results Evaluation

This example shows a grouped bar chart evaluating algorithm test versions by four outcome categories—High, Mid, Low, and Base—as percentages on a 0–100 scale. The React-based visualization uses d3.scaleBand for the categorical x-axis and d3.scaleLinear for the y-axis, with each version rendered as four colored rectangles via SVG. Data is loaded as CSV through d3.csv, with the first twelve rows displayed and a fixed y-domain emphasizing relative performance.

Loading thumbnail…

Temperature in multiple cities

This visualization shows population trends over time for multiple cities. A line chart displays each city’s population as a colored line, with a color legend identifying them. A vertical line marks the currently selected year, and moving the mouse across the chart updates that selection. The code builds the SVG using D3 v5, employing `d3.scaleOrdinal` with `schemeCategory10` for colors, `d3.axisBottom` and `d3.axisLeft` for axes, `d3.line` with `curveBasis` for smoothing, and `d3.mouse` for interaction. Data is loaded from a CSV file using `d3.csv`.

Loading thumbnail…

D3 Example

This stacked bar chart displays the estimated 2010 religious composition of the world’s 20 most populous countries, using data from the Pew Research Center’s Global Religious Landscape. The visualization splits each country’s total population into colored segments representing different religions. Hovering over individual bars reveals tooltips with precise values, while hovering over the legend highlights the corresponding religion across all countries. Built with D3 v3, the chart uses the `d3.layout.stack` for stacking, `d3.scale.ordinal` and `d3.scale.linear` for positioning, and renders as SVG. Data is loaded from a local CSV file.

Loading thumbnail…

Visualization 1 (Stacked Bars)

A stacked bar chart compares total sales by product sub-category across three customer segments (Consumer, Corporate, and Home Office). Mouse hover on a legend item highlights that sub-category’s segment breakdown while dimming the others, with tooltips detailing exact sales values. The visualization uses D3.js (v3.5.5) with the `d3.layout.stack` API, SVG rendering, and the `d3.legend` and `d3.tip` libraries, drawing sales data from a CSV file.

Loading thumbnail…

Visualization 1 (Stacked Bars)

A stacked bar chart compares sales across customer segments and product sub-categories, using color to distinguish sub-categories within each segment. The visualization is rendered with D3.js (version 3.5.5) and uses d3.layout.stack to create the stacked layers, while d3.legend provides the interactive color legend. Hovering over a legend entry highlights that sub-category’s bars and fades the rest, and d3-tip displays exact sales values on hover. The chart animates and reads from a CSV containing individual sales records.

Loading thumbnail…

Visualization 1 (Stacked Bars)

This stacked bar chart compares sales across product sub-categories, broken down by customer segment (Consumer, Corporate, Home Office). The visualization uses D3.js to render an SVG with animated transitions, where hovering over a color legend highlights a specific segment's bars. It employs `d3.layout.stack`, `d3.scale.ordinal`, and `d3.legend.color` to structure and annotate the data, which is loaded from CSV files containing sales figures. Tooltips via `d3-tip` display exact values on interaction.

Loading thumbnail…

Visualization 1 (Stacked Bars)

A stacked bar chart compares total sales by product sub-category across three customer segments (Consumer, Corporate, and Home Office). Mouse hover on a legend item highlights that sub-category’s segment breakdown while dimming the others, with tooltips detailing exact sales values. The visualization uses D3.js (v3.5.5) with the `d3.layout.stack` API, SVG rendering, and the `d3.legend` and `d3.tip` libraries, drawing sales data from a CSV file.

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores ILINet flu surveillance data through four coordinated panels: a line chart showing annual patient visit trends, a choropleth map of state-level averages, a bar chart ranking top states, and a state-colored line chart for yearly patterns. Built with React and D3 v5, it uses `scaleBand`, `scaleLinear`, and `scaleOrdinal` for chart scales, `geoAlbersUsa` and `geoPath` for map rendering, and `topojson` for US state boundaries. Users can filter by year and metric via dropdown menus, with hovering highlighting selections across panels through shared state. Data comes from the CDC’s ILINet surveillance dataset.

Loading thumbnail…

d3.js learning

This example shows a stacked bar chart of fruit consumption over time, using d3.v3 with SVG rendering and React integration. The visualization displays four categories (redDelicious, mcintosh, oranges, and pears) as stacked layers, with a tooltip revealing individual segment values on mouseover. The code uses d3.layout.stack() to transpose data, d3.time.format for year parsing, and d3.svg.axis for both x and y axes, building the chart with svg rect elements and a custom legend.

Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This stacked bar chart displays 2018 project funding items segmented by institution type (Consumer, Corporate, Home Office) and sub-category, with bars colored by sub-category. Built with D3.js (v3.5.5), it uses `d3.layout.stack` for stacking, `d3.scale.ordinal` and `d3.scale.linear` for scales, and `d3.svg.axis` for axes. Hovering over legend items filters foreground bars, with tooltips via `d3-tip`. Data comes from CSV files, rendered as SVG with animations.

Loading thumbnail…

d3.js learning

A stacked bar chart shows the changing counts of four fruit varieties (Red Delicious apples, McIntosh apples, oranges, and pears) across the years 2006–2016. The d3.v3 code builds the visualization from inline JavaScript data using `d3.layout.stack` for layered series, `d3.scale.ordinal` for the time-based x-axis, and `d3.svg.axis` for axes with custom tick formatting. Hovering reveals a value tooltip, and a legend identifies each color-coded segment. The SVG rendering is achieved through appended `<rect>` elements.

Loading thumbnail…

Untitled

A stacked bar chart displays sales data across cities for a selected customer segment, with bars divided by product sub-category. An interactive dropdown filters by segment, while a checkbox toggles between sorting cities alphabetically or by total sales. Built with React and D3 v5, the visualization uses `d3.csv` to load data, `d3.stack` for stacking layers, and transitions to animate updates. SVG rects and axes render the chart, with text labels showing quantities above each bar.

Loading thumbnail…

Customizing Axes

This bar chart visualizes the population of the top 10 most populous countries using 2018 data from the United Nations World Population Prospects. It demonstrates customization of D3 axes, including a custom tick format that converts large numbers to billions, and removal of default axis lines and ticks. Built with d3.v5, the chart uses `scaleLinear` and `scaleBand` for scales, `axisBottom` and `axisLeft` for axes, and renders as SVG with styled text elements.

Loading thumbnail…

Let's make a face with D3.js!

This bar chart visualizes population data from a CSV file, mapping population to bar width and country to vertical position. Built with D3 v5, it uses `d3.csv` to load data, `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for tick marks. The SVG renders horizontal bars with a steelblue fill, and margins position the chart within a 960x500 viewport.

Loading thumbnail…

d3.js learning

This example demonstrates a minimal bar chart rendered with D3.js version 3, mapping population values from a CSV file (data1.csv) to rectangles. The code uses `d3.csv` to load the data and `d3.scaleLinear` with `d3.max` to define the x-scale domain, though it does not actually assign the scale to the rectangles. The chart applies fixed width and height attributes (300 pixels each) to every bar, leaving the visualization incomplete and non-functional as shown.