M

manalhilali

@manalhilali·23 public vizzes

Loading thumbnail…

Starting with Bar Chart

A horizontal bar chart displays the weight of four individuals from a local CSV file. The chart uses D3 v6 with modular imports, including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map data values to SVG rectangles. The bars are filled with steelblue, and axes are rendered with D3's axis generators. The visualization loads data asynchronously via `csv('data.csv')`, parsing weights as numbers before rendering the SVG output.

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of the ten most populous countries, using population data loaded from a CSV file. It renders as SVG with D3 v5, using `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`. The bars are filled with steelblue, the x-axis tick labels are formatted with `d3.format` to abbreviate large numbers, and grid lines extend from the x-axis across the plot area.

Loading thumbnail…

Temperature in San Fransisco Line Chart

A line chart displays temperature variation across a week in San Francisco, using time on the x-axis and temperature on the y-axis. The visualization renders a smooth, curved line using d3.line with curveBasis, overlaid on axis grids generated by d3.axisBottom and d3.axisLeft. Data is loaded as CSV from a remote GitHub repository, parsed with d3.csv, and mapped using d3.scaleTime and d3.scaleLinear. The SVG output is styled with custom CSS classes for axes, labels, and the line path.

Loading thumbnail…

Victory!

A bar chart displays the populations of ten countries, with China and India leading by a wide margin. The visualization is built with Victory Charts and rendered in React, using the `VictoryBar` and `VictoryChart` components. Data is loaded asynchronously from a CSV file via D3's `csv` function, which parses the population column as numbers, and the resulting chart is styled with a custom font size and padding.

Loading thumbnail…

Victory!

A bar chart displays the populations of ten countries, with China and India leading by a wide margin. The visualization is built with Victory Charts and rendered in React, using the `VictoryBar` and `VictoryChart` components. Data is loaded asynchronously from a CSV file via D3's `csv` function, which parses the population column as numbers, and the resulting chart is styled with a custom font size and padding.

Loading thumbnail…

Victory!

A bar chart displays the populations of ten countries, with China and India leading by a wide margin. The visualization is built with Victory Charts and rendered in React, using the `VictoryBar` and `VictoryChart` components. Data is loaded asynchronously from a CSV file via D3's `csv` function, which parses the population column as numbers, and the resulting chart is styled with a custom font size and padding.

Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top 21 populous countries, with each circle positioned along a linear population axis and a categorical country axis. The chart uses d3.csv to load the data, d3.scaleLinear for the x-scale, d3.scalePoint for the y-scale, and d3.axisBottom and d3.axisLeft to render the axes. SVG circles are appended with a fixed radius, and a formatted tick label converts large numbers to billions using d3.format. The chart includes a title and axis label, with gridlines drawn via tick sizes.

Loading thumbnail…

Scatter Plot

This scatter plot displays the top 21 most populous countries, with each circle positioned along a linear population scale and a categorical country axis. The chart loads data from a CSV file and renders circles using D3 selections, scaled with `scaleLinear` and `scalePoint`. Axes are generated via `axisBottom` and `axisLeft`, with tick lines extending across the plot. The population axis uses a custom tick formatter to abbreviate large numbers, while the plot is styled with SVG and CSS.

Loading thumbnail…

Temperature in San Fransisco Line Chart

This line chart displays one week of temperature data in San Francisco over time. It uses D3 v6 to load the CSV dataset, parse timestamps and temperatures, and render an SVG with scales from `d3.scaleTime` and `d3.scaleLinear`. The chart includes a smoothed path generated by `d3.line` with `curveBasis`, plus labeled axes using `d3.axisBottom` and `d3.axisLeft`. A title and rotated y-axis label clarify the visualization.

Loading thumbnail…

Temperature in San Fransisco Line Chart

This line chart displays temperature readings over a week in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses an SVG rendering approach with D3 v6, employing `scaleTime`, `scaleLinear`, and `line` with `curveBasis` to create a smooth curve. The data is loaded from a CSV file hosted on VizHub, and axes are generated using `axisLeft` and `axisBottom` with custom tick styling. Grid lines and labeled axes clarify the temporal trend in temperature.

Loading thumbnail…

Temperature in San Fransisco Area Chart

This visualization shows weekly temperature trends in San Francisco as a filled area chart, with a smooth curve representing the data over time. The vertical axis measures temperature, while the horizontal axis displays time series data. The chart is rendered using D3 v6 in an SVG format, employing `scaleTime` and `scaleLinear` for axes, `area()` with `curveBasis` for the smooth path, and `axisBottom`/`axisLeft` for ticks. Data comes from a CSV file containing forest cover loss figures, though the code repurposes the date field as the time variable.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and renders marks as SVG rectangles via React components. The code employs d3.csv for data loading, d3.format with a custom tick formatter to convert values from gigabytes to billions, and custom AxisBottom and AxisLeft components for labeled axes.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and renders marks as SVG rectangles via React components. The code employs d3.csv for data loading, d3.format with a custom tick formatter to convert values from gigabytes to billions, and custom AxisBottom and AxisLeft components for labeled axes.

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019, with population values formatted in billions. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `<rect>` elements for the bars. Custom axis components render tick marks and labels, while the Poppins font and teal color scheme give the chart its stylized appearance.

Loading thumbnail…

Temperature in San Fransisco Area Chart

This area chart displays temperature readings over one week in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses a smooth, curved area fill rendered as an SVG path to show temperature variation across the period. The code loads CSV data from a remote source and processes timestamps using `new Date()`. It employs D3 v6 APIs including `scaleTime`, `scaleLinear`, `area`, `curveBasis`, `axisBottom`, and `axisLeft` to construct the chart, with gridlines extending across the plot area.

Loading thumbnail…

Temperature in San Fransisco Area Chart

This area chart displays temperature readings over one week in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses a smooth, curved area fill rendered as an SVG path to show temperature variation across the period. The code loads CSV data from a remote source and processes timestamps using `new Date()`. It employs D3 v6 APIs including `scaleTime`, `scaleLinear`, `area`, `curveBasis`, `axisBottom`, and `axisLeft` to construct the chart, with gridlines extending across the plot area.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 countries by percentage of land vulnerable to drought, using data from the United Nations World Population Prospects 2019. The visualization renders as an SVG via React, with d3.scaleBand and d3.scaleLinear handling the axes and bar positioning. d3.csv loads the dataset, while d3.format formats tick labels in abbreviated units. The chart uses a Poppins font, teal bars, and includes hover tooltips through SVG title elements.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and renders marks as SVG rectangles via React components. The code employs d3.csv for data loading, d3.format with a custom tick formatter to convert values from gigabytes to billions, and custom AxisBottom and AxisLeft components for labeled axes.

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses React with D3 v5, leveraging `scaleBand` and `scaleLinear` for positioning and sizing, while custom axis components render SVG ticks and labels. Population values are formatted with D3's `format` API, converting gigabytes to billions. Teal bars with light gray gridlines sit on a clean background with the Poppins font, and tooltips appear via SVG `<title>` elements on hover.

Loading thumbnail…

Customizing Axis

This example shows a horizontal bar chart of the percentage of drought-vulnerable land in five North African countries, using a custom-styled axis. It highlights the top values with steelblue bars and includes axis labels and a title. The chart is rendered with SVG, using D3 v6 scales and axis generators, specifically `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. The code removes default axis domain lines and tick lines, customizes tick labels and formatting, and adds rotated or shifted titles. Data comes from a CSV file with country and percentage columns.

Loading thumbnail…

Temperature in San Fransisco Area Chart

This area chart displays temperature readings over one week in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses a smooth, curved area fill rendered as an SVG path to show temperature variation across the period. The code loads CSV data from a remote source and processes timestamps using `new Date()`. It employs D3 v6 APIs including `scaleTime`, `scaleLinear`, `area`, `curveBasis`, `axisBottom`, and `axisLeft` to construct the chart, with gridlines extending across the plot area.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and renders marks as SVG rectangles via React components. The code employs d3.csv for data loading, d3.format with a custom tick formatter to convert values from gigabytes to billions, and custom AxisBottom and AxisLeft components for labeled axes.

Loading thumbnail…

Sized Points on a Map

This example visualizes global population distribution by rendering points for cities over 50,000 inhabitants on a Natural Earth projection, with point radius scaled using d3.scaleSqrt to reflect population. The map is drawn in SVG using d3.geoNaturalEarth1, d3.geoPath, and graticules generated by d3.geoGraticule, while country boundaries and interiors come from World Atlas TopoJSON. City data is sourced from Simplemaps’ World Cities Database, loaded via d3.csv. Semi-transparent teal circles emphasize densely populated regions, with styling handled through CSS.