W

wishcsdev

@wishcsdev·20 public vizzes

Loading thumbnail…

Cars Scatter Plot with Menu

This interactive scatter plot displays the relationship between suicides and population across multiple countries, with each origin represented by a distinct color. Users can change both the x- and y-axis variables via dropdown menus built with the custom dropdownMenu function. The visualization uses D3 v5’s scaleLinear, scaleOrdinal, axisBottom, and axisLeft to render SVG elements, with a colorLegend module for interactive country filtering by clicking legend items. The data comes from a CSV file loaded via d3.csv, and circle opacity adjusts to highlight or dim points based on the selected country.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays suicide numbers across countries over time, with each line representing a country and color encoding the country identity. The data comes from the Data Canvas - Sense Your City dataset. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and `nest` to group data by country. Lines are drawn using the `line` generator with `curveBasis` smoothing, and a `colorLegend` displays the available country choices.

Loading thumbnail…

Line Chart with Multiple Lines

This example shows suicide numbers across multiple countries over time, with each country represented by a colored line on a time-series chart. The visualization uses D3 v5 to load CSV data and render an SVG with scaled axes, grid lines, and a color legend. It employs D3's `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, along with `axisBottom`, `axisLeft`, and `nest` to group data by country. The lines are sorted by their final value, and the chart is rendered entirely with SVG elements.

Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays car data from the UCI Machine Learning Repository’s Auto MPG dataset, allowing users to choose which columns map to the X and Y axes via dropdown menus. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` for axes, and animates circles with `transition().delay()`. Rendering is SVG-based, with the `dropdownMenu` module handling the select elements and `scatterPlot` managing the chart layout and labels.

Loading thumbnail…

Line Chart with Multiple Lines

This example displays suicide numbers across countries over time, with each country’s yearly data shown as a separate colored line and a matching color legend on the right. Using d3.csv to load the dataset, d3.scaleTime and d3.scaleLinear map years and suicide counts, while d3.nest groups records by country and sorts them by the last value. The SVG rendering includes axes, gridlines, and a title, though the line paths are commented out, so only colored circles appear at data points.

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays suicide rates over time for Canada, France, and Germany, with each circle representing a yearly observation for a specific country and gender. The data originates from the UCI Machine Learning Repository. Using D3 v5, the visualization employs `scaleLinear` for both axes, `axisBottom` and `axisLeft` for gridlines, and SVG circles with red fill to depict the relationship between year and suicides per 1000 people, sourced from a CSV file.

Loading thumbnail…

Cars Scatter Plot with Menu

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying cars as circles colored by country of origin (USA, Japan, Germany) with hover tooltips showing car names. Users can compare any two numerical attributes (mpg, cylinders, displacement, horsepower, weight, acceleration) via two dropdown menus. Clicking the color legend filters the data by origin, changing circle opacity to highlight selected countries. The visualization uses D3 v5 with scales (scaleLinear, scaleOrdinal), axes (axisLeft, axisBottom), and custom reusable components for the dropdown menu and interactive legend, rendered as SVG.

Loading thumbnail…

Cars Scatter Plot with Menu

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying cars as circles colored by country of origin (USA, Japan, Germany) with hover tooltips showing car names. Users can compare any two numerical attributes (mpg, cylinders, displacement, horsepower, weight, acceleration) via two dropdown menus. Clicking the color legend filters the data by origin, changing circle opacity to highlight selected countries. The visualization uses D3 v5 with scales (scaleLinear, scaleOrdinal), axes (axisLeft, axisBottom), and custom reusable components for the dropdown menu and interactive legend, rendered as SVG.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. Each city’s temperature over time is drawn as a smooth, multi-hued path using `d3.line`, `curveBasis`, and `d3.nest`. The SVG rendering uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal(schemeCategory10)` for axes and colors, while a custom `colorLegend` function maps city names.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. Each city’s temperature over time is drawn as a smooth, multi-hued path using `d3.line`, `curveBasis`, and `d3.nest`. The SVG rendering uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal(schemeCategory10)` for axes and colors, while a custom `colorLegend` function maps city names.

Loading thumbnail…

Cars Scatter Plot

A scatter plot maps car data from the UCI Auto MPG dataset, plotting year against suicide counts per country. The visualization renders red, semi-transparent circles within an SVG, using scales and axes from D3 v5. It employs `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks and grid lines, and formats data with `format`. The code reads from a CSV containing suicide and population statistics for Canada, France, and Germany, though the title and labels focus on the suicide trend.

Loading thumbnail…

Selecting a Year on a Line Chart

This line chart visualizes population trends over time by region, sourced from UN population estimates and medium-variant projections (1950–2100). A vertical line highlights the currently selected year, which users change by hovering anywhere on the chart, triggering a re-render via `setSelectedYear`. The chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` with `d3.curveBasis` for smooth paths, and a categorical color legend built from `d3.schemeCategory10`. A semi-transparent rectangle captures `mousemove` events to invert the mouse position back to a date with `xScale.invert`.

Loading thumbnail…

Line Chart with Multiple Lines

A line chart displays one week of temperature readings across multiple global cities, with each city represented by a distinct colored line. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.nest for grouping data by city, and d3.line with curveBasis for smooth paths. A d3.scaleOrdinal with schemeCategory10 handles color encoding, while an interactive color legend explains city assignments. The chart includes axis labels, a title, and a legend, rendering data from the Data Canvas - Sense Your City dataset.

Loading thumbnail…

Suicides rates in countries

The chart displays suicide rates over time for various countries, with a line chart connecting yearly data points. The visualization uses D3 v5 to load CSV data, parses year values, and scales the time and linear axes. It renders an SVG with a maroon line path, axis labels, and gridlines, with the data pulled from the source at vizhub.com/wishcsdev/datasets/suicides.csv.

Loading thumbnail…

Customizing Axes

This bar chart displays suicide counts by country, using data from 1979 to 2014 for Canada, France, and Germany. It customizes the D3 v5 axes by applying a linear scale to the quantitative x-axis and a band scale to the categorical y-axis. The code uses `axisBottom` and `axisLeft` to generate ticks, removes default domains and tick lines, and adds grid lines via `tickSize`. The x-axis labels use the `format` function for compact number display.

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The visualization customizes both axes: the y-axis removes domain and tick lines for a cleaner look, while the x-axis applies a custom tick format that converts large numbers into abbreviated labels and draws grid lines across the chart. Built with d3.v5, the code uses d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft to render SVG elements. Population values are multiplied by 1000 during data loading from a CSV file.

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The visualization customizes both axes: the y-axis removes tick lines and domain, while the x-axis uses a `format('.3s')` tick formatter to abbreviate values and adds a custom “Population” label. Built with d3.v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG rectangles.

Loading thumbnail…

Making a Bar Chart

This bar chart displays population data for top countries from the 2018 UN World Population Prospects. The visualization uses d3.csv to load data, d3.scaleLinear for the x-axis, and d3.scaleBand for categorizing countries on the y-axis. Population values are multiplied by 1000 to reflect actual counts. The SVG rendering includes d3.axisLeft and d3.axisBottom for labeled axes, with steelblue rectangles representing each country's population.

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries from the 2018 United Nations World Population Prospects estimate, with a titled axis label and custom tick formatting that abbreviates large numbers (e.g., “G” for billion) using d3.format. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scales, and d3.axisLeft and d3.axisBottom for axes, while removing default axis lines and adding custom tick sizes and labels. The chart is rendered as SVG, with steelblue bars and sans-serif text styled via CSS.

Loading thumbnail…

Untitled

This interactive visualization presents multiple coordinated views of Titanic passenger data, including gender and survival pie charts alongside age and fare histograms. Users can filter by passenger class via dropdown, while clicking pie chart slices triggers linked selections across all views. The code uses D3.js with `d3.pie`, `d3.arc`, `d3.histogram`, and `transition.attrTween` for animated updates, rendered as SVG. Data originates from the Titanic passenger manifest, though the README references a different population dataset without visible integration.