Skip to main content
Log in
R

Rochisman Datta

@rochismandatta·14 public vizzes

Loading thumbnail…

Fork of Smiley Face Part-3 (React and d3)

This example shows a yellow smiley face drawn as an SVG, whose mouth is created with the `arc` helper from d3-shape. Circles render the face and eyes, while a path element uses the arc’s defined radius and angles for the mouth. Built with the React framework, the code uses ES6 template literals for the SVG group’s `transform` attribute to center the composition. All elements are statically defined, with no interactivity or external data source.

Sep 26, 2021
Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature (in degrees Celsius) in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line with a curveBasis interpolation to draw a smooth path. Data is loaded as CSV from an external dataset via d3.csv. The chart includes gridlines, axis labels, and a title, all rendered as SVG. The color scheme uses maroon for the line and steelblue for any points.

Sep 26, 2021
Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature (in degrees Celsius) in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line with a curveBasis interpolation to draw a smooth path. Data is loaded as CSV from an external dataset via d3.csv. The chart includes gridlines, axis labels, and a title, all rendered as SVG. The color scheme uses maroon for the line and steelblue for any points.

Sep 25, 2021
Loading thumbnail…

Fork of Temperature Time Series

This visualization displays a temperature time series as a blue line, with tooltips revealing precipitation values for each data point. The chart uses the Vega-Lite API, registered with Vega and Vega-Lite, alongside the vega-tooltip handler for interactive hover details. Data is loaded asynchronously via d3.csv from a Gist-hosted CSV file containing Istanbul weather records. The line encodes dates on the x-axis and temperature on the y-axis, with the visualization sized to fit the window and styled with custom axis and label configurations for readability.

Sep 25, 2021
Loading thumbnail…

Fork of Smiley Face Part-3 (React and d3)

This example shows a yellow smiley face drawn as an SVG, whose mouth is created with the `arc` helper from d3-shape. Circles render the face and eyes, while a path element uses the arc’s defined radius and angles for the mouth. Built with the React framework, the code uses ES6 template literals for the SVG group’s `transform` attribute to center the composition. All elements are statically defined, with no interactivity or external data source.

Sep 25, 2021
Loading thumbnail…

Fork of HTML Starter

This example displays the text "Hello HTML" centered on the page at a massive 13em font size, with a plain white background and no interactive elements. The code uses raw HTML, CSS, and JavaScript, with the `console.log` API outputting "Hello JavaScript!" to the browser’s developer tools. It serves as a minimal template for understanding the basic structure of a web page, making no use of external libraries or data sources.

Sep 25, 2021
Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature (in degrees Celsius) in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line with a curveBasis interpolation to draw a smooth path. Data is loaded as CSV from an external dataset via d3.csv. The chart includes gridlines, axis labels, and a title, all rendered as SVG. The color scheme uses maroon for the line and steelblue for any points.

Sep 25, 2021
Loading thumbnail…

Fork of Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature data in Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperatures, with d3.nest grouping measurements by city and d3.line with curveBasis generating smooth paths for each city’s temperature trend. A d3.scaleOrdinal with schemeCategory10 assigns colors, and a custom colorLegend component renders city labels. The SVG output includes gridlines, axis labels, and a title, with semi-transparent lines blended via mix-blend-mode for overlapping series.

Sep 25, 2021
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. It renders multiple smoothed lines using d3.line with curveBasis, colored by city via d3.scaleOrdinal and schemeCategory10. The visualization includes time and temperature axes with gridlines, a color legend, and a title. Data is parsed from CSV using d3.csv, with nested grouping via d3.nest.

Sep 25, 2021
Loading thumbnail…

Fork of Stylized Line Chart

This React-based visualization displays a week of San Francisco temperature readings as a smooth, stylized line chart. The chart uses d3.scaleTime and d3.scaleLinear to map timestamps and temperature values, with d3.line and curveNatural generating the curved path. The data comes from the Data Canvas Sense Your City dataset, loaded via d3.csv and rendered as SVG elements including custom axis components and a hidden point layer.

Sep 25, 2021
Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature (in degrees Celsius) in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line with a curveBasis interpolation to draw a smooth path. Data is loaded as CSV from an external dataset via d3.csv. The chart includes gridlines, axis labels, and a title, all rendered as SVG. The color scheme uses maroon for the line and steelblue for any points.

Sep 25, 2021
Loading thumbnail…

Fork of Scatter Plot COVID-19 Vaccination and Cases with Dual Axis

This interactive scatter plot visualizes COVID-19 vaccination rates (in blue) against reported case counts (in gray) for the US population, using a dual y-axis. The visualization animates data points over time using D3 v6 and SVG, with vaccination data from Our World in Data and case data from the NYT. Users can toggle between partial and fully vaccinated metrics via a custom menu. The code employs D3 scales, axes, transitions, and the `selection.join` pattern for reusable chart components.

Sep 25, 2021
Loading thumbnail…

Bar Chart

This bar chart displays the relationships between comic-themed sources and targets, with bar lengths encoding the value of each connection. The visualization uses D3 v5’s `scaleLinear` for horizontal positioning and `scaleBand` for categorical source names on the y-axis, rendering SVG rectangles for each data entry. Data is loaded from a CSV file via `d3.csv`, with values parsed as numbers, and the chart updates dynamically once the data is fetched.

Sep 25, 2021
Loading thumbnail…

Smiley Face Tutorial

This example shows how to construct a simple smiley face using SVG elements. The face is composed of a yellow circle, two black eye circles, and a mouth drawn as a curved path. The code relies on the D3 library's `arc` helper from the `d3-shape` package to generate the mouth's arc, using method chaining to set its inner and outer radii and start and end angles. The implementation exists in two versions: one using D3's imperative selection and appending methods on an SVG element, and another using React with JSX to declaratively render the same shapes, both demonstrating SVG group elements and template literals.

Sep 25, 2021