Skip to main content
Log in
K

Kaushik Mishra

@kaushikred·9 public vizzes

Loading thumbnail…

Positive Macc Curve

This visualization displays a Marginal Abatement Cost Curve (MACC), plotting abatement potential against cost for various industrial decarbonization measures. Rectangles represent individual strategies, positioned to show cumulative potential with color-coded material categories. Built with React and D3 v5, it uses `scaleLinear`, `scaleBand`, and explicit axis components to render SVG elements. The chart includes hover tooltips and a reference zero line, with data drawn from an industry-specific dataset.

Mar 23, 2022
Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data, rendered as horizontal bars in an SVG. Population values are formatted with abbreviating tick labels that convert gigabytes to billions. The visualization uses React components with d3.scaleBand and d3.scaleLinear for scales, while the axis and mark components map data to styled rectangles. A sans-serif Poppins font and teal bar color give the chart a distinctive appearance.

Mar 21, 2022
Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization presents a marginal abatement cost curve, plotting the cost per ton of CO2e abated against the total abatement potential for various industrial processes, with bars colored by material type. The chart includes both positive and negative cost measures, with a reference line at zero cost, and displays the data using SVG rectangles scaled by D3's linear scales. The React application uses D3 v5 APIs like `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while hardcoded data from a specific industrial abatement study is rendered without any interactive features.

Mar 21, 2022
Loading thumbnail…

Fork of Refactored Bar Chart

This visualization displays the top 10 most populous countries as a horizontal bar chart, using population data from the United Nations World Population Prospects 2019. Built with React and D3 v5, it renders SVG elements through reusable components. The chart uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with `AxisBottom` and `AxisLeft` components generating tick marks and labels. Data is loaded asynchronously via `d3.csv` from a GitHub gist, and bars are drawn as `<rect>` elements whose widths correspond to each country's 2020 population.

Mar 20, 2022
Loading thumbnail…

Vertical Bar Chart

This vertical bar chart visualizes population data for the top 10 countries from the UN Population 2019 dataset, with country names on the x-axis and population values on the y-axis. The visualization is built using React components with D3 v5 utilities, using `d3.scaleBand` for the categorical axis and `d3.scaleLinear` for the continuous scale, rendering as SVG. The chart includes axes labeled with country names and population values, though bar rectangles are defined in the Marks component but not rendered in the chart.

Mar 19, 2022
Loading thumbnail…

Rendering Data in bar chart

This example displays a horizontal bar chart of population data for the top 10 countries, sourced from the UN Population 2019 CSV. The chart uses React to render SVG rectangles, with scales created by d3.scaleBand and d3.scaleLinear to position bars and axes. Custom React components (AxisBottom, AxisLeft, Marks) draw the axes and bars, while the useData hook loads and parses the CSV via d3.csv. The visualization effectively compares population sizes through bar lengths, with country names labeled on the left axis.

Mar 19, 2022
Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates a React component that loads CSS named colors data from a remote CSV file using D3’s `csv` utility. While the data is being fetched, the interface displays “Loading...”; once loaded, it renders a plain-text summary describing the dataset’s size in kilobytes, row count, and column count. The code uses React hooks (`useState`, `useEffect`, `useCallback`) to manage asynchronous state and the `d3.csvFormat` function to measure data size. The visualization simply presents this metadata as large monospace text.

Mar 13, 2022
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data for visualization using D3.js within a React application. It shows the process of fetching external data and transforming it into a format suitable for charting, with the parsed results displayed as a simple HTML table. The code utilizes the `d3.csv` function to asynchronously load the data file and convert each row into a JavaScript object, while React manages the component state to render the resulting dataset. The example highlights the integration of D3's data-handling capabilities with React's declarative UI components.

Mar 13, 2022
Loading thumbnail…

Fork of Hello HTML

A stylized cartoon face is rendered as a yellow circle with black outlined eyes and a curved mouth. Built with React components, the visualization uses reusable sub-components for the background, eyes, and mouth, orchestrated by a `FaceContainer` that manages the SVG coordinate system. The mouth is drawn using the `d3.arc()` generator to create a semi-circular path, while all elements are positioned relative to a central origin defined by the face's dimensions.

Mar 13, 2022