Shashwat Priyadarshi

@shshwt25·6 public vizzes

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City, with time on the x-axis and temperature in degrees Celsius on the y-axis. The visualization uses d3.v5 to load CSV data via `d3.csv`, scales with `scaleTime` and `scaleLinear`, and renders axes through `axisBottom` and `axisLeft`. A smooth curve is drawn using the `line` generator with `curveBasis`, and the SVG output includes labeled axes and a title.

May 20, 2020

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays car data from the UCI Machine Learning Repository’s Auto MPG dataset. Users select which columns to map to the X and Y axes via dropdown menus, and the visualization updates the axes and corresponding data points accordingly. The chart is rendered as an SVG using d3-scales with linear axes, and the menus are built with a reusable dropdownMenu module. The code uses d3’s selection, scaleLinear, extent, axisLeft, and axisBottom APIs, and it incorporates rotated tick labels for readability.

May 18, 2020

Loading thumbnail…

Example

This multi-series bar chart displays product category sales across three customer segments, with each bar stacked to show the cumulative sales total per category. The visualization uses D3.js with SVG rendering and a custom legend that filters the displayed segments on hover, dimming the base bars and highlighting the selected layer. Data is loaded from a CSV file, and the chart employs d3.scale.ordinal, d3.layout.stack, and d3.legend to handle axes, stacking, and color encoding. Animated transitions are not present, but the interactive tooltip via d3-tip provides per-bar sales values.

May 18, 2020

Loading thumbnail…

Stylized Scatter Plot

This interactive scatter plot visualizes the Auto MPG dataset, letting users explore relationships between numeric vehicle attributes. Two dropdown menus, built with a custom D3 module, select which columns are plotted on the x- and y-axes. The chart uses D3 v5 scales, axes, and SVG circles that animate from the center to their positions with a staggered delay, while gridlines and axis labels update dynamically. The code is structured as reusable ES6 modules for the menu and plot.

May 17, 2020

Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for individual flowers. The React-based visualization uses D3's `scaleLinear` and `extent` functions to compute scales, while custom SVG components render the axes and circular marks. Styling employs the Poppins font with teal-colored circles and muted gray gridlines. The chart includes labeled axes with rotated y-axis text and a tooltip showing the petal length value on each point hover, loaded asynchronously via D3's `csv` parser.

May 17, 2020

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, with dropdown menus allowing users to choose which columns map to the X and Y axes. The visualization uses d3.scaleLinear, d3.extent, and d3.axisBottom/axisLeft to render the plot, while a custom dropdownMenu module handles the select elements. Circles appear with a 2-second animated transition via transition().duration() and delay, and the SVG updates dynamically as users select different variables. The code also demonstrates reusable chart functions and modular ES6 imports.

May 15, 2020